JS实现倒计时图文效果
时间:2018-11-17
这篇文章主要为大家详细介绍了JS实现倒计时图文效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现倒计时图文效果的具体代码,供大家参考,具体内容如下
<body> <img src="images/0.png" alt="" id="h1"> <img src="images/0.png" alt="" id="h2"> <img src="images/second1.png" alt=""> <img src="images/0.png" alt="" id="m1"> <img src="images/0.png" alt="" id="m2"> <img src="images/second1.png" alt="" > <img src="images/0.png" alt="" id="s1"> <img src="images/0.png" alt="" id="s2"> <script type="text/javascript"> //获取节点对象 var oH1=document.getElementById('h1'); var oH2=document.getElementById('h2'); var oM1=document.getElementById('m1'); var oM2=document.getElementById('m2'); var oS1=document.getElementById('s1'); var oS2=document.getElementById('s2'); //函数调用 getTime(); function getTime(){ //获取截止时间到1970年之间的毫秒数 var endTime=new Date('2018-07-13 12:00:00').getTime(); //获取当前时间到1970年之间的毫秒数 var nowTime=new Date().getTime(); //时间差(毫秒) var leftTime=endTime-nowTime; //获取时分秒 var h=parseInt(leftTime/1000/3600);//获得剩余的小时数 var m=parseInt(leftTime/1000/60%60);//获得剩余的分钟 var s=parseInt(leftTime/1000%60);//获得剩余的秒数 //加零(无论是小时还是分钟还是秒数都会有单个数的时候,所以可以通过加零来让其变成两位数) h=setNum(h); m=setNum(m); s=setNum(s); //双位数变成单位数 var h1=h%10; var h2=parseInt(h/10); var m1=m%10; var m2=parseInt(m/10); var s1=s%10; var s2=parseInt(s/10); //改变图片地址(下面两种方法都可以实现图片地址的变化) oH1.setAttribute('src','images/'+h2+'.png'); oH2.setAttribute('src','images/'+h1+'.png'); oM1.setAttribute('src','images/'+m2+'.png'); oM2.setAttribute('src','images/'+m1+'.png'); oS1.setAttribute('src','images/'+s2+'.png'); oS2.setAttribute('src','images/'+s1+'.png'); /*oH1.src='images/'+h2+'.png'; oH2.src='images/'+h1+'.png'; oM1.src='images/'+m2+'.png'; oM2.src='images/'+m1+'.png'; oS1.src='images/'+s2+'.png'; oS2.src='images/'+s1+'.png';*/ setTimeout(getTime,1000); } //添零函数 function setNum(num){ if(num<10){ num="0"+num; } return num; } </script> </body>
见下图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 关于oracle session的简单测试(r2笔记95天)
- 使用utl_file走选择性数据导出(r2笔记95天)
- 使用Linux命令发送邮件(r2笔记94天)
- 如何用python轻松破解wifi密码( 源码 )
- 海量数据迁移之通过shell估算数据量 (r2笔记93天)
- 使用sklearn进行数据挖掘
- 批量转换分区表为普通表(r2笔记92天)
- 使用sklearn做特征工程
- 【专业技术】CSS作用及用法
- 生产环境sql语句调优实战第六篇(r2笔记91天)
- 关于分区表的move操作(r2笔记90天)
- 简单分析oracle的数据存储(r2笔记89天)
- 机器学习线性分类算法:感知器原理
- 通过shell脚本来查看Undo中资源消耗高的sql(r2笔记88天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法