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 相关文章推荐
JavaScript执行效率与性能提升方案
Dec 21 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Django Highcharts制作图表
2016/08/27 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
秘书岗位职责
2013/11/18 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
小学评语大全
2014/04/22 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android