JS时间倒计时并到时自动提交表单，做个考试页面，登录后两个小时答题，要在页面显示开始和结束时间
比如10：00进入的，就开始走秒数，到12：00自动提交表单，不能是刷新重新计时那种。谢谢越具体越好...
比如10：00进入的，就开始走秒数，到12：00 自动提交表单，不能是刷新重新计时那种。谢谢
越具体越好 展开
越具体越好 展开
展开全部
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时</title>
<style>
div a{float:left; margin-left:18px;}
.jrotate{
width:80px;
padding:0px;
}
.jrotate > div{
width:36px;
height:36px;
overflow:hidden;
padding:0px;
margin:0px;
margin-right:2px;
float:right;
}
.jrotate div div{
text-align:center;
background:#CCC;
width:36px;
height:36px;
margin:0px;
font-size:36px;
}
.time{
font-size:24px;
}
</style>
<script src="jq-2.1.0.js"></script>
</head>
<body>
<div style="text-align:center;">
<div class="not-start" style="display: none;">
<h1>考试还未开始</h1>
</div>
<div class="show-daojishi" style="display: none;">
<h1>考试结束倒计时</h1>
</div>
<div class="show-end" style="display: none;">
<h1>考试已经结束</h1>
</div>
<h1 time></h1>
<div style="padding-left:36%;">
<a>
<div day>
</div>
<div class="time">
days
</div>
</a>
<a>
<div hour>
</div>
<div class="time">
hours
</div>
</a>
<a>
<div minute>
</div>
<div class="time">
minutes
</div>
</a>
<a>
<div second>
</div>
<div class="time">
seconds
</div>
</a>
<div style="clear:both"></div>
</div>
<form action="#" class="show-daojishi">
<div>考试内容在这</div>
</form>
</div>
<script>
function Jrotate(cfg){
cfg = $.extend({},Jrotate.defaults,cfg);
this.init(cfg);
}
$.fn.Jrotate = function(){
return new Jrotate({renderTo:this[0]});//注意这里返回的不是JQ对象
}
Jrotate.prototype = {
init:function(cfg){
this.cfg = cfg;
if(!cfg.renderTo) return ;
cfg.renderTo = $(cfg.renderTo);
if(cfg.renderTo[0].isJrotate)return;
cfg.renderTo[0].isJrotate = true;
if(cfg.class){
cfg.renderTo.addClass(cfg.class);
}
cfg.showNumber = cfg.showNumber || 0 ;
cfg.showNumber += '';
this.makeDefaultList(Math.max(cfg.startLength,cfg.showNumber.length),cfg.startNumber);
this.setNumber(cfg.showNumber);
},
makeDefaultList:function(len,num){
if(len < 1)return ;
var cfg = this.cfg;
num = num || 0;
num += '';
while(num.length < len){
num = '0' + num;
}
var cfg = this.cfg;
for(var i = 0 ; i < len ; i++){
if( cfg.renderTo.children('div').length>=cfg.maxLength)return;
cfg.renderTo.prepend(this.makeList(num.charAt(i)));
}
},
setNumber:function(num){
if(num == this.lastNumber)return;
if(isNaN(num))return;
var cfg = this.cfg;
num += '';
var length = num.length;
var len = cfg.renderTo.children('div').length;
this.makeDefaultList(Math.max(cfg.startLength,length) - len);
length = Math.max(length,len,cfg.startLength);
while(num.length < length){
num = '0' + num;
}
var _this = this;
cfg.renderTo.children('div').each(function(index){
index = length - index - 1;
var char = num.charAt(index);
if(this.showIndex == char) return;
var obj = {ele:this,index:index};
setTimeout(function(){_this.gotoIndex(obj.ele,char,1)},5);
});
this.lastNumber = num;
},
gotoIndex:function(ele,index,sts){
ele = $(ele);
var h = ele.children('div:first').height();
var cfg = this.cfg;
ele[0].showIndex = index;
ele.animate({
scrollTop : index * h
} , sts && cfg.speed);
},
makeList:function(num){
num = num || 0;
var _this = this;
var ul = $("<div>");
for(var i = 0 ; i < 10 ; i++){
var li = $('<div>');
ul.append(li.html(i));
}
setTimeout(function(){_this.gotoIndex(ul,num,0)},2);
return ul;
}
}
Jrotate.defaults = {
renderTo: '#div',//显示效果的对象
startNumber: 0,
showNumber: 0,
maxLength : 2,
startLength : 2,
class: 'jrotate',//样式
speed: 500 //动画速度
};
var lastTime = '2014-05-24 12:00:00';//截止时间
var startTime = '2014-05-23 16:00:00';//开始时间
var days = $('[day]').Jrotate();
var hours = $('[hour]').Jrotate();
var minutes = $('[minute]').Jrotate();
var seconds = $('[second]').Jrotate();
var times = {
day:days,
hour:hours,
minute:minutes,
second:seconds
}
var showTime;
function setTime(){
var date = new Date().getTime();
if(date < startTimes){
$('.not-start').show();
showTime = startTimes;
}else if(date > lastTimes){
alert('考试结束');
$('form')[0].submit();
}else{
$('.not-start').hide();
$('.show-daojishi').show();
showTime = lastTimes;
}
var _time = {}
var t = (showTime - date) / 1000 | 0;//总的秒数
_time.day = t / (60 * 60 * 24) | 0;//天数
t -= _time.day * 60 * 60 * 24;
_time.hour = t / (60 * 60) | 0;//小时数
t -= _time.hour * 60 * 60;
_time.minute = t / 60 | 0;//分钟
_time.second = t - _time.minute * 60;//秒数
$('[time]').html(_time.day + '天' + _time.hour + '小时' + _time.minute + '分' + _time.second + '秒');
for(var i in times){
times[i].setNumber(_time[i]);
}
}
var date = new Date().getTime();
var startTimes =new Date(startTime).getTime();
var lastTimes = new Date(lastTime).getTime();
if(date > lastTimes){
$('.show-end').show().nextAll().remove();
}else{
setTime();
setInterval(setTime,500);
}
</script>
</body>
</html>
请修改具体的开始时间 和截止时间来展示不同效果 包括未开始 正在进行和已经完毕的处理
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
