JS实现倒计时图文效果
作者：wxk_前端开发 时间：2024-04-28 09:48:28
本文实例为大家分享了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>
见下图：
来源：https://blog.csdn.net/m0_37058714/article/details/81013965
标签：js,倒计时
0
投稿猜你喜欢
详解AJAX核心 —— XMLHttpRequest 对象
2010-03-31 14:49:00
解析Anaconda创建python虚拟环境的问题
2023-08-01 03:58:13
SQL Server提示"选定的用户拥有对象,所以无法除去该用户”
2024-01-22 03:35:05
Python使用asyncio异步时的常见问题总结
2021-02-06 04:43:12
不同情况下修复Access数据库的实用方法
2008-11-28 16:18:00
python实现多人聊天室
2022-09-02 18:56:21
Python调用两个机器人聊天的实战
2021-09-30 23:10:52
JS阻止事件冒泡的方法详解
2023-09-10 08:57:36
Python调用C语言的实现
2021-10-15 11:48:53
select count()和select count(1)的区别和执行方式讲解
2024-01-29 03:11:31
Python3利用Dlib19.7实现摄像头人脸识别的方法
2022-08-08 06:41:22
Python五种下划线详解
2021-10-02 02:45:38
python 实现提取PPT中所有的文字
2023-05-01 04:21:35
电子商务搜索LIST页面用户体验设计
2010-08-03 12:57:00
jQuery方法扩展：type, toJSON, evalJSON
2009-02-15 12:42:00
win8下python3.4安装和环境配置图文教程
2022-10-29 03:23:29
mysql数据库删除重复数据只保留一条方法实例
2024-01-28 06:17:49
解决MySql版本问题sql_mode=only_full_group_by
2024-01-14 00:23:17
python实现从字符串中找出字符1的位置以及个数的方法
2023-06-13 20:36:10
分析Mysql大量数据导入遇到的问题以及解决方案
2024-01-23 19:10:08