原生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. 分位数（quantiles）、Z-score 与 F-score

    0. 分位数(quantiles) 因为累计分布函数(cdf,F−1)是单调增函数,因此其有反函数,不妨记为 F−1. 其真实的含义在于,如果 F 是 X 的 cdf,则 F−1(α) 的函数值为: ...

  2. 我的Spring之旅（二）：为请求加入參数

    1.前言 在上一篇我的Spring之旅(一)中,我们仅仅是利用不带參数的请求返回一个网页或一段json,在实际的B/S.C/S网络交互中,请求中须要自己定义的參数.本篇将简单地为之前的请求加入參数. ...

  3. HDU 4279 Number(2012天津网络游戏---数论分析题)

    转载请注明出处:http://blog.csdn.net/u012860063? viewmode=contents 题目链接:pid=4279">http://acm.hdu.edu ...

  4. 细数Windows 的那些小技巧！

    以下整理自知乎 Windows 有哪些你相见恨晚的技巧?和Quora(英文版) What are some secret tricks you should know about Windows? 等 ...

  5. 设置oracle密码不过期，修改用户密码

    1. 查看用户名使用的profile select username,profile from dba_usersSELECT * FROM dba_profiles WHERE profile='D ...

  6. x86汇编指令脚本虚拟机

    简介 这是一个可以直接解释执行从ida pro里面提取出来的x86汇编代码的虚拟机. 非常精简,整体架构上不能跟那些成熟的虚拟机相比,主要目标是够用.能用.轻量就行,如果觉得代码架构设计的不是很好的话 ...

  7. Adapter的泛型

    宗旨:GetView方法放在具体的Activity/Fragment里面实现,其他的均可以复用 /// <summary> /// 通用适配器:新建GetViewEvent委托+OnGet ...

  8. 一次 .NET Core 中玩锁的经历：ManualResetEventSlim, Semaphore 与 SemaphoreSlim

    最近同事对  .net core memcached 缓存客户端 EnyimMemcachedCore 进行了高并发下的压力测试,发现在 linux 上高并发下使用 async 异步方法读取缓存数据会 ...

  9. jquery 标签页

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  10. Plupload上传插件中文文档

    Plupload上传插件中文帮助文档 如有疑问,加群交流:646104701 下载地址:https://www.plupload.com/download/ 配置参数 实例化一个plupload对象时 ...