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 相关文章推荐
jQuery实现的立体文字渐变效果
May 17 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
JavaScript 数组详解
Oct 10 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
深入理解vue路由的使用
Mar 24 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
express异步函数异常捕获示例详解
Nov 30 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异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
有模特经验的简历自我评价
2013/09/19 职场文书
大学生毕业自我鉴定范文
2013/09/19 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
三八妇女节活动总结
2014/05/04 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
人才市场接收函
2015/01/30 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
盲山观后感
2015/06/11 职场文书
Python爬取某拍短视频
2021/06/11 Python
Python机器学习之决策树和随机森林
2021/07/15 Javascript
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
教你一步步实现一个简易promise
2021/11/02 Javascript
警用民用对讲机找不同
2022/02/18 无线电
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript