javascript 创建DIV块

 
 
<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值