js实现一个简单的数字时钟效果


Posted in Javascript onMarch 29, 2017

效果图:

js实现一个简单的数字时钟效果

代码如下:

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
  <title>一个简单的数字时钟</title>
  <script type="text/javascript" charset="utf-8">
   // 定义一个函数用以显示当前时间
   function displayTime() {
    var elt = document.getElementById("clock"); // 通过id= "clock"找到元素
    var now = new Date(); // 得到当前时间
    elt.innerHTML = now.toLocaleTimeString(); //让elt来显示它
    setTimeout(displayTime,1000); //在1秒后再次执行
   }
   window.onload = displayTime; //当onload事件发生时开始显示时间
  </script>
  <style type="text/css" media="all">
   #clock {
    font: bold 24pt sans;
    background: #ddf;
    padding: 10px;
    border: 2px solid black;
    border-radius: 10px;
   }
  </style>
 </head>
 <body>
  <h1>一个简单的数字时钟</h1>
  <span id="clock"></span>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
Vue2组件tree实现无限级树形菜单
Mar 29 #Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 #Javascript
Vue.js 插件开发详解
Mar 29 #Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 #Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 #Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 #Javascript
You might like
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JQuery动画和停止动画实例代码
2013/03/01 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python中多线程thread与threading的实现方法
2014/08/18 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
作息时间调整通知
2015/04/22 职场文书
旗帜观后感
2015/06/08 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
总结Pyinstaller打包的高级用法
2021/06/28 Python