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>
见下图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- asp.net中几种页面元素的比较
- Flash/Flex学习笔记(19):颜色合成与分解的基本原理
- Flash/Flex学习笔记(18):画线及三角函数的基本使用
- Mapx自带的工具的理解
- 水晶报表的推模式
- Flash/Flex学习笔记(17):按键捕获
- 温故而知新:c#中的特性(attribute)
- 温故而知新:new与override的差异以及virtual方法与abstract方法的区别
- malloc函数及用法
- Centos下安装破解confluence6.3的操作记录
- 也谈如何用技术手段引导用户放弃IE 6
- 手把手教你用vue2.0写个弹窗组件
- FluorineFx:视频录制及回放(Flash/AS3环境)
- VB实现半透明或者部分透明窗体
- 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 数组属性和方法
- CentOS7 SkyWalking APM8.1.0 搭建与项目集成使用
- CentOS7 cassandra安装与测试
- Centos7 搭建DNS服务器
- CentOS7 fastdfs安装与测试
- CentOS7 jdk安装
- CentOS7 kafka安装
- Centos7 keepalived安装并监控mysql实现自动切换
- Centos7 mqtt集群安装
- CentOS7 mysql5.7安装并配置主主同步
- CentOS7 nginx安装并负载mysql
- CentOS7 zabbix安装并实现其它服务器服务监控报警与自动恢复
- CentOS7 Zookeeper安装
- 【STM32F429开发板用户手册】第38章 STM32F429的FMC总线应用之是32路高速IO扩展
- 【STM32F429开发板用户手册】第39章 STM32F429的FMC总线应用之SDRAM
- react项目搭建