原生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. Matlab Tricks（十七）—— 使用 Latex

    >> set(text, 'Interpreter') 'none' 'tex' 'latex' % Matlab将返回'Interpreter'(解释器,对 text 文本的解释)所包含 ...

  2. C# WPF 一直保持多个Topmost窗体的置顶顺序

    原文:C# WPF 一直保持多个Topmost窗体的置顶顺序 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37862405/article/ ...

  3. EF codefirst第一篇

    一直以来喜欢dbfirst  因为简单,一直不明白为什么codefirst会是主流,根据对ddd的学习终于知道了codefirst的目的 本文是对博客园 小崔的笔记本 文章 EF实体框架之CodeFi ...

  4. 用WPF窗体打造个性化界面的图片浏览器

    原文:用WPF窗体打造个性化界面的图片浏览器 本文使用WPF窗体(XAML及C#)与Win Form控件(FolderBrowserDialog)结合的方式, 演示制作了一个简易漂亮的WPF图片浏览器 ...

  5. redis,docker和kubernetes留言簿案例实战

    kubernetes实战-基于redis和docker的留言簿案例 [置顶] kubernetes实战-基于redis和docker的留言簿案例 标签: dockerkubernetesredis 2 ...

  6. 卷积（convolution）与相关（correlation）（matlab 实现）

    1. 卷积(convolution) 输出 y(n) 是作为在 x(k) 和 h(n−k)(反转和移位)重叠之下的样本和求出的. 考虑下面两个序列: x(n)=[3,11,7,0,−1,4,2],−3 ...

  7. eclipse 配置maven tomcat 环境

    一  maven配置文件路径 二  tomcat 和JRE位置 三 validation 设置 四 五 六 设置run(debug) configurations 七 添加server时添加 reso ...

  8. Java之线程池管理

    JDK5后建议使用ExecutorService与Excutors来创建与管理线程池, 不再建议直接使用Thread. 开始不明白原因, 今天知道结果了:使用Thread.currnetThread. ...

  9. 开源数据源使用 DBCP 和 C3PO

    jar包: commons-dbcp-1.4.jar commons-pool-1.5.6.jar mysql-connector-java-5.0.8-bin.jar 建立dbcp的配置文件 dbc ...

  10. jquery 显示和隐藏的三种方式

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