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 选择文件夹对话框(web)
Jul 07 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 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 header Content-Type类型小结
2011/07/03 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
德国家具在线:Fashion For Home
2017/03/11 全球购物
蛋白质世界:Protein World
2017/11/23 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
公司员工检讨书
2014/02/08 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
工地材料员岗位职责
2015/04/11 职场文书
春晚观后感
2015/06/11 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python