刷新后血变多了
来源：2-3 存储实现打怪小案例
慕慕9315793
2020-04-23 20:53:18
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
img{
position: absolute;
left: 50%;
top:50%;
width: 832px;
height: 468px;
margin-top: -234px;
margin-left: -416px;
}
.whole{
height: 10px;
width: 400px;
position: absolute;
left: 50%;
margin-left: -200px;
top: 40px;
border-radius: 10px;
border:2px solid #000;
}
.blood{
height: 10px;
width: 400px;
background-color: #f00;
border-radius: 10px;
}
body{
position: relative;
width: 100%;
height: 668px;
}
</style>
</head>
<body>
<div class="whole">
<div class="blood"></div>
</div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587653353888&di=d1e8755108a050288b0e66d60e2a4a2f&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181102%2F3629c6e752eb47b49f77b461e7b28f83.jpeg">
<script type="text/javascript">
var m = 0, timer = null,max = 400,blood = document.querySelector('.blood');
if(localStorage.max){
blood.style.width = localStorage.max+ 'px';
}
console.log(localStorage.max);
window.onclick = function(){
clearInterval(timer);
var timer = setInterval(function(){
m++;
if(m==5){
clearInterval(timer);
m=0;
document.body.style.left = 0 + 'px';
document.body.style.top = 0+ 'px';
return;
}else{
document.body.style.left = (Math.random()*-20+10) + 'px';
document.body.style.top = (Math.random()*-20+10) + 'px';
var x = Math.random()*10+10;
max =max - x;
localStorage.setItem('max',max)
console.log(max);
//blood.style.width = max+ 'px';
if(max<0){
max = 0;
blood.style.width = 0+ 'px';
localStorage.clear();
}else{
blood.style.width = max+ 'px';
}
}
},30);
}
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2020-04-24
同学你好，将缓存中获取的值赋给max变量就可以了。如下：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 3
回答 1