在毕设作品考试模块要做个倒计时,当时间到时自动结束答题。于是在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
>
h
1
{
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
;
}