Question

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

<span id="abc">1</span>
<script type="text/javascript">
var o=document.getElementById('abc');
window.setInterval('o.innerHTML=parseInt(o.innerHTML)+1;',1000);
</script>
但是每次一刷新，又从1从新开始了。。希望及时刷新，数字也不要回到初始值，当增加到一定的值之后，当增加到一定的值之后，再重新循环。

举例子：初始值是1，没隔5秒增加1，当增加到1000的时候，再从回到1重新开始增加。想知道如何做改善，或者正确的代码是什么？谢谢回答！！

Answer 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>

追问

谢谢你哦，你的代码可以的哦，只是数字变化太快，我希望5秒变一次，改了几个地方都不行，可能是还哪里出了点小问题，你能把5秒变一次的代码给我吗。

追答

代码最后那个 100 就是时间

}
}, 100);
};

改为

}
}, 5000);
};

这个时间是毫秒，1000 毫秒等于 1 秒，5000 毫秒等于 5 秒。

Answer 2

要是刷新也能补回到初始值的话，只有写入cookie，网页开始载入的时候读取cookie，然后继续递增，只有这样，温馨提示，chrome浏览器不支持本地html文件写入cookie，别的浏览器均可，我只是提个思路，至于cookie什么的，楼主百度一下会有好多的，望采纳

Answer 3

这个不是前端代码就可以实现的, 需要配合后台逻辑并存储到数据库, 每次增1都需要定时任务将数据存放到数据库, 再刷新的时候才会保留之前的时间

Answer 4

请问楼主我不想初始值是1，该怎么弄啊