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 相关文章推荐
js操作二级联动实现代码
Jul 27 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python Socket编程详细介绍
2017/03/23 Python
python机器学习库常用汇总
2017/11/15 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
如何基于python操作excel并获取内容
2019/12/24 Python
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
5.1手机促销活动
2014/01/17 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书