Jingle Bells,Jingle Bells,圣诞来临，做了一个下雪的小程序玩。有大雪花和小雪花。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

body

{

  overflow:hidden;

  background:#0099FF;

}

.smallSnowflake,.largeSnowflake

{

 font-size:38px;

 color:white;

 position:absolute;

}

.largeSnowflake{

 font-size:48px;

}

</style>

<script type="text/javascript">

window.onload=function(){

  var snow=new Snow();

  snow.start();

};

function Snow(){

    this.sky=document.body;

    this.width=document.documentElement.clientWidth;
    this.height=document.documentElement.clientHeight;

}

Snow.prototype={

  start:function(){

    var _this=this;

    _this.createSmallSnowflake();

    _this.createLargeSnowflake();

  },

  createSmallSnowflake:function(){

    var _this=this;

    setInterval(function(){

      var smallSnow=document.createElement('p');

      smallSnow.innerHTML='*';

      smallSnow.className='smallSnowflake';

      smallSnow.style.left=Math.round(Math.random()*_this.width)+'px';

      _this.sky.appendChild(smallSnow);

      _this.slide(smallSnow);

    },1000);

  },

  createLargeSnowflake:function(){

    var _this=this;

    setInterval(function(){

      var largeSnow=document.createElement('p');

      largeSnow.innerHTML='*';

      largeSnow.className='largeSnowflake';

      largeSnow.style.left=Math.round(Math.random()*_this.width)+'px';

      _this.sky.appendChild(largeSnow);

      _this.slide(largeSnow);

    },2000);

  },

  slide:function(ele){
     var _this=this;

     var timer=setInterval(function(){

       var t=ele.offsetTop;

       ele.style.top=t+5+'px';

if(ele.offsetTop+ele.style.height>_this.height)

{

_this.sky.removeChild(ele);

clearInterval(timer);

}

     },1000);

  }

};

</script>

</head>

<body>

</body>

</html>

效果图：

转眼又是年末了，又要跨年了。希望新的一年所有愿望可以实现，加油。

下雪了-js下雪效果的更多相关文章

  1. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  2. js sleep效果

    js sleep效果 s = setInterval(function(){ //需要执行的函数 alert("我延迟了2秒弹出"); },2000); 并不是每2秒执行一次,而是 ...

  3. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  4. js 动画效果实现

    1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...

  5. 页面倒计时跳转页面效果，js倒计时效果

    页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...

  6. 非常不错的一个JS分页效果代码

    这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...

  7. 纯js倒计时效果（交流加群：452892873）（本群每天都更新学习资料）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. js 技巧 （十）广告JS代码效果大全 【3】

    3.[允许关闭]     与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码: var delta=0.015;     var coll ...

  9. js 技巧 （十）广告JS代码效果大全 【1】

    广告JS代码效果大全 1.[普通效果]     现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,介绍的这种效果,在1024*768分辨率下正常显示,在800*60 ...

随机推荐

  1. 黄聪：解决丢失api-ms-win-crt-runtime-|1-1-0.dll的问题：vc_redist.x64

    解决无法启动程序,因计算机中丢失api-ms-win-crt-runtime-|1-1-0.dll的问题 安装:Microsoft Visual C++ 2015 RC Redistributable ...

  2. Chrome插件开发入门（二）——消息传递机制

    Chrome插件开发入门(二)——消息传递机制   由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...

  3. 获取mysql数据表中的列名

    select COLUMN_NAME from information_schema.columns where table_name='table_name' DESCRIBE table_name ...

  4. JAVA 处理程序异常,(try、catch、finally)，(thorws)

    一.try语句: try{//这里写可能出现异常的程序} catch(Exception e){//这里写如果出现异常怎么处理的程序} 二.throws语句 语法:函数方法()  throws Exc ...

  5. Coding.net 代码管理快速入门

    当项目创建好了之后,我们该如何上传代码到 coding 上呢? Coding 网站使用“ Git 仓库”(类似 github )来管理代码. 其操作原理在于:利用 git 服务,将本地的项目目录下的文 ...

  6. CentOS 6.5 网络配置（转载）

    From:http://blog.csdn.net/leave00608/article/details/19814063 1.配置网卡IP地址 vim /etc/sysconfig/network- ...

  7. IceGrid负载均衡部署 z

    [IceGrid负载均衡部署步骤]1.环境主机1:IP=192.168.0.239,上面部署注册表服务器registry和节点node1,registry和node1运行在同一进程中:主机2:IP=1 ...

  8. arm-linux-gcc 常用参数讲解 gcc编译器使用方法

    我们需要编译出运行在ARM平台上的代码,所使用的交叉编译器为 arm-linux-gcc.下面将arm-linux-gcc编译工具的一些常用命令参数介绍给大家.在此之前首先介绍下编译器的工作过程,在使 ...

  9. grep和sed替换文件中的字符串

    sed -i s/"str1"/"str2"/g `grep "str1" -rl --include="*.[ch]" ...

  10. sublimetext3 安装php语法检测

    打开控制台,install package 搜 sublimelinter 先安装sublimelinter本体 安装完以后再搜索一下,安装sublimelinter-php 接下来,打开prefer ...