数字逐渐增加的JS代码,刷新也可以不回到初始值

JavaScript014

数字逐渐增加的JS代码,刷新也可以不回到初始值,第1张

小齐炖博士说的思路很对。有一点,在 Chrome 上我们可以使用 HTML5 的 localStorage 或 sessionStorage,和 cookie 的效果是一样的。

下面的代码在刷新的时候保持数字不变,但关闭浏览器后会还原。如果想要一直保存数据,要在 cookie 中设置 expires(Chrome 下使用 localStorage 替换 sessionStorage)。

完整测试代码:

<script type="text/javascript">

window.onload = function() {

// 数字到达 100 后还原为 1

var max = 100,

o = document.getElementById('abc')

var chrome = /chrome/i.test(navigator.userAgent)

// 获取保存的数据

if(chrome) {

data_num = sessionStorage.getItem("num") || ""

}

else {

data_num = document.cookie.replace(

/(?:(?:^|.*\s*)num\s*\=\s*((?:[^](?!))*[^]?).*)|.*/,

"$1")

}

var num_now = parseInt(data_num) || 0

o.innerHTML = num_now + 1

// 每 0.1 秒更新一次数字,并保存数据

setInterval(function() {

num_now = num_now >= max ? 1 : num_now + 1

o.innerHTML = num_now

if(chrome) {

sessionStorage.setItem("num", num_now)

}

else {

document.cookie = "num=" + num_now + "path=/"

}

}, 100)

}

</script> <span id="abc">1</span>

在后台部署定时任务吧,前台计时器不实际:

页面刷新意味着重新计时(计时器被重置)

没有人会在一个页面停留那么长时间(2小时)

用计时器显得有点……,当然了,一定要前台使用JQuery的话,部署一个函数来计算就好:

加载的时候读取数值基数,然后根据当前时间直接计算出最终变动的值,最后显示即可。

最好的做法还是后台处理,前台请求的数据就是变动后的数值(不管是谁,何时请求?结果都是一样的)。

您这个意思是11Pm增加,从凌晨开始到2AM结束递增1是吧?这好办,用setInterval,每小时执行一次AddNum(),在AddNum中获取当前时间判断如果登录凌晨、一点、和两点的时候num+1就是了~