老师，请回答
来源：2-3 存储实现打怪小案例
慕设计6552984
2020-04-26 10:57:37
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打怪游戏</title>
<style>
*{
padding:0;
margin:0;
list-style: none;
}
body{
position:releative;
}
.guai{
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -100px;
}
.line{
width:400px;
height:20px;
border:4px solid black;
position:absolute;
left:50%;
top:20px;
margin:0 0 0 -204px;
}
.xie{
width:400px;
height:100%;
background:red;
transition: .3s;
}
</style>
</head>
<body>
<div class="line">
<div class="xie"></div>
</div>
<image src="1.jpeg" class="guai"></image>
<script>
var num = 0,timer = null,max = 400,
xieNode = document.querySelector('.xie');
if(localStorage.x){
max = localStorage.x;
xieNode.style.width = max + 'px';
};
onclick = function(){
var r = Math.random() * 5 + 5;
max -= r;
localStorage.setItem('x',max);
console.log(localStorage)
xieNode.style.width = max + 'px';
clearInterval(timer);
timer = setInterval(function(){
num++;
if(num == 10){
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>
</body>
</html>
老师，页面为什么不颤抖
1回答
-
好帮手慕夭夭
2020-04-26
同学你好，是因为body的定位单词拼错，如下修改：
另外，页面需要设置高度100%，不然页面没有高度，里面的子元素在设置定位时，也没有办法在页面中间显示。如下设置：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
