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 相关文章推荐
JavaScript 拾漏补遗
Dec 27 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
vuex存储token示例
Nov 11 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
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命名空间简单用法示例
2018/12/28 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
jquery常用操作小结
2014/07/21 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python实现批量修改文件名代码
2017/09/10 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
python 下载文件的多种方法汇总
2020/11/17 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
教育科研先进个人材料
2014/01/26 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书