JavaScript生成的动态下雨背景效果实现方法


Posted in Javascript onFebruary 25, 2015

本文实例讲述了JavaScript生成的动态下雨背景效果实现方法。分享给大家供大家参考。具体实现方法如下:

<HTML>

<HEAD>

<TITLE>JavaScript生成的动态下雨背景效果</TITLE>

</HEAD>

<BODY bgcolor="#fef4d2" >

<center>

<script language=JavaScript>

<!-- [Step1]: 在此能够设置雨滴的多少 -->

var rainsize = 40;

<!-- [Step2]: 这里可以更改下雨的速度,数值大速度慢 -->

var speed = 10;

var x = new Array();

var y = new Array();

var r = new Array();

var cx = new Array();

var cy = new Array();

var doc_width = document.body.clientWidth;

var doc_height = document.body.clientHeight;
for(i=0; i<rainsize; ++i) { 

  initRain();

  if (i == 0) {

    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");

    document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

    document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");

    document.write(",</font></div>"); }

  else {

    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");

    document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

    document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");

    document.write(",.</font></div>");  }

}
function initRain() {

  a = 6;

  r[i] = 1;

  sn = Math.sin(a);

  cs = Math.cos(a);

  cx[i] = Math.random() * doc_width + 1;

  cy[i] = Math.random() * doc_height + 1;

  x[i] = r[i] * sn + cx[i];

  y[i] = cy[i];

}
function raindropIE() {

  for (i = 0; i < rainsize; ++ i) {

     updateRain();

     if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {

         makeRain();

         doc_width = document.body.clientWidth;

         doc_height = document.body.clientHeight; }

     document.all["dot"+i].style.pixelTop = y[i];

     document.all["dot"+i].style.pixelLeft = x[i]; }

  setTimeout("raindropIE()", speed); 

}

function updateRain() {

  r[i] += 10;

  x[i] = r[i] * sn + cx[i];

  y[i] = r[i] * cs + cy[i];

}

function makeRain() {

  r[i] = 1;

  cx[i] = Math.random() * doc_width + 1;

  cy[i] = 1;

  x[i] = r[i] * sn + cx[i];

  y[i] = r[i] * cs + cy[i];

}

raindropIE();

</script> 

</BODY>

</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
详解js中==与===的区别
Jan 08 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
微信小程序 标签传入数据
May 08 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 #Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 #Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 #Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 #Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 #Javascript
JS实现自适应高度表单文本框的方法
Feb 25 #Javascript
如何编写高质量JS代码(续)
Feb 25 #Javascript
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP 读取Postgresql中的数组
2013/04/14 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
理解Javascript_05_原型继承原理
2010/10/13 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
JavaScript实现旋转轮播图
2020/08/18 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Pytorch之contiguous的用法
2019/12/31 Python
python中字典增加和删除使用方法
2020/09/30 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
渡河少年教学反思
2014/02/12 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
出纳岗位职责
2015/01/31 职场文书
通知书大全
2015/04/27 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang