jquery实现网页倒计时

在毕设作品考试模块要做个倒计时,当时间到时自动结束答题。于是在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插件库
 
上一篇:git commit 之后 push 之前,想删除 个别的commit 文件


下一篇:python excel操作总结