原生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. 理解c#

    首先在介绍c#的时候我们要先理解什么是.NET,.NET就是微软的用来实验XML,Web Services,SOA(面向服务的体系结构service-oriented architecture)和敏捷 ...

  2. wpf 屏蔽热键

    原文:wpf 屏蔽热键 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a771948524/article/details/9428923   us ...

  3. 国内大型的内部 C# 编程规范

    C#编程规范 改动记录 Ver. No 发版日期 编制人 批准人 改动的说明 目   录 1 1.1 1.2 2 2.1 2.1.1      Pascal 大写和小写 2.1.2      Came ...

  4. JDBC学习笔记——增删改查

    1.数据库准备  要用JDBC操作数据库,第一步当然是建立数据表: ? 1 2 3 4 5 6 CREATE TABLE `user` (   `id` int(11) NOT NULL AUTO_I ...

  5. matlab figure 调整大小、字体、线宽

    用 matlab 画了一张图,投稿时要缩小,缩小后字体就会过小或者发虚. 解决办法: % figure resize set(gcf,'Position',[100 100 260 220]); se ...

  6. Android备注26.Android异步任务(AsyncTask)

    转载请表明出处:http://blog.csdn.net/u012637501(嵌入式_小J的天空) 一.引言     我们知道Android的UI线程主要负责处理用户的按键事件.用户触屏事件及屏幕画 ...

  7. WCF 大文件传输配置

    <bindings> <webHttpBinding> <!--这个是接收大数据加的,设置WCF服务器端数据接收上限参数,此处单位字节,故2147483647字节==2G ...

  8. 在IOS开发中使用GoogleMaps SDK

    一.申请一个免费的API KEY要使用GoogleMaps SDK,必须要为你的应用申请一个API KEY,API Key可以让你监视你的应用调用api的情况.api key是免费的,你可以在任何调用 ...

  9. Delphi 7下最小化到系统托盘（主要是WM_TRAYMSG和WM_SYSCOMMAND消息）

    在Delphi 7下要制作系统托盘,只能制作一个比较简单的系统托盘,因为ShellAPI文件定义的TNotifyIconData结构体是比较早的版本.定义如下: 123456789   _NOTIFY ...

  10. Delphi XE5 Android 调用手机震动（通过JObject测试是否支持震动）

    源码如下: uses Androidapi.JNI.Os, Androidapi.JNIBridge; function GetVibratorArray(const AIntArr: array o ...