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

JavaScript06

数字逐渐增加的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>

根据下面的哥们改革的:

<body>

<div id="t" >10</div>

<script>

var i=10

window.setInterval(function() {

(i++)

document.getElementById('t').innerHTML=10+(i-10)*2

}, 3000)

</script>

<p>每3秒自动增加数字2</p>

</body>

效果是从10的显示开始每3秒自动增加2。

3000和*2那里可以随便改。

 //获取1970-01-01日至今已过了多少天 17670

var GetTime=function(){return Math.round(new Date().getTime()/1000/60/60/24)}

var A = GetTime()  //记录今天是1970到现在过去了多少天

然后,下次的时间减去A就知道过了多少天,你的那个数字就加上这个天就OK了