<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>气泡</title>
<style>
#add{
text-align: center;
margin-left: 48%;
margin-bottom: 20px;
}
#box{
width: 480px;
height: 480px;
background: rgb(247, 243, 243);
border: 10px solid rgb(128, 58, 58);
position: relative;
margin: 0 auto;
text-align: center;
line-height: 480px;
color: royalblue;
}
.bool {
border-radius: 50%;
box-shadow: 2px 3px 5px #999999;
position: absolute;
}
</style>
</head>
<body>
<button id="add">添加气泡</button>
<div id="box">带你看吐泡泡</div>
<script>
function get_rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var colorArr=[
'#CC0000',
'#FF0088',
'#FE3232',
'#ccdd22',
'#223355',
'#22aa66',
'#cc6699',
'#123456',
'#987654',
'#FEDCBA',
'#AB39EE',
'#985421',
'#ffffff',
'#000000'
];
var boxs=document.getElementById('box');
var adds=document.getElementById('add');
adds.onclick=function(){
var obj=document.createElement('div');
var wh=get_rand(10,50);
obj.style.width=wh+'px';
obj.style.height=wh+'px';
obj.style.background=colorArr[get_rand(0,9)];
var top=boxs.clientHeight/2-obj.offsetHeight/2;
var left=boxs.clientWidth/2-obj.offsetWidth/2;
obj.style.top=top+'px';
obj.style.left=left+'px';
obj.className='bool';
boxs.appendChild(obj);
var x = get_rand(1, 10);
var y = get_rand(1, 10);
setInterval(function(){
top+=x;
left+=y;
if(top>boxs.clientHeight-obj.offsetHeight || top < 0){
x=-x;
}
if(left>boxs.clientWidth-obj.offsetWidth || left < 0){
y=-y;
}
obj.style.top = top + 'px';
obj.style.left = left + 'px';
},30);
}
</script>
</body>
</html>
相关推荐
© 2020 asciim码
人生就是一场修行