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 相关文章推荐
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
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 parse_url 一个好用的函数
2009/10/03 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php 文章调用类代码
2011/08/11 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
对python中raw_input()和input()的用法详解
2018/04/22 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
财务管理职业生涯规划范文
2013/12/27 职场文书
六年级学生评语
2014/04/22 职场文书
门面房租房协议书
2014/12/01 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python