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工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
原生js+canvas实现验证码
Nov 29 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
javascript之ESC(第二类混淆)
2007/05/06 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
Python with用法实例
2015/04/14 Python
python 剪切移动文件的实现代码
2018/08/02 Python
详解Python正则表达式re模块
2019/03/19 Python
Python3进制之间的转换代码实例
2019/08/24 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
python GUI模拟实现计算器
2020/06/22 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
筑梦中国心得体会
2016/01/18 职场文书