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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
vue购物车插件编写代码
Nov 27 Javascript
vue自定义指令之面板拖拽的实现
Apr 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 Undefined index报错的修复方法
2011/07/17 PHP
php中apc缓存使用示例
2013/12/25 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JavaScript Split()方法
2015/12/18 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
Python人脸识别初探
2017/12/21 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
创新比赛获奖感言
2014/02/13 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
节约能源标语
2014/06/17 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
信息技术国培研修日志
2015/11/13 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
Golang gRPC HTTP协议转换示例
2022/06/16 Golang