search

Home  >  Q&A  >  body text

JavaScript怎样定时更新图片?

请教一下:

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

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

reply all(2)I'll reply

  • 阿神

    阿神2017-04-10 15:54:44

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

    reply
    0
  • PHPz

    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 >
    

    reply
    0
  • Cancelreply