JavaScript怎样定时更新图片?
巴扎黑
巴扎黑 2017-04-10 15:52:44
0
2
828

请教一下:

最近做的一个练手项目,要用到倒计时,如图:

现在时间我是用每天手动更改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>
巴扎黑
巴扎黑

全部回覆(2)
阿神

时间最好是从服务器端取,因为客户端的时间是不可信的!

PHPzhong
<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 >
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板