引用【JavaScript】满天星的代码，稍作修改的结果：

            function drawStars() {

                for (i = 1; i < 100; ++i) {

                    ctx.fillText("*", Math.random()*1024, Math.random()*768);

                   }

            }

            setInterval("drawStars()", 100);

text被反复绘制，以至占满屏幕，避免这种情况需要在每次repaint之前清除屏幕。code：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title></title>

    <style>

        canvas {

            background-color: white;

        }

    </style>

</head>

    <body>

        <canvas id="myCanvas" width="1024" height="768" style="border:1px solid #d3d3d3;">

         </canvas>

        <script>

            var c = document.getElementById("myCanvas");

            var ctx = c.getContext("2d");

            ctx.font = "30px Verdana";

            function clear() {

                ctx.clearRect(0, 0, c.width, c.height);

            }

            function drawStars() {

                for (i = 1; i < 300; ++i) {

                    ctx.fillText("*", Math.random()*1024, Math.random()*768);

                }

                setTimeout(clear, 90);

            }

            setInterval(drawStars, 100);

            // setInterval不会因为包含有setTimeout而延迟执行，

            // 而是严格的按照传入setInterval的参数时间调用drawStars

            // 每个setTimeout间也是相互独立的，不会因为上一个setTimeout还在等待时间就无法调用。

            // 这里的setInterval和setTimeout不能独立考虑。。。如果interval的时间比较短，那么同一时间会有多个setTimeout在等待执行。。。

            // 这样setTimeout除了第一次是按照自己的参数时间调用函数外，其余都是按Interval的时间参数调用。。。

            // 如果需要clearInteval；那么需要以var verb = setInterval(drawStars, 100);形式声明变量

            // 然后在函数中调用clearInteval(verb)终止循环

        </script>

</body>

</html>

修改之后（顺便改了颜色）有了“视觉下落”的效果，但是达不到对每个“雪花”的精细控制。。。而且仅仅是视觉上。。没有真正的下落

参考：

1、js innerHTML 改变div内容

code2:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>snow2</title>

    </head>

    <body>

        <script>

//            尝试一个雪花下落。

//            var screenWidth = document.documentElement.clientWidth;

//            var screenHeight = document.documentElement.clientHeight;

//

//            var star = document.createElement("div");

//            star.innerHTML = '*';

//            star.style.fontSize = 100 + "px";

//            document.body.appendChild(star);

//

//            var X = Math.random()*screenWidth;

//            var Y = Math.random()*screenHeight;

//            star.style.position = "absolute";

//            star.style.left = X + "px";

//            star.style.top = Y + "px";

//

//            function down() {

//                Y++;

//                if (Y > screenHeight) {

//                    Y = 0;

//                }

//                star.style.left = X + "px";

//                star.style.top = Y + "px";

//            }

//

//            setInterval(down, 10);

//            创建100个Snowflake对象，设置初始位置--->new star(300, 400);

//            Snowflakes.down();

            var screenWidth = document.documentElement.clientWidth;

            var screenHeight = document.documentElement.clientHeight;

            var snowflake = [];

            var X = [];

            var Y = [];

            var numberOfSnowflake = 0;

            function createSnowflake() {

                var sf = document.createElement("div");

                sf.innerHTML = '*';

                sf.style.fontSize = 100 + "px";

                document.body.appendChild(sf);

                X[numberOfSnowflake] = Math.random()*screenWidth;

                Y[numberOfSnowflake] = Math.random()*screenHeight;

                sf.style.position = "absolute";

                sf.style.left = X[numberOfSnowflake] + "px";

                sf.style.top = Y[numberOfSnowflake] + "px";

                snowflake.push(sf);

                numberOfSnowflake++;

            }

            function repaint(i) {

                snowflake[i].style.left = X[i] + "px";

                snowflake[i].style.top = Y[i] + "px";

            }

            function down(i) {

                function miniDown() {

                    Y[i]++;

                    if (Y[i] > screenHeight) {

                        X[i] = Math.random()*screenWidth;

                        Y[i] = 0;

                    }

                    repaint(i);

                }

                setInterval(miniDown, 10);

            }

            var i;

            for (i = 0; i <= 100; ++i) {

                createSnowflake();

                down(numberOfSnowflake);

            }

            down(0);

        </script>

    </body>

</html>

