功能描述：1.页面开始之前开始、暂停、删除按钮均不可用，点完新增按钮，开始、暂停、删除按钮可用
2. 点击新增，随机增加雪花数量和位置
点击开始，雪花开始飘落
点击暂停，雪花静止
点击删除，删除一些雪花
源代码如下：
<!DOCTYPE hetml>
<html>
<head>
<title>雪花飘啊飘</title>
<style type="text/css">
body{
background-color:black;
}
input{
width:60px;
height:40px;
font: normal 14px '微软雅黑';
font-weight:bold;
background-color:pink;
}
</style>
</head>
<body>
<input type="button" value="新增" onclick="creatMany()"/>
<input type="button" value="开始" id="start" onclick="start()" />
<input type="button" value="暂停" id="stop" onclick="stop()"/>
<input type="button" value="删除" id="remove"onclick="remove()"/>
</body>
<script>
var timer;
document.getElementById("start").disabled = "disabled";
document.getElementById("stop").disabled = "disabled";
document.getElementById("remove").disabled = "disabled";
function creatOne(){
var x = Math.random()*window.innerWidth;
var y = Math.random()*window.innerHeight;
var div = document.createElement("div");
div.style.position = "fixed";
div.style.left = x+"px";
div.style.top = y+"px";
div.innerHTML = "<img src='s.jpg' style='width:43px'/>";
document.body.appendChild(div);
}
function creatMany() {
for (var i = 1; i <= 20; i++) {
creatOne();
}
document.getElementById("start").disabled ="";
document.getElementById("stop").disabled ="";
document.getElementById("remove").disabled ="";
}
function start(){
var snow = document.getElementsByTagName("div");
timer = setInterval(function(){
for (var i = 0;i<snow.length;i++){
var randomY = Math.random()*3;
snow[i].style.top = snow[i].offsetTop + randomY + "px";
// if(snow[i].offsetTop%200==0){
// creatOne();
// }
if(snow[i].offsetTop>window.innerHeight){
snow[i].remove();
creatOne();
}
}
},3)
document.getElementById("start").disabled = "disabled";
document.getElementById("stop").disabled = "";
}
function stop(){
clearInterval(timer);
document.getElementById("stop").disabled = "disabled";
document.getElementById("start").disabled = "";
}
function remove(){
var snow = document.getElementsByTagName("div");
for(var i=0;i<snow.length;i++){
snow[i].remove();
}
}
</script>
</html>
网友评论