动态生成一个div块并让其移动

来源：互联网发布：淘宝达人怎么收取佣金编辑：程序博客网时间：2024/05/29 05:04

<html>
<head>
<title>增加div块</title>
</head>
<script>
function chardiv(){
var time;
this.creater=function(){
var a=document.createElement("mydiv"); //创建新的div块
a.style.top=Math.random()*200;
a.style.left=Math.random()*200;
a.style.position="absolute";
a.style.width=35; //新div块的宽度
a.style.height=35; //新div块的高度
a.innerHTML="A";
a.style.background="yellow"; //新div块的背景颜色
mydiv.appendChild(a);
this.move=function(){
a.style.top=parseInt(a.style.top)+20; //div块移动
if(parseInt(a.style.top)>370){ //如果移动到大于370px
a.style.top=0; //返回离top=0px
}
}
}
}
function stop(){
clearInterval(time); //清除定时器
}
function gamestart(){
var charA=new chardiv(); //new 一个实例charA
charA.creater();
charA.move();
time=setInterval(function(){
charA.move();
},500);
}
</script>
</head>
<body>
<button onclick="gamestart()">start</button>
<button onclick="stop()">stop</button>
<div id="mydiv" style="position:absolute;width:500;height:400;background:green;top:50"></div>
</body>

</html>

效果示意图：