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 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
基于iview的router常用控制方式
May 30 Javascript
JS运算符简单用法示例
Jan 19 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
小程序中手机号识别的示例
Dec 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 文件夹删除、php清除缓存程序
2009/08/25 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
php7下的filesize函数
2019/09/30 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python使用sorted排序的方法小结
2017/07/28 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
python计算导数并绘图的实例
2020/02/29 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
结婚邀请函范文
2014/01/14 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
药店促销活动策划方案
2014/08/24 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle