原生js实现放烟花效果，点击鼠标，然后随机向四周扩散，！

思路：

1.首先烟花是五颜六色的，所以我们先写一个随机颜色的函数；

2.创建一个制造烟花的构造函数，第一个参数为元素，第二参数为初始x轴位置，第三参数为y轴位置；

3.烟花散开的位置是随机的，所以我们先要使用随机数生成一个随机的速度值。

代码内有详细注释，生成的烟花形状可以根据自身需要调成图片或者其它样式。

效果图如下：

代码如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <STYLE>

        *{

            padding: 0px;

            margin: 0px;

            background: #000;

        }

        /*预设置烟花的大小*/

        .firworks{

            width: 4px;

            height: 4px;

            position: absolute;

        }

    </STYLE>

</head>

<body>

</body>

<script type="text/javascript">

    //封装一个颜色随机的效果

    function randomColor(){

        var color = "rgb("

        var r = parseInt(Math.random()*256);

        var g = parseInt(Math.random()*256);

        var b = parseInt(Math.random()*256);

        color = color+r+","+g+","+b+")";

        return color;

    }

    //创建一个制造烟花的构造函数，第一个参数为元素，第二参数为初始x轴位置，第三参数为y轴位置。

    function Fireworks(Div,x,y){

        Div.style.backgroundColor=randomColor();   //给烟花添加背景色

        Div.className="firworks";                    //添加一个class

        document.body.appendChild(Div);

        Div.style.left=x+"px";                        //把鼠标点击坐标给div

        Div.style.top=y+"px";

        var speedX = (parseInt(Math.random()*2) == 0 ? 1 : -1)*parseInt(Math.random()*16 + 1);  //三目运算符随机移动方向，概率50%,为1时往正方向移动，负1时往反方向移动第二个随机数随机速度快慢

        var speedY = (parseInt(Math.random()*2) == 0 ? 1 : -1)*parseInt(Math.random()*20 + 1);

        this.move=function(){

            var i = 3;

            var time1=setInterval(function(){

                i++;

                Div.style.left=Div.offsetLeft+speedX+"px";

                Div.style.top=Div.offsetTop+speedY+i+"px";   //当i+speedY>0时,烟花朝下运动。

                if(Div.offsetLeft+Div.offsetWidth>window.innerWidth|| Div.offsetLeft<2 || Div.offsetTop+Div.offsetHeight>window.innerHeight || Div.offsetTop<2 ){

                    Div.remove();        //移动出可视区域记得删除div和清除定时器

                    clearInterval(time1);

                }

            },30);

        }

    }

    document.onclick=function (e){

        var evt=e||window.event;    //兼容性处理

        for(var i=0;i<80;i++){        //随机烟花的数量

            var div=document.createElement("div");

            var b=new Fireworks(div,evt.pageX,evt.pageY);

            b.move();

        }

    }

</script>

</html>

(Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例的更多相关文章

  1. (Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知

    轮播广告通知整体思路: 1.首先文字的移动利用了JAVA script 中ScrollLeft的知识点: 2.在设置一条一模一样的新闻,利用无缝轮播图滚动的原理让新闻无缝滚动. 3.使用了自执行匿名函 ...

  2. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  3. 干货分享：用一百行代码做一个C/C++表白小程序，程序员的浪漫！

    前言:很多时候,当别人听到你是程序员的时候.第一印象就是,格子衫.不浪漫.直男.但是程序员一旦浪漫起来,真的没其他人什么事了.什么纪念日,生日,情人节,礼物怎么送? 做一个浪漫的程序给她,放上你们照片 ...

  4. ADO.NET学习系列（三）----做一个登录案例

    总体思路.根据用户输入的用户名和密码,来判断,和数据库里面存的是不是一样,如果一样就表明登录成功,否则就登录失败. 方案一: 1.select* from 表名 where username=&quo ...

  5. (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  6. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  7. 利用原生Javascript实现计算器（未完待续）

    这里,将记录我升级四则运算v1.2的整个过程. 环境检测,杨说检测环境也是可以高兴到手舞足蹈的一件事. 为了实现自动化,Testing,查阅相关资料,我这里使用了node(这里为了npm).yoema ...

  8. 利用原生JavaScript获取样式的方式小结

    来源:http://www.ido321.com/930.html ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能 ...

  9. 笔记：利用Cocos2dx 3.3 lua 做一个动作类游戏（一）

    在这之前,声明一下: 做不完我是小狗. 没办法,没毅力和恒心,之前的那个Quick Cocos2dx做的横版过关游戏的demo已经转成了3.3的版本了,其实也算是个半成品,战斗,UI啥的都有了,呵呵. ...

随机推荐

  1. UITextField设置leftView的Insets

    Insets就是css中的padding 我们给UITextField设置了leftView,目的是在文本输入框左側显示一个图标.可是在ios7里,这个图标会紧紧地挨着TextField的左边框,非常 ...

  2. Leetcode 136 Single Number 亦或

    题意就是从一堆数中找出唯一的一个只存在一个的数.除了那个数,其他的数都是两个相同的数. 通过亦或的性质: 1)a^a = 0 0^a = a 2)交换律 a^b = b^ a 3)结合律 (a^b)^ ...

  3. Linux性能测试 pmap命令

    名称:       pmap - report memory map of a process(查看进程的内存映像信息)用法       pmap [ -x | -d ] [ -q ] pids... ...

  4. 神户制钢坑了500家企业 百年老店为何走上邪路?（企业经营再艰难，也不能降低产品质量，甚至偷工减料，同样适用于IT行业）

    神户制钢这颗烂萝卜,拔出它之后带出的泥越来越多.上周五社长川崎博也又开了记者会,再次道歉,而受到其数据造假影响的客户数量也从200家飙升到500家. 日本政府给神户制钢两周时间调查,还要在一个月内公布 ...

  5. A Byte of Python (for Python 3.0) 下载

    在线阅读:http://www.swaroopch.org/notes/Python_en:Table_of_Contents 英文版 下载地址1:http://files.swaroopch.com ...

  6. N+1：创新点的设计

    定义.公式.模型.算法的提出: 0. 如何进行抽象,如何定义数学表达式 二次衰减函数: f(z)=1z2 ⇒ f(z)=11+z2 噪声衰减因子: 对值域的要求,单调性的要求,必须是可调的: 2n1+ ...

  7. centos6.5安装apache2.x并更改默认80port

    因为现在nginx它已成为反向代理软件的主流.因此,linuxserver在系统.我们几乎总是安装nginx东方的,这使在同一时间使用apache带来了麻烦.因为apache它用于通过缺省80port ...

  8. zlog 程序日志的库 交叉编译（Linux生成ARM库，观察执行步骤）

    1. zlog 是个很好的写程序日志的库,功能比较强大,上手快. 2. 下载地址:https://github.com/bmanojlovic/zlog 3. cd 到文件夹下,对 autogen.s ...

  9. android反射组件 （一个）java 它们的定义annotation基础知识

    它们的定义annotation它由三部分组成: 它们的定义annotation.使用annotation班.annotation的处理方法. 一.自己定义annotation  元注解包含下面: 1) ...

  10. EntityFrameworkCore 一对一 && 一对多 && 多对多配置

    基本数据结构 表设计如下: 入学记录 public class AdmissionRecord { [Key] public long Id { get; set; } public DateTime ...