JS实现倒计时图文效果
更新时间：2018年11月17日 10:14:33 作者：wxk_前端开发
这篇文章主要为大家详细介绍了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>
见下图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了javascript实现用户管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了小程序如何写动态标签的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要为大家介绍了使用canvas实现音乐频谱示例及技术分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
在前文中我们提到可以使用时间分片的方式来对长列表进行渲染，但这种方式更适用于列表项的DOM结构十分简单的情况，所以本文来讲讲如何使用虚拟列表的方式，来同时加载大量数据吧2023-05-05
这篇文章主要为大家详细介绍了微信小程序实现拉链式的滑动验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
语音识别极速版能将60秒以内的完整音频文件识别为文字，本文主要介绍采用百度语音识别,实现小程序的听写功能，感兴趣的同学可以来了解一下2020-03-03
下面小编就为大家带来一篇使用JavaScript实现弹出层效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了JavaScript随机生成信用卡卡号的方法,涉及javascript操作随机随机数生成信用卡卡号的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS实现的N多简单无缝滚动代码,包含了文字及图文等多种滚动效果,涉及JavaScript递归调用及定时函数触发实现页面元素动态变换的相关技巧,需要的朋友可以参考下2015-11-11
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的API或工具包，接下来跟着小编学习js中判断json的方法吧2015-08-08
最新评论