本文目錄一覽:
數字逐漸增加的JS代碼,刷新也可以不回到初始值
小齊燉博士說的思路很對。有一點,在 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
求一段JS代碼,可以隨着天數自動增加數值
div id=”bbc”/div
script
!function(e,t){var n=function(){return n.get.apply(n,arguments)},r=n.utils={isArray:Array.isArray||function(e){return Object.prototype.toString.call(e)===”[object Array]”},isPlainObject:function(e){return!!eObject.prototype.toString.call(e)===”[object Object]”},toArray:function(e){return Array.prototype.slice.call(e)},getKeys:Object.keys||function(e){var t=[],n=””;for(n in e)e.hasOwnProperty(n)t.push(n);return t},escape:function(e){return String(e).replace(/[,;”\\=\s%]/g,function(e){return encodeURIComponent(e)})},retrieve:function(e,t){return e==null?t:e}};n.defaults={},n.expiresMultiplier=86400,n.set=function(n,i,s){if(r.isPlainObject(n))for(var o in n)n.hasOwnProperty(o)this.set(o,n[o],i);else{s=r.isPlainObject(s)?s:{expires:s};var u=s.expires!==t?s.expires:this.defaults.expires||””,a=typeof u;a===”string”u!==””?u=new Date(u):a===”number”(u=new Date(+(new Date)+1e3*this.expiresMultiplier*u)),u!==”””toGMTString”in u(u=”;expires=”+u.toGMTString());var f=s.path||this.defaults.path;f=f?”;path=”+f:””;var l=s.domain||this.defaults.domain;l=l?”;domain=”+l:””;var c=s.secure||this.defaults.secure?”;secure”:””;e.cookie=r.escape(n)+”=”+r.escape(i)+u+f+l+c}return this},n.remove=function(e){e=r.isArray(e)?e:r.toArray(arguments);for(var t=0,n=e.length;tn;t++)this.set(e[t],””,-1);return this},n.empty=function(){return this.remove(r.getKeys(this.all()))},n.get=function(e,n){n=n||t;var i=this.all();if(r.isArray(e)){var s={};for(var o=0,u=e.length;ou;o++){var a=e[o];s[a]=r.retrieve(i[a],n)}return s}return r.retrieve(i[e],n)},n.all=function(){if(e.cookie===””)return{};var t=e.cookie.split(“; “),n={};for(var r=0,i=t.length;ri;r++){var s=t[r].split(“=”);n[decodeURIComponent(s[0])]=decodeURIComponent(s[1])}return n},n.enabled=function(){if(navigator.cookieEnabled)return!0;var e=n.set(“_”,”_”).get(“_”)===”_”;return n.remove(“_”),e},typeof define==”function”define.amd?define(function(){return n}):typeof exports!=”undefined”?exports.cookie=n:window.cookie=n}(document);
if(!cookie.get(“mynum”)){
cookie.set(“mynum”,100,{expires: 7});
cookie.set(“lastday”,new Date(),{expires: 7});
}else{
if(new Date(cookie.get(“lastday”)).getDay() !== new Date().getDay()){
cookie.set(“mynum”,parseInt(cookie.get(“mynum”))+3,{expires: 7});
cookie.set(“lastday”,new Date(),{expires: 7});
}
}
document.getElementById(‘bbc’).innerHTML=cookie.get(“mynum”);
/script
求一段定時自動在原來數字的基礎上增加數字的js代碼
根據下面的哥們改革的:
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那裡可以隨便改。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/236940.html