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 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
Jquery注册事件实现方法
May 18 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
通信工程毕业生求职信
2013/11/16 职场文书
策划主管的工作职责
2013/11/24 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
《四季》教学反思
2014/04/08 职场文书
篮球比赛策划方案
2014/06/05 职场文书
大跃进口号
2014/06/16 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
医院员工辞职信范文
2015/05/12 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
Hive导入csv文件示例
2022/06/25 数据库