【JavaScript】下大雪的更多相关文章

  1. 【转】JavaScript下对去重算法的优化

    本人较懒,直接将链接附上: JavaScript下去重算法优化:http://www.linuxde.net/2013/02/12062.html

  2. PHP与JavaScript下的Cookie操作

    下面的例子列出几种情形交互场景,列出JS和php交互的方法.总结下,以免日后再为cookie问题困扰. setcookie.php getcookie.php 总结: php用自身函数读取php 的c ...

  3. JavaScript下的进制转换

    JavaScript下的进制转换 //十进制转其他进制 var num = 99; console.log('十进制: ', num); console.log('八进制:', (num).toStr ...

  4. javascript下获取guid或者UTC时间作为唯一值

    javascript下,有时出于需要,可以利用guid或UTC时间作为当前页面中的唯一值. 什么场景需要弄这个唯一值? 比如说,用easyUI的treegrid,添加新节点.在treegrid里面 , ...

  5. JavaScript下的setTimeout(fn,0)意味着什么？

    近期在研究异步编程的我对于setTimeout之类的东西异常敏感.在SegmentFault上看到了一个问题<关于SetTimeout时间设为0时>:提问者读了一篇文章,原文解释setTi ...

  6. Javascript下拉导航

    1.右侧导航 tree.js function Toggle(e){ if(!document.getElementById) return; if(!e) var e = window.event; ...

  7. JavaScript下拉框去除重复内容

    下拉框去除重复内容 <script type="text/javascript" src="http://www.joleye.com/libraries/java ...

  8. Javascript下IE与Firefox下的差异兼容写法总结

    http://www.jb51.net/article/23923.htm     总结一部分IE和Firefox的javascript差异写法,对于像书写多浏览器兼容性更好的代码,可以参考下.   ...

  9. JavaScript下的new操作符做了什么？

    可以参考知乎的一篇文章:https://zhuanlan.zhihu.com/p/23987456 参考网上其他人的文章,new发生了以下操作 参考MDN:https://developer.mozi ...

随机推荐

  1. js yui

    1.namespace 用于创建一个全局的命名空间,使用YUI时,首先会自动创建widget,util,example三个命名空间,使用时也可以自定义命名空间.类似于在程序中建了了一个static变量 ...

  2. 关于C# wpf DataGrid单元格双击设置单元格内容

    1.我是使用了 visual stadio 2015, 用的C# WPF写个工具,但是发现wpf原生没有涉及表格的东西(类似 winform·的DataGridView),所以使用的是toolkit工 ...

  3. jvm相关參数，调优

    常见的jvm參数例如以下 -Xmx1024m:设置JVM最大可用内存为1024M. -Xms1024m:设置JVM初始内存为1024m. 此值能够设置与-Xmx同样,以避免每次垃圾回收完毕后JVM又一 ...

  4. 面试题思考：interface和abstract的区别

    抽象类(abstract) 含有abstract修饰符的class即为抽象类,abstract 类不能创建的实例对象. 含有abstract方法的类必须定义为abstract class,abstra ...

  5. python 之 re模块（正则表达式）

    一.起源(历史) 正则表达式的“鼻祖”或许可一直追溯到科学家对人类神经系统工作原理的早期研究.美国新泽西州的Warren McCulloch和出生在美国底特律的Walter Pitts这两位神经生理方 ...

  6. http协议详解(1)

    HTTP协议报文格式 接下来我们看看HTTP协议(Hypertext Transfer Protocol――超文本传输协议)浏览器端(客户端)向WEB服务器端访问页面的过程和HTTP协议报文的格式. ...

  7. 隐藏内容但仍保持占位的css写法

    通常显示和隐藏内容都会用display:block;和display:none; 如果想要保持内容的占位可以用visbility:visible; 和visiblity:hidden;来控制内容的显示 ...

  8. Windows窗口的层次关系(转)

    今天看到这篇文章,觉得蛮有用的,我之前也对这个不大了解,特转载此处. 转载地址:http://www.51testing.com/html/200804/n80848.html 在Window 的图形 ...

  9. 170110、Spring 事物机制总结

    spring两种事物处理机制,一是声明式事物,二是编程式事物 声明式事物 1)Spring的声明式事务管理在底层是建立在AOP的基础之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加 ...

  10. CodeForces 666A Reberland Linguistics（DP）

    A. Reberland Linguistics time limit per test 1 second memory limit per test 256 megabytes input stan ...