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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
单线程JavaScript实现异步过程详解
May 19 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+JS实现的实时搜索提示功能
2018/03/13 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
document.open() 与 document.write()的区别
2007/08/13 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python计算文本文件行数的方法
2015/07/06 Python
python学习 流程控制语句详解
2016/06/01 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
Python shelve模块实现解析
2019/08/28 Python
python实现超市商品销售管理系统
2019/11/22 Python
python生成特定分布数的实例
2019/12/05 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
opencv python图像梯度实例详解
2020/02/04 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
网络宣传方案
2014/03/15 职场文书
成绩单公证书
2014/04/10 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL