Maison > Questions et réponses > le corps du texte
请教一下:
最近做的一个练手项目,要用到倒计时,如图:
现在时间我是用每天手动更改background-position
定位来显示的,
想请教一下怎么实现每天自动更换图片位置实现倒计时?
谢谢!
相关代码:
<p id="day">
<span id="one" style='background-position: 0px 0px;'></span>
<span id="two" style='background-position: 0px -295px;'></span>
</p>
<script language="javascript" type="text/javascript">
var interval = 1000;
function ShowCountDown(year,month,day,pname) {
var now = new Date();
var endDate = new Date(year, month-1, day);
var leftTime=endDate.getTime()-now.getTime();
var leftsecond = parseInt(leftTime/1000);
var day1=Math.ceil(leftsecond/(60*60*24));
// console.log(day1)
var one = parseInt(day1/10);
// console.log(one)
var two = day1%10;
//$('#one').css('background-position','0px -'+one*49+'px')
// $('#two').css('background-position','0px -'+two*49+'px')
}
window.setInterval(function(){ShowCountDown(2015,9,30,'day');}, interval);
$(function(){
ShowCountDown(2015,9,30,'day');
})
</script>
PHPz2017-04-10 15:54:44
<p id="day">
<span id="one" style='background-position: 0px 0px;'></span>
<span id="two" style='background-position: 0px -295px;'></span>
</p>
< script language = "javascript" type = "text/javascript" >
$(function () {
var interval = 1000;//时间精度没有必要那么短,毕竟天级别的倒计时
var prevDays = 0;//记录上一次更新的天数,如果相邻2次计算的天信息没有变化,就不变化数字图片
function ShowCountDown(year, month, day, pname) {
var now = new Date();
var one, two;
var endDate = new Date(year, month - 1, day, 23, 59, 59);
var leftDays = parseInt((endDate.getTime()-now.getTime())/(24 * 3600 * 1000), 10);
if (leftDays > prevDays) {
prevDays = leftDays;
one = parseInt(leftDays / 10);
// console.log(one)
two = day1 % 10;
//$('#one').css('background-position','0px -'+one*49+'px')
//$('#two').css('background-position','0px -'+two*49+'px')
}
}
setInterval(function () {
ShowCountDown(2015, 9, 30, 'day');
}, interval);
})
</script >