87,902
社区成员
发帖
与我相关
我的任务
分享怎样用JavaScript在网页中下雪
我想用JavaScript代码控制div块来实现雪花的效果，但是总是提示对象没有该属性或方法。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下雪的冬天</title>
<style type="text/css">
<!--
body
{
background-image:url(images/bg.jpg);
}
p
{
font-size:36px;
color:#FFFFFF;
}
div
{
position:absolute;
visibility:visible;
font-size:40px;
color:#FFFFFF;
}
-->
</style>
</head>
<body>
<p>下雪的冬天</p>
<script type="text/javascript">
<!--
var number = 25; //雪花的数量
var x = new Array(); //雪花的水平位置
var y = new Array(); //雪花的竖直位置
var dx = new Array(); //雪花位置的水平该变量
var dy = new Array(); //雪花位置的竖直改变量
var width = document.body.clientWidth;
var height = document.body.clientHeight;
//创建每一片雪花
for(var i = 0;i < number;i++)
{
document.write('<div id="snow+i">*</div>');
x[i] = Math.round(Math.random() * width);
y[i] = Math.round(Math.random() * height + 100);
document.getElementsById("snowi").scrollTop = x[i];
document.getElementsById("snowi").scrollLeft = y[i];
document.getElementsById("snowi").fontSize = Math.random() * 10 + 20;
}
function show()
{
for(var i = 0;i < number;i++)
{
dx[i] = Math.round(Math.random() * width * 2);
dy[i] = Math.round(Math.random() * height * 5);
x[i] += dx[i];
y[i] += dy[i];
if(x > width || x< 0 || y > height)
{
x[i] = Math.round(Math.random() * width);
y[i] = Math.round(Math.random() * height + 100);
}
document.getElementsById("snowi").style.marginleft = x[i];
document.getElementsById("snowi").style.marginTop = y[i] + document.body.scrollTop;
}
setTimeout(show(),1);
}
//-->
</script>
</body>
</html>
请各位高手帮看看
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下雪的冬天</title>
<style type="text/css">
<!--
body
{
background-image:url(images/bg.jpg);
}
p
{
font-size:36px;
color:#FFFFFF;
}
div
{
position:absolute;
visibility:visible;
font-size:40px;
color:#FFFFFF;
}
-->
</style>
</head>
<body>
<p>下雪的冬天</p>
<script type="text/javascript">
<!--
var number = 25; //雪花的数量
var x = new Array(); //雪花的水平位置
var y = new Array(); //雪花的竖直位置
var dx = new Array(); //雪花位置的水平该变量
var dy = new Array(); //雪花位置的竖直改变量
var width = document.body.clientWidth;
var height = document.body.clientHeight;
//创建每一片雪花
for(var i = 0;i < number;i++)
{
document.write('<div id="snow+i">*</div>');
x[i] = Math.round(Math.random() * width);
y[i] = Math.round(Math.random() * height + 100);
document.getElementsById("snowi").scrollTop = x[i];
document.getElementsById("snowi").scrollLeft = y[i];
document.getElementsById("snowi").fontSize = Math.random() * 10 + 20;
}
function show()
{
for(var i = 0;i < number;i++)
{
dx[i] = Math.round(Math.random() * width * 2);
dy[i] = Math.round(Math.random() * height * 5);
x[i] += dx[i];
y[i] += dy[i];
if(x > width || x< 0 || y > height)
{
x[i] = Math.round(Math.random() * width);
y[i] = Math.round(Math.random() * height + 100);
}
document.getElementsById("snowi").style.marginleft = x[i];
document.getElementsById("snowi").style.marginTop = y[i] + document.body.scrollTop;
}
setTimeout(show(),1);
}
//-->
</script>
</body>
</html>
请各位高手帮看看
...全文
请发表友善的回复…
发表回复
CCCSharp 2010-05-11
- 打赏
- 举报
楼主的方法是想用“*”符号来模拟下雪的效果，在显示这些雪花所在的层时可以采用绝对定位（position:absolute;left:xx;top:yy）的效果（位置也用随机数来实现）就可以了（前提是这些层的父层也设置了绝对定位）
wyang1991 2010-05-11
- 打赏
- 举报
网上有源代码的
prototyper 2010-05-11
- 打赏
- 举报
我想说，这是一个很好的JS面向对象编程练习素材。
先创建一个飘落的雪花类，再间隔时间new出一定数量的实例到容器的随机位置运行，应该比您的思路贴切些——相对于下雪的实际场景。
你如果玩过FLASH就明白我的意思了，FLSH也是先创建一片飘落的雪花剪辑，再把同样的剪辑拖放足够数量到舞台中的随机位置，这种傻瓜操作方式就是OOP的。
先创建一个飘落的雪花类，再间隔时间new出一定数量的实例到容器的随机位置运行，应该比您的思路贴切些——相对于下雪的实际场景。
你如果玩过FLASH就明白我的意思了，FLSH也是先创建一片飘落的雪花剪辑，再把同样的剪辑拖放足够数量到舞台中的随机位置，这种傻瓜操作方式就是OOP的。
wqkjj 2010-05-11
- 打赏
- 举报
本试图帮LZ改改程序，想想不如LZ自己对照看吧。原来网上找的，我只简单修改了一下。
<html>
<head>
<title>漫天雪花</title>
</head>
<body bgcolor=#000000 onload="snow()">
<script language="JavaScript">
<!--
N = 40;
Y = new Array();
X = new Array();
S = new Array();
A = new Array();
B = new Array();
M = new Array();
V = (document.layers)?1:0;
iH=(document.layers)?window.innerHeight:window.document.body.clientHeight;
iW=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < N; i++){
Y[i]=Math.round(Math.random()*iH);
X[i]=Math.round(Math.random()*iW);
S[i]=Math.round(Math.random()*5+2);
A[i]=0;
B[i]=Math.random()*0.1+0.1;
M[i]=Math.round(Math.random()*1+1);
}
if (V){
for (i = 0; i < N; i++)
{document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,"+M[i]+","+M[i]+"'></LAYER>")}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < N; i++)
{document.write('<div id="si" style="position:absolute;top:0;left:0;width:'+M[i]+';height:'+M[i]+';background:#fffff0;font-size:'+M[i]+'"></div>')}
document.write('</div></div>');
}
function snow(){
var H=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var T=(document.layers)?window.pageYOffset:document.body.scrollTop;
var L=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < N; i++){
sy=S[i]*Math.sin(90*Math.PI/180);
sx=S[i]*Math.cos(A[i]);
Y[i]+=sy;
X[i]+=sx;
if (Y[i] > H){
Y[i]=-10;
X[i]=Math.round(Math.random()*W);
M[i]=Math.round(Math.random()*1+1);
S[i]=Math.round(Math.random()*5+2);
}
if (V){document.layers['sn'+i].left=X[i];document.layers['sn'+i].top=Y[i]+T}
else{si[i].style.pixelLeft=X[i];si[i].style.pixelTop=Y[i]+T}
A[i]+=B[i];
}
setTimeout('snow()',10);
}
//-->
</script>
</body>
</html>
<html>
<head>
<title>漫天雪花</title>
</head>
<body bgcolor=#000000 onload="snow()">
<script language="JavaScript">
<!--
N = 40;
Y = new Array();
X = new Array();
S = new Array();
A = new Array();
B = new Array();
M = new Array();
V = (document.layers)?1:0;
iH=(document.layers)?window.innerHeight:window.document.body.clientHeight;
iW=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < N; i++){
Y[i]=Math.round(Math.random()*iH);
X[i]=Math.round(Math.random()*iW);
S[i]=Math.round(Math.random()*5+2);
A[i]=0;
B[i]=Math.random()*0.1+0.1;
M[i]=Math.round(Math.random()*1+1);
}
if (V){
for (i = 0; i < N; i++)
{document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,"+M[i]+","+M[i]+"'></LAYER>")}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < N; i++)
{document.write('<div id="si" style="position:absolute;top:0;left:0;width:'+M[i]+';height:'+M[i]+';background:#fffff0;font-size:'+M[i]+'"></div>')}
document.write('</div></div>');
}
function snow(){
var H=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var T=(document.layers)?window.pageYOffset:document.body.scrollTop;
var L=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < N; i++){
sy=S[i]*Math.sin(90*Math.PI/180);
sx=S[i]*Math.cos(A[i]);
Y[i]+=sy;
X[i]+=sx;
if (Y[i] > H){
Y[i]=-10;
X[i]=Math.round(Math.random()*W);
M[i]=Math.round(Math.random()*1+1);
S[i]=Math.round(Math.random()*5+2);
}
if (V){document.layers['sn'+i].left=X[i];document.layers['sn'+i].top=Y[i]+T}
else{si[i].style.pixelLeft=X[i];si[i].style.pixelTop=Y[i]+T}
A[i]+=B[i];
}
setTimeout('snow()',10);
}
//-->
</script>
</body>
</html>
Fairy_dy 2010-05-11
- 打赏
- 举报
这里document.getElementsById("snowi").都有问题
xiaojing7 2010-05-10
- 打赏
- 举报
