引用【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. linux系统web项目运行环境搭建

    允许本地访问端口:iptables -P OUTPUT ACCEPT MySQL数据库安装1.yum install mysql 2.yum install mysql-server 3.删除MySQ ...

  2. 微软官方SqlHelper类 数据库辅助操作类

    数据库操作类真的没有必要自己去写,因为成熟的类库真的非常完善了,拿来直接用就好,省时省力. 本文就为大家介绍微软官方的程序PetShop4.0中的SqlHelper类,先来做一下简单的介绍,PetSh ...

  3. sql 循环表中记录

    =========================================================================循环排序查询数据=================== ...

  4. [Algorithms] Counting Sort

    Counting sort is a linear time sorting algorithm. It is used when all the numbers fall in a fixed ra ...

  5. Django设置中文，和时区、静态文件指向

    #========================================================== # 设置时区 注意注释上面的:LANGUAGE_CODE.TIME_ZONE.U ...

  6. ETCD使用中需要注意的问题

    我们在实际生产中使用ETCD存储元数据, 起初集群规模不大的时候元数据信息不多没有发现什么问题. 随着集群规模越来越大问题逐渐暴露了 有些实际的配置还是需要在初始化的时候就研究确定 1. --auto ...

  7. 四、H5 录制视频 Web Real-Time Communication

    Web Real-Time Communication HTML5实现视频直播功能思路详解_html5教程技巧_脚本之家 https://m.jb51.net/html5/587215.html

  8. Lock wait timeout exceeded; try restarting transaction 3千万数据删除

    Lock wait timeout exceeded; try restarting transaction 0DELETE FROM sta_addr WHERE date="2018-1 ...

  9. Spring MVC 根据请求方法限定:请求方法（四）

    请求方法 说明 GET 使用GET方法检索一个表述(representation)——也就是对资源的描述.多次执行同一GET请求,不会对系统造成影响,GET方法具有幂等性[指多个相同请求返回相同的结果 ...

  10. pycharm调试scrapy

    pycharm调试scrapy 创建一个run.py文件作为调试入口 run.py中,name是要调试的爬虫的名字(注意,是爬虫类中的name,而不是爬虫类所在文件的名字) 拼接爬虫运行的命令,然后用 ...