JS加PHP动态倒计时(定时器)

15 篇文章 0 订阅

1.html

 <div class="box">
    <span>距离活动结束还剩:</span>
    <div class="content">
     <input type="text" id="day_show"><input type="text" id="hour_show"><input type="text" id="minute_show"><input type="text" id="second_show"></div>
</div>

2.css

div.box{width:100%;padding:3px;margin:10px;}
div.box>span{color:#FB78AC;font-style:italic;font-size: 15pt;}
div.content{width:100%;margin:5px;padding:3px;}
input[type='text']{width:35px;height:35px;padding:5px 10px;margin:5px;border:1px solid #ffe5e5;}

3.js

<script type="text/javascript">
 $(function(){ 
    show_time();
}); 

function show_time(){ 
    var time_start = new Date().getTime(); //设定当前时间

    var time_end =  new Date('{$finistime}').getTime(); //设定目标时间
    // 计算时间差 
    var time_distance = time_end - time_start; 
    /*判断活动是否结束*/
    if(time_distance<0){

        int_day=0;
        int_hour=0;
        int_minute=0;
        int_second=0;
    }else{
          // 天
    var int_day = Math.floor(time_distance/86400000) 
    time_distance -= int_day * 86400000; 
    // 时
    var int_hour = Math.floor(time_distance/3600000) 
    time_distance -= int_hour * 3600000; 
    // 分
    var int_minute = Math.floor(time_distance/60000) 
    time_distance -= int_minute * 60000; 
    // 秒 
    var int_second = Math.floor(time_distance/1000) 
    // 时分秒为单数时、前面加零 
    if(int_day < 10){ 
        int_day = "0" + int_day; 
    } 
    if(int_hour < 10){ 
        int_hour = "0" + int_hour; 
    } 
    if(int_minute < 10){ 
        int_minute = "0" + int_minute; 
    } 
    if(int_second < 10){
        int_second = "0" + int_second; 
    } 
    }

    // 显示时间 
    $("#day_show").val(int_day); 
    $("#hour_show").val(int_hour); 
    $("#minute_show").val(int_minute); 
    $("#second_show").val(int_second); 
    // 设置定时器
    setTimeout("show_time()",1000); 
}
</script>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值