开发工具与关键技术:Visual Studio 2015 与 js
作者:范子超 撰写时间:2019年1月20日
我这里是调用了localStorage属性来将倒计时数储存进浏览器,在根据其他方法来实现防刷新的倒计时效果。
写的比较仓促,详细解释代码都有注释。
首先我们来看一下HTML代码的内容
<div class="modal-body" id="Part" style="display:none;">
<div class="modal-header" style="font-size:20px;">
<input class="hidden" id="Order1" />@*这个input用来装标识倒计时的ID*@
<div class="col-md-12 col-sm-12" id="Numbers">
<label class="col-md-2 col-sm-2 text-center">订单号:</label>
<div class="col-md-1 col-sm-1"></div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-sm-12" style="font-size:17px;" id="Par"></div>
<div class="col-md-12 col-sm-12 pull-right" style="font-size:17px;margin-top:30px;">
<div class="col-md-12 col-sm-12 text-center">
<button id="Begin" class="btn btn-primary" type="button" "Make()">确认制作</button><br /><br />@*点击开始倒计时的btn*@
<span class="hidden" id="EndTime"></span>@*这个用来显示倒计时*@
</div>
</div>
</div>
</div>
</div>
var BeginTime = setInterval(function () { Timer(ID, BeginTime) }, 1000)
上面加粗的方法所传的两个参数分别是所要生成倒计时的ID,和计时器对象。
因为我是根据ID来查询倒计时,所以要用传个ID来关联倒计时。
下面是点击开始倒计时的方法。
function Make() {
var BeginTime = setInterval(function () { Timer(ID, BeginTime) }, 1000);//setInterval方法调用自减方法实现倒计时
if (BeginTime) {//判断倒计时是否存在,存在就改变HTML的内容
$("#Begin").html("制作中");
$("#Begin").attr("disabled", true);
$("#EndTime").removeClass("hidden");
}
}
下面是判断有无倒计时,有就把剩下的时间赋值给Time继续进行倒计,没有就给它添加一个30秒的倒计时,并且计算完后改变HTML来实现实时倒计的效果,并且倒计时结束清除setInterval。
function Timer(ID, BeginTime) { //ID是要生成倒计时的那条数据的ID,BeginTime是计时器对象。
var Time = 0, minute = 0, second = 0; //时间默认值
if (storage.getItem(ID)) { //判断有无倒计时,有就把倒计时剩余的时间赋值给Time,没有就赋值30秒倒计时
Time = storage.getItem(ID);
} else {
Time = 30;
}
if (Time > 0) {//判断是否倒计时结束,未结束就进行计算并自减在改变HTML来实现倒计时效果
minute = Math.floor(Time / 60);
second = Math.floor(Time) - (minute * 60);
minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second;
Time--;
storage.setItem(ID, Time);//把自减后的时间赋值Time
var dd = $("#Order1").val();
if (dd == ID) {
$("#EndTime").html('还剩' + minute + '分' + second + '秒制作完成!');
}
} else {//倒计时结束清除倒计时并改变数据状态
layer.close(Part);//关闭layer窗体
storage.removeItem(ID);//移除浏览器中用来存储倒计时对象。
clearInterval(BeginTime);//清除倒计时
$.post("Maked?ID=" + ID, function (data) {//改变状态
if (data = "制作完成!") {
layer.msg(data);
tbOrder.refreshPage();
} else {
layer.msg("数据异常!");
}
});
}
};
下面这段代码就是实现防刷新的,注意他变量的范围,不要写错了。
主要思路:因为刷新页面会把setInterval方法刷掉,而setInterval没了倒计时就失效暂停了,所以要把浏览器中存在的倒计时查找出来再次调用setInterval方法来进行倒计时。
$(function () {//页面加载事件
var ID;
for (i = 0; i < storage.length; i++) {循环倒计时
if (storage.key(i)) {
ID = storage.key(i);//把倒计时的Key值也就是进行倒计时的那条数据的ID赋值给变量
ks(ID);//调用倒计时方法
}
}
});
function ks(ID) {
if (ID == "" || ID == undefined) { } else {把有倒计时计时器对象调用 setInterval 开始倒计
var BeginTime = setInterval(function () { Timer(ID, BeginTime) }, 1000);
}
}
总结:在写这个功能的时候,因为我这里倒计时的显示窗体,还有调用倒计时的方法都是公共的,所以在这个过程中遇到了许多bug,有时候我真的有种想放弃的想法,但是我还是努力坚持过来了,虽然这个功能还有些许瑕疵,但我为我能坚持到这个程度感到高兴。我会继续努力的。