<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雪花飘飘</title>
<style>
/*按钮的div*/
.buttondiv{
border: 0px red solid;
width: 60px;
height: 35px;
float: left;
margin-left: 5px;
}
/*按钮的文本*/
.buttondiv input{
width: 60px;
height: 35px;
font-size: 20px;
float: left;
}
</style>
<script>
//产生雪花
function creatSnow(num){
for(var i = 0; i < num; i++){
var value = document.createElement("div");
value.style.border = "0px red solid";
value.style.width = "30px";
value.style.height = "30px";
value.style.float = "left";
value.style.position = "fixed";
value.style.marginLeft = Math.random() * window.innerWidth + "px";
value.style.marginTop = Math.random() * window.innerHeight - 200 + "px";
value.innerHTML = "<img src = '../image/white-snow.png' width='30px' height='30px'/>";
document.body.appendChild(value);
}
}
//雪花运动
function moveSnow(){
var oDiv = document.getElementsByTagName("div");
var len = oDiv.length;
for(var i = 0; i < len; i++){
if(oDiv[i].offsetTop > window.innerHeight - 100){
oDiv[i].remove();
}else {
oDiv[i].style.marginTop = oDiv[i].offsetTop + Math.random() - 30 + "px";
}
}
if(oDiv.length < 50){
creatSnow(10);
}
}
var timer = null;
//定时器-开始
function startTimer(){
if(timer == null){
timer = setInterval("moveSnow()", 10);
}
}
//定时器-停止
function stopTimer(){
if(timer != null){
clearInterval(timer);
}
timer = null;
}
//清除雪花
function clearSnow(){
stopTimer();
var oDiv = document.getElementsByTagName("div");
var len = oDiv.length;
for(var i = 0; i < len; i++){
oDiv[0].remove();
}
}
</script>
</head>
<body background="../image/snow-night.jpg" style="width: 1000px; height: 800px;">
<input type="button" value="增加" onclick="creatSnow(50)"/>
<input type="button" value="开始" onclick="startTimer()"/>
<input type="button" value="暂停" onclick="stopTimer()"/>
<input type="button" value="清除" onclick="clearSnow()"/>
</body>
</html>
