引用【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. [转]NBehave行为驱动测试关于story和scenarios

    原文: Behavior-Driven Development with NBehave 这里模拟了一个"银行账户"的类 一个余额属性,一个存款方法,一个撤销账户的方法,一个转账的 ...

  2. php获取文件后缀的9种方法

    获取文件后缀的9种方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3 ...

  3. 第9步：ASMCA创建磁盘组

    注意,创建磁盘组时需要以grid用户身份执行,在那之前可能需要以root身份执行xhost+,即命令: 代码1 [root@sgdb1~]# xhost+ [root@sgdb1~]# su – gr ...

  4. vue项目创建步骤小结

    第一步创建项目目录demo cd demo npm init  生成package.json 初始化项目工具使用 命令行工具 (CLI) 快速初始化 # 全局安装 vue-cli $ npm inst ...

  5. 67、Fragment实现Tab

    <LinearLayout .......... <FrameLayout android:id="@+id/id_content" android:layout_wi ...

  6. 系统内部集成测试(System Integration Testing) SIT 用户验收测试(User Acceptance Testing)

    系统内部集成测试(System Integration Testing) SIT 用户验收测试(User Acceptance Testing) UAT SIT在前,UAT在后,UAT测完才可以上线

  7. spring定时器的cronexpression表达式

    转自:https://www.cnblogs.com/yaowen/p/3779284.html 相关配置: import com.alibaba.dubbo.config.annotation.Se ...

  8. GetDesktopWindow和GetWindow区别

    GetWindow The GetWindow function retrieves a handle to a window that has the specified relationship ...

  9. Date、Calendar、Timestamp的区别与转换

    1.Java.util.Date 包含年.月.日.时.分.秒信息. // String转换为Date String dateStr="2013-8-13 23:23:23"; St ...

  10. java 内存空间

    堆:new 出的对象在堆上 java栈:java程序.线程运行数据.内存数据 每个方法都有自己的栈.运行时需要的数据存在自己的栈中 每个线程对立的是图中浅蓝色的部分(java栈.本地方法栈.程序计数器 ...