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 相关文章推荐
基于jquery的给文章加入关键字链接
Oct 26 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
详解vue中axios的封装
Jul 18 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
js实现上传图片到服务器
Apr 11 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
PHP5 安装方法
2006/10/09 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
PHP进程通信基础之信号
2017/02/19 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
再谈javascript原型继承
2014/11/10 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
详解Vite的新体验
2021/02/22 Javascript
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
python实现同一局域网下传输图片
2020/03/20 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Python 创建守护进程的示例
2020/09/29 Python
出国留学自荐信
2013/10/25 职场文书
18岁生日感言
2014/01/12 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
小学教师培训方案
2014/06/09 职场文书
关爱残疾人标语
2014/06/25 职场文书
行政求职信
2014/07/04 职场文书
股权转让协议书
2014/12/07 职场文书
廉洁自律个人总结
2015/02/14 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
如何用python绘制雷达图
2021/04/24 Python