JS实现简易换图时钟功能分析
2018-01-04 10:35
821 查看
本文实例讲述了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切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Node.js实现的简易网页抓取功能示例
- js实现100秒倒计时和简易时钟
- Vuejs 实现简易 todoList 功能 与 组件实例代码
- arcgis for js 实现点、线、面、手动线、手动面缓冲区分析功能
- JS实现的汉字与Unicode码相互转化功能分析
- Node.js实现的简易网页抓取功能示例
- js,jq,css多方面实现简易下拉菜单功能
- 一个简易时钟效果js实现代码
- Mock.js简易教程,脱离后端独立开发,实现增删改查功能(转)
- 用简单的代码实现简易的rxjs的filter功能,帮助rxjs新手了解rxjs的操作符的工作原理。
- ^_^ JS实现可爱的时钟功能
- vue.js实现带日期星期的数字时钟功能示例
- js 实现日期和时钟功能
- 通过Canvas + JS 实现简易时钟实战
- JS实现简易刻度时钟
- JS实现的驼峰式和连字符式转换功能分析
- 简易记事本实现与分析(一)功能结构梳理
- JS实现时钟功能
- ddpowerzoomer.js利用jQuery扩展,实现对图片局部放大功能(源码分析)
- vuejs+bootstrap实现简易的留言板功能