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中的私有/静态属性介绍
Jul 26 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
koa源码中promise的解读
Nov 13 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
vue+iview使用树形控件的具体使用
Nov 02 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
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
用python读取xlsx文件
2020/12/17 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
大一自我鉴定范文
2013/12/27 职场文书
运动会解说词200字
2014/02/06 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
庆七一宣传标语
2014/10/08 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
争做文明公民倡议书
2019/06/24 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python