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 时间函数getYear()的使用问题探讨
Apr 01 Javascript
js变换显示图片的实例
Apr 16 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
javascript实现弹出层效果
Dec 10 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 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 XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
php常见的魔术方法详解
2014/12/25 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python yield使用方法示例
2013/12/04 Python
Python编写百度贴吧的简单爬虫
2015/04/02 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python脚本监控docker容器
2016/04/27 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
领导干部作风建设自查报告
2014/10/23 职场文书
婚礼父母答谢词
2015/01/04 职场文书
店铺转让协议书
2015/01/29 职场文书
成事在人观后感
2015/06/16 职场文书
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis