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 相关文章推荐
正则表达式语法
Oct 09 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
ES6数组与对象的解构赋值详解
Jun 14 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往windows中添加用户
2006/12/06 PHP
NOT NULL 和NULL
2007/01/15 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
php上传大文件设置方法
2016/04/14 PHP
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
浅谈js中的bind
2019/03/18 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
教你学会使用Python正则表达式
2017/09/07 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
广告创意求职信
2014/03/17 职场文书
员工团队活动方案
2014/08/28 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
创业计划书之废品回收
2019/09/26 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL