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匿名函数的一种应用 代码封装
Jun 27 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
浅谈jquery事件处理
Apr 24 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
微信小程序静默登录的实现代码
Jan 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
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
js获取单选按钮的数据
2006/11/27 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
tensorflow常用函数API介绍
2020/04/19 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Keras搭建自编码器操作
2020/07/03 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
法制教育讲座心得体会
2016/01/14 职场文书