JS实现简易换图时钟功能分析


Posted in Javascript onJanuary 04, 2018

本文实例讲述了JS实现简易换图时钟功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> /*写移动端需要加上这句代码*/
 <title>JS简易时钟</title>
 <link rel="stylesheet" type="text/css" href="css/reset.css" rel="external nofollow" /> /*封装好的css 对一些基本的进行了设置*/
 <style type="text/css">
  #dad{width: 12rem;height: 10rem;margin: 20rem auto;}/*移动端的单位rem*/
  img{float: left;}
 </style>
 </head>
 <body>
 <div id="onclick">
  <img src="img/0.jpg"/> <!--首先我们的时钟是有六张图组成 例如 17:53:52 因此我们需要放六张图进去 接下来我们需要用到js做的就是换图而已
  <img src="img/0.jpg"/> img/0.jpg 这张图是数字0的图 此时我们的img目录下应该是0-9这十张图 -->
  <img src="img/0.jpg"/>
  <img src="img/0.jpg"/>
  <img src="img/0.jpg"/>
  <img src="img/0.jpg"/>
 </div>
 </body>
</html>
<script type="text/javascript">
 var iImg=document.getElementsByTagName("img"); //首先我们先获取到img这个标签
 setInterval(moo,1000); //时间函数 每1000毫秒执行以下moo()这个函数 也就是每一秒执行以下moo()这个函数
 moo(); //当我们写完之后会发现系统不会直接执行函数 会有一个一秒的延迟 因此我们只需在浏览器打开的时候先执行以下这个函数 就可以消除这个一秒的延迟
 function moo(){
 var now=new Date();
 var iHours=now.getHours();
 var iMinutes=now.getMinutes();
 var iSecends=now.getSeconds(); //分别获取时间 小时 分钟以及秒数
 function mov(j){ //因为我们是六张图 因此当我们时间小于10的时候 我们的iHours iMinutes iSecends为个位数 就不满足我们的六张图 因为我们需要
  if(j<10){ 考虑用0来补足 例如 17点5分5秒 我们需要写成17:05:05 而不是17:5:5
  return "0"+j; 因此我们用mov(j)这个函数来判断一下 当我们的iHours iMinutes iSecends为个位数时 我们为其补0 就是"0"+j
  }else{
  return j;
  }
 }
 var str=mov(iHours)+mov(iMinutes)+mov(iSecends); //那么这里我们只需要等量代换 把j这个参数换成iHours iMinutes iSecends就可以了 我们赋值给str 因此str将会输出
 一个六位数 例如现在是早晨9点51分27秒 那么str=095127 这么一个六位数
 for(var i=0;i<=5;i++){ //接下来我们用一个for循环换图就可以了 因为我们是六张图 因此i<=5即可 如果图数比较多 可以写成i<=iImg.length-1
  iImg[i].src="img/"+str[i]+".jpg"; // 这句话的含义就是换图 举个例子 iImg[1]代表的就是第二张图 str[1]就是上面str里面的第二个数字 就是9
 } 因此iImg[1].src=img/9.jpg 这样第二张图就换成了9这个图片 换图就完成了 因此一个时钟就做成了
 }
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
angular实现form验证实例代码
Jan 17 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 #Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 #Javascript
vue-cli配置文件——config篇
Jan 04 #Javascript
jQuery封装animate.css的实例
Jan 04 #jQuery
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 #Javascript
浅谈vuex 闲置状态重置方案
Jan 04 #Javascript
详解Angular5 服务端渲染实战
Jan 04 #Javascript
You might like
加强版phplib的DB类
2008/03/31 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python FTP操作类代码分享
2014/05/13 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Python中int()函数的用法浅析
2017/10/17 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
cf战队收人广告词
2014/03/14 职场文书
小学假期安全广播稿
2014/09/28 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
小学四年级作文之写景
2019/08/23 职场文书
实现GO语言对数组切片去重
2022/04/20 Golang
python区块链实现简版工作量证明
2022/05/25 Python