一刷新，血就回满，但点击的话，存住的血好使，刷新存不住血，求助
来源：2-3 存储实现打怪小案例
崔浩晟
2020-03-03 16:30:08
<!DOCTYPE html>
<html>
<head>
<title>打boss</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
.master{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75.5px;
}
.line{
width: 400px;
height: 15px;
margin: 20px 0 0 0;
border: 2px solid black;
position: absolute;
left: 50%;
margin-left: -200px;
}
.blood{
background-color: red;
height: 100%;
transition: .3s;
}
body{
position: relative;
height: 100%;
overflow: hidden;
}
html{height: 100%;}
</style>
</head>
<body>
<div class="line">
<div class="blood"></div>
</div>
<img class="master" src="../images/boss.jpeg">
</body>
<script>
var num = 0;timer = null;max = 400;
var blood = document.querySelector(".blood")
if(localStorage['blood']){
blood.style.width = localStorage['blood']
max = localStorage['blood']
}
onclick = function(){
clearInterval(timer)
timer = setInterval(function(){
max = max - Math.random() *5
localStorage['blood'] = max
blood.style.width = localStorage['blood'] + 'px'
if(max <= -2){
return;
}else{
num++
if(num == 5){
clearInterval(timer);
num = 0;
document.body.style.left = 0;
document.body.style.top = 0;
return;
}
document.body.style.left = Math.random() * -20 + 10 + 'px'
document.body.style.top = Math.random() * -20 + 10 + 'px'
}
},30)
}
</script>
</html>
1回答
-
同学你好，问题如下：缺少单位：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题