需求:静态页面天数倒数功能。
1.模拟报名天数倒数,数值到特定值就不在继续倒数。
2.每个用户在用同一浏览器打开页面时,倒数不能从头开始,要从上次关闭浏览器时的数字开始倒数
分析:
1.静态页面,没有数据库支撑,只能选择js操控
2.同一用户每次打开页面倒数不能从头开始,需要使用Web Storage
<div class="dwtime">
</div>
function dnum(){
var num=localStorage.getItem('num');//获取指定key本地存储的值
//console.log(num)
if(!num){
num=106;//倒计时开始的数值
}
var de=Math.round(Math.random())+1;//随机减少1或2个数值
num-=de;
if(num<=5){
num=5;//数值倒数到5时不再减少
}
numtxt='';
var numarr=[];
numarr=num.toString().split('');
numtxt=numarr.join(' ');//空格连接
if(num>=10 && num<100){
numtxt='0 '+numtxt//数值为2位数时前面加一个0
}
else if(num<10){
numtxt='0 0 '+numtxt;//数值为1位数时前面加2和0
}
localStorage.setItem('num',num);//将value存储到key字段
$('.dwtime').text(numtxt);
}
setInterval(dnum,5000);//5s执行减少一次数值