js实现动态时钟


Posted in Javascript onMarch 12, 2020

本文实例为大家分享了js实现动态时钟的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <title>时钟</title>
</head>
<script type="text/javascript">
 function todou(n){
 if(n<10){
  return '0'+n;
 }
 else {
  return ''+n;
 }
 }

 window.onload=function(){
 setInterval(function(){
   var date = new Date();
 
 var ma = document.getElementsByTagName('img');
  var str =todou(date.getHours())+todou(date.getMinutes())+todou(date.getSeconds());
  for(var i=0;i<ma.length;i++){
  ma[i].src='images/'+str[i]+'.png';
  }
  // alert(todou(date.getSeconds()));
 // var date = new Date();
 //alert(todou(date.getSeconds()));
 }  ,1000)
    
 }
</script>
<body>

<div style="background: grey;color: red; text-align: center;font-size: 100px;" >
 <img src="images/0.png" width="100px" height="90px">
 <img src="images/0.png" width="100px" height="90px">
  时
 <img src="images/0.png" width="100px" height="90px">
 <img src="images/0.png" width="100px" height="90px">
 分
 <img src="images/0.png" width="100px" height="90px">
 <img src="images/0.png" width="100px" height="90px">
  秒
</div>
</body>
</html>

示例展示:

js实现动态时钟

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JavaScript 学习技巧
Feb 17 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
package.json各个属性说明详解
Mar 11 #Javascript
package.json中homepage属性的作用详解
Mar 11 #Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 #Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 #Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 #Javascript
Vue事件处理原理及过程详解
Mar 11 #Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 #Javascript
You might like
长波知识介绍
2021/03/01 无线电
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
设定php简写功能的方法
2019/11/28 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
js实现随机点名
2021/01/19 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
会计顶岗实习心得
2014/01/25 职场文书
高中家长意见怎么写
2015/06/03 职场文书
一年级语文教学随笔
2015/08/14 职场文书
MySQL基础(二)
2021/04/05 MySQL
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python