主页 / 网络编程 /

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

网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了JS实现简易换图时钟功能,结合实例形式分析了javascript结合时间函数定时变换显示图片实现时钟功能的相关操作技巧,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

上一篇：Angular4学习教程之DOM属性绑定详解 下一篇：Angular4学习之Angular CLI的安装与使用教程

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by