怎样用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>
请各位高手帮看看

解决方案 »

  1.   

    请参照http://topic.csdn.net/u/20091224/10/077adae0-1e48-43d5-91b8-b995d872a082.html
      

  2.   

    楼主的方法是想用“*”符号来模拟下雪的效果，在显示这些雪花所在的层时可以采用绝对定位（position:absolute;left:xx;top:yy）的效果（位置也用随机数来实现）就可以了（前提是这些层的父层也设置了绝对定位）
      

  3.   

    本试图帮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>
      

  4.   

    我想说，这是一个很好的JS面向对象编程练习素材。
    先创建一个飘落的雪花类，再间隔时间new出一定数量的实例到容器的随机位置运行，应该比您的思路贴切些——相对于下雪的实际场景。
    你如果玩过FLASH就明白我的意思了，FLSH也是先创建一片飘落的雪花剪辑，再把同样的剪辑拖放足够数量到舞台中的随机位置，这种傻瓜操作方式就是OOP的。
      

  5.   

    这里document.getElementsById("snowi").都有问题