引用【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. boost数据结构tuple

    boost数据结构tuple tuple(元组)定义了一个有固定数目元素的容器,其中每个元素类型可以不相同,这与其它容器有着本质的区别!vector和array虽然可以容纳很多元素,但是元素的类型必须 ...

  2. 转载：resNet论文笔记

    <Deep Residual Learning for Image Recognition>是2016年 kaiming大神CVPR的最佳论文 原文:http://m.blog.csdn. ...

  3. SurvivalShooter学习笔记（四.敌人攻击）

    此案例中,敌人始终朝着玩家移动 到达攻击玩家范围时(身上的大的触发器被玩家触发时(敌人靠近玩家,当身上的触发器被触发,且对象是玩家时条件达成)) 隔一个时间端,打击玩家一下,对玩家造成伤害,玩家掉血, ...

  4. Faster R-CNN利用新的网络结构来训练

    前言 最近利用Faster R-CNN训练数据,使用ZF模型,效果无法有效提高.就想尝试对ZF的网络结构进行改造,记录下具体操作. 一.更改网络,训练初始化模型 这里为了方便,我们假设更换的网络名为L ...

  5. 160627、你想知道的关于JavaScript作用域的一切

    JavaScript中有许多章节是关于scope的,但是对于初学者来说(甚至是一些有经验的JavaScript开发者),这些有关作用域的章节既不直接也不容易理解. 这篇文章的目的就是为了帮助那些想更深 ...

  6. Less-css基础之变量学习

    一.普通变量 //--普通变量--less @fontColor: #000000; body{ color:@fontColor; } //--输出--css body{ color:#000000 ...

  7. PAT 1013 Battle Over Cities(并查集)

    1013. Battle Over Cities (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue It ...

  8. T420 开启麦克风

    买来之后一直没注意过麦克风的问题,今天基友们群视频,才发现我的机器是哑的 打开录音设备,发现没有设备 重装驱动无果 打开BIOS,在安全选项——IO/Access中将Microphone 设为 Ena ...

  9. simplest_ffmpeg_grabdesktop：屏幕录制。 simplest_ffmpeg_readcamera：读取摄像头

    最简单的基于FFmpeg的AVDevice例子(屏幕录制) - 雷霄骅(leixiaohua1020)的专栏 - CSDN博客 https://blog.csdn.net/leixiaohua1020 ...

  10. 线程池ThreadPoolExecutor参数设置

    线程池ThreadPoolExecutor参数设置 JDK1.5中引入了强大的concurrent包,其中最常用的莫过了线程池的实现ThreadPoolExecutor,它给我们带来了极大的方便,但同 ...