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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
innerText和innerHTML 一些问题分析
May 18 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python获取从命令行输入数字的方法
2015/04/29 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python 查看文件的读写权限方法
2018/01/23 Python
python中turtle库的简单使用教程
2020/11/11 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
Linux如何为某个操作添加别名
2015/02/05 面试题
小学教师的个人自我鉴定
2013/10/26 职场文书
医学护理毕业生自荐信
2013/11/07 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
支教自我鉴定
2014/01/18 职场文书
如何撰写岗位职责
2014/02/01 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
大队委员竞选稿
2015/11/20 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android