<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image: url("../image/snow-night.jpg");
background-size: cover;/*类似于图片拉伸*/
}
img{
width: 30px;
position: fixed;/* 设置img的定位为固定定位 ，位置会固定在屏幕上*/
top:0px;
}
</style>
</head>
<body>
<button onclick="add();">新增</button>
<button onclick="timer = setInterval('start()',16.7);">开始</button>
<button onclick="pause()">暂停</button>
<button onclick="del()">删除</button>
<script>
var timer ;
function add() {
var newimg = document.createElement("img");
newimg.src = "../image/snow.png";
//放在页面的body标签下
// 利用js来改变HTML标签的css
// HTML标签变量名.style.css属性=新值
newimg.style.top = "0px";
newimg.style.left = Math.random()*1440+"px";
document.body.appendChild(newimg);
}
function start() {
// 获取页面上的所有雪花（img）
var imgs = document.getElementsByTagName("img");
//让雪花下落
// 去修改top cs属性
for(var i = 0;i<imgs.length;i++){
var old = imgs[i].style.top;
//alert(old);// 返回的是带px的一个数字
// 获取数字
old = parseInt(old.substr(0,old.length-2));
if(old>900){
// 雪花飘回顶部继续下落
imgs[i].style.top = "0px";
}else {
// 雪花正常下落
imgs[i].style.top = old+5+"px";
}
}
// 随机新增雪花
// 不断新增雪花
// 页面要有个雪话数量限制
if(imgs.length <200){
add();
}
}
function pause() {
clearInterval(timer);
}
function del() {
var imgs = document.getElementsByTagName("img");
/* for(var i=0;i<imgs.length;i++){
imgs[i].remove();
}*/
//问题：每次只删除了一部分？？？
// 删除一个img标签，那么 imgs.length就会减少，而for i 不断增加， length不断减少。
// 假设长度为10 删除一个 i=1. 长度为9 继续删除 长度为8 i=2
/*
* i 长度
* 0 9
* 1 8
* 2 7
* 4 5
* 导致剩下的img没有被删除
* */
var length = imgs.length;// 保存只是一个数字，而不是imgs.length本身
for(var i=0;i<length;i++){
imgs[0].remove();
}
//调用暂停函数,停止定时器，防止雪花继续增加
pause();
}
/*
通过标签名获取所有的同类标签，那么返回的 是一个数组，就要按照数组的使用方式去获取或者设置HTML标签的内容
var buttons = document.getElementsByTagName("button");
alert(buttons.length);
// 获取每一个button
for(var i=0;i<buttons.length;i++){
buttons[i].innerHTML =i;
alert(buttons[i].innerHTML);
}*/
</script>
</body>
</html>
03-22
2831
2831
01-14
01-13
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
