js创建div

最新推荐文章于 2023-04-20 21:31:26 发布

小菜鸟程序员

最新推荐文章于 2023-04-20 21:31:26 发布

阅读量514

点赞数

本文链接：https://blog.csdn.net/u011096003/article/details/9174513

版权

<html>
<head>

<title>div移动</title>

<script>
var mydiv,timer,id,charindiv;
var arr=new Array("A","B","C","D","E");
var backcolor=new Array('red','blue','green','yellow','#DDA0DD','#00CED1','#E9967A','#CD5C5C','#F0E68C','#90EE90','#ADFF2F','#FFDEAD','#6B8E23','#8B4513','#D8BFD8');
function start(){
//for(i=0;i<5;i++){
chardiv();
//}
timer=setInterval('move()',300+100);
}
function stop(){

clearInterval(timer);
mydiv.style.display='none';
}
function chardiv(){
id=parseInt(Math.random()*arr.length);
charindiv=arr[id];
colorid=parseInt(Math.random()*backcolor.length);
//alert(colorid);
color=backcolor[colorid];
l=parseInt(Math.random()*500);
mydiv=document.createElement("div");
mydiv.style.position="absolute";
mydiv.innerHTML=charindiv;
mydiv.style.width="30";
mydiv.style.height="30";
mydiv.style.top="40";
mydiv.style.left=l;
//mydiv.style.text.align="center";
mydiv.style.background=color;
document.body.appendChild(mydiv);

//禁用按钮
//but.disabled="disabled";
}
function move(){

mydiv.style.top=parseInt(mydiv.style.top)+10;
if(parseInt(mydiv.style.top)>=500){
mydiv.style.top=50;
}

}
</script>
</head>
<body>

<button οnclick="start()" style="text-align:center;" id="but">开始</button>
<button οnclick="stop()">停止</button>
</body>

</html>

小菜鸟程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js创建div

div移动 var mydiv,timer,id,charindiv; var arr=new Array("A","B","C","D","E");var backcolor=new Array('red','blue','green','yellow','#DDA0DD','#00CED1','#E9967A','#CD5C5C','#F0E68C','#90EE90'
复制链接

扫一扫