html部分
<button id = "addBlue">加蓝buff</button>
<button id = "addRed">加红buff</button>
<div id="blue"></div>
<div id="red"></div>
css样式
#blue{
color:blue;
}
#red{
color:red;
}
js段
1.采用本地存储localStorage 储存buff值及获取buff的时间
2.每秒刷新,使当前状态得到更新
var addBlue = document.querySelector("#addBlue"),
addRed = document.querySelector("#addRed"),
blue = document.querySelector("#blue"),
red = document.querySelector("#red"),
nowTime = new Date().getTime()/1000;
localStorage.removeItem(localStorage.blue);
if(localStorage.blue){
blue.innerHTML = localStorage.blue;
}else{
blue.innerHTML = "";
}
if(localStorage.red){
red.innerHTML = localStorage.red;
}else{
red.innerHTML = "";
}
if(localStorage.blueTime){
if(nowTime-localStorage.blueTime > 5){
localStorage.removeItem("blue");
localStorage.removeItem("blueTime");
//注意键值要加引号
}
}
if(localStorage.redTime){
if(nowTime-localStorage.redTime > 5){
localStorage.removeItem("red");
localStorage.removeItem("redTime");
//注意键值要加引号
}
}
addBlue.onclick = function(){
localStorage.setItem("blue","获得蓝buff");
localStorage.setItem("blueTime",new Date().getTime()/1000);
}
addRed.onclick = function(){
localStorage.setItem("red","获得红buff");
localStorage.setItem("redTime",new Date().getTime()/1000);
}
//实现状态刷新
setTimeout(function(){
location.reload();
},1000);
也可在meta部分写入
<meta http-equiv="refresh" content="1">
实现每秒刷新