jquery实现网页倒计时

在毕设作品考试模块要做个倒计时，当时间到时自动结束答题。于是在jQuery插件社区找到一个简洁明了的倒计时。先上效果图。

　　　　

感谢作者hacker(这是黑客的意思么)，贴上地址：http://www.jq22.com/jquery-info327

jquery插件库链接：http://www.jq22.com/

在贴上代码：

引入文件

<script type="text/javascript" src="/public/layui/layui.js"></script>       //前端框架layui插件，根据你自己的路径设置
<script type="text/javascript" src="/public/layui/jquery-3.1.1.js"></script>    //jquery插件，你的路径地址

JavaScript代码：

<script type="text/javascript">
           var intDiff = parseInt(5400);//倒计时总秒数量
           function timer(intDiff){
           window.setInterval(function(){
           var day=0,
           hour=0,
           minute=0,
           second=0;//时间默认值
           if(intDiff > 0){
          day = Math.floor(intDiff / (60 * 60 * 24));
          hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
          minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
          second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
     }
         if (minute <= 9) minute = '0' + minute;
         if (second <= 9) second = '0' + second;
         $('#day_show').html(day+"天");
         $('#hour_show').html('<s id="h"></s>'+hour+'时');
         $('#minute_show').html('<s></s>'+minute+'分');
         $('#second_show').html('<s></s>'+second+'秒');
         intDiff--;

if(intDiff==-1){                 //这里为什么是-1，而不是0。是因为alert（）弹框需要一秒时间，如果==0的话，倒计时到01时就弹框，==-1时倒计时为00时弹框
         layer.alert('时间到了！考试结束！',{        //layui中layer.alert()弹框可设置参数，个人比较喜欢Layui前端框架
         title:'温馨提示',
         icon:6,                                             //layui 6号表情
         btn:'离开',
        closeBtn: 0                                        //没有关闭按钮X
        },function(){
           window.location.href="{:U('Exam/cuotiexam')}";           //表示回调函数，你要跳转的页面，这里是thinkphp特有的写法。可以自己写herf方法地址
       }
    );

}
 }, 1000);

}
    $(function(){
   timer(intDiff);
});

</script>

HTML代码：

<h1></h1>

<div class="time-item">

    <span id="day_show">0天</span>

    <strong id="hour_show">0时</strong>

    <strong id="minute_show">0分</strong>

    <strong id="second_show">0秒</strong>

</div>

 

CSS样式代码：

h1 {

    font-family:"微软雅黑";

    font-size:40px;

    margin:20px 0;

    border-bottom:solid 1px #ccc;

    padding-bottom:20px;

    letter-spacing:2px;

}

.time-item strong {

    background:#C71C60;

    color:#fff;

    line-height:49px;

    font-size:36px;

    font-family:Arial;

    padding:0 10px;

    margin-right:10px;

    border-radius:5px;

    box-shadow:1px 1px 3px rgba(0,0,0,0.2);

}

#day_show {

    float:left;

    line-height:49px;

    color:#c71c60;

    font-size:32px;

    margin:0 10px;

    font-family:Arial,Helvetica,sans-serif;

}

.item-title .unit {

    background:none;

    line-height:49px;

    font-size:24px;

    padding:0 10px;

    float:left;

}

记录下来便于查找应用

更多倒计时插件或其他插件，访问jquery插件库