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 24 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 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 xfocus防注入资料
2008/04/27 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python多线程抽象编程模型详解
2019/03/20 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
俄语专业毕业生推荐信
2013/10/28 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
内容编辑个人求职信
2013/12/10 职场文书
在职员工证明书
2014/09/19 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
学习退步检讨书
2014/09/28 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python