引用【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. RelativeSource.TemplatedParent 属性wpf

    今天看到这一句代码时候,自己只是知道绑定了,可是不知道绑定了什么啊 就去查了一下,后来说的好像是绑定的TemplateParent返回的 一个值.可是这是为什么呢, 有的说是绑定的是一个资源. 下面有 ...

  2. poj 3653(最短路)

    题目链接:http://poj.org/problem?id=3653 思路:题目意思很简单,就是二维平面上的图,要求起点到终点的最短路.建图略坑,需要坐标映射,化二维为一维.然后就是Dijkstra ...

  3. OpenSSL Heart Bleed 如何修复

     一 . 前言  这两天这个事件沸沸扬扬啊,有了这个bug黑客在电脑前动动手指就能获取各大电商网站.各大银行用户的用户名和密码了,屌爆了 BUG具体内容 : http://heartbleed.com ...

  4. 将坐标转化为与X轴正半轴夹角模板

    //还需加PI 和 mabs 函数 double chg(double x,double y) { double tmps; )<1e-) { ) tmps=90.0; else tmps=27 ...

  5. [Intellij idea]解决debug时中文显示方框问题

    1. 点击File -> Settings 进入Intellij的设置页面 2. 点击Appearance,选择Override defaults fonts by (not recommend ...

  6. 1.0_搭建PHP服务器环境的步骤

    a,下载安装一款静态web服务器,ex:HTTPD,IIS; b,下载安装PHP引擎: c,在静态服务器配置一下,声明PHP引擎的存在. 注意,以上三步可以用xampp套件来完成. 启动Apache, ...

  7. iOS 将金钱变为逗号形式

    ; NSNumberFormatter * formatter = [NSNumberFormatter new]; [formatter setNumberStyle:NSNumberFormatt ...

  8. 锚点链接 阻止a标签跳转

      参考 http://blog.csdn.net/awe5566/article/details/22583699 href="#downJacket" 锚点链接 必须写: 但又 ...

  9. Debug技巧：条件断点和远程Debug

    一.断点: 1.条件断点 本以为条件断点很难,其实就这样. 二.远程Debug 1.首先看服务器是不是在Debug模式下工作 不是则进行(tomcat/bin/catalina.sh)配置. -Xde ...

  10. Oracle database精装版11gR2入门详细连接教程

    对于11g本身比较简单,适合学习者使用,对电脑要求相对较低. 自己一个人单机学习使用. 工具/原料   Oracle Database Express Edition 11g Release 2安装包 ...