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对单选框(radio)操作的小例子
Apr 25 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
javascript的setTimeout()使用方法总结
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
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python去掉行尾的换行符方法
2017/01/04 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python tkinter窗口最大化的实现
2019/07/15 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
UNIX命令速查表
2012/03/10 面试题
教师个人的自我评价分享
2014/01/02 职场文书
护士岗位职责
2014/02/16 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
公积金接收函格式
2015/01/30 职场文书
品质保证书格式
2015/02/28 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
python Polars库的使用简介
2021/04/21 Python
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript