原生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. Linux下快速静态编译Qt以及Qt动态/静态版本共存（提供了编译4.6，5.6的精通编译脚本，并且apt-get install 需要的库也全列出来了。还有分析问题的心理过程）good

    qt4.6 Linux./configure -static -release -confirm-license -opensource -qt-zlib -qt-libpng -qt-libjpeg ...

  2. Robot Framework 快速入门_中文版

    目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键词 用户定义关键词 变量 定义变量 使用变 ...

  3. kendo ui gird温馨提示(使用本地数据) 一个

    加入js引用 <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" r ...

  4. 怎么给罗技K480 增加Home、End键

    最近看张大妈上很多人分享了我的桌面,有感于整天低头码字不利健康,隧鼓捣起自己的电脑桌了. 此处省略N字... 进入正文,我码字用的是罗技的K480蓝牙键盘 码了几行代码,发现没有Home.End键,这 ...

  5. Node.js && Angular && TypeScript 环境安装与更新

    安装 Node.js 下载并安装Node.js Angular 执行命令 npm install -g @angular/cli 参考资料: angular quickstart TypeScript ...

  6. HDU 2686 Matrix 3376 Matrix Again（费用流）

    HDU 2686 Matrix 题目链接 3376 Matrix Again 题目链接 题意:这两题是一样的,仅仅是数据范围不一样,都是一个矩阵,从左上角走到右下角在从右下角走到左上角能得到最大价值 ...

  7. 关于C#你应该知道的2000件事

    原文 关于C#你应该知道的2000件事 下面列出了迄今为止你应该了解的关于C#博客的2000件事的所有帖子. 帖子总数= 1,219 大会 #11 -检查IL使用程序Ildasm.exe d #179 ...

  8. WPF无边框实现拖动效果

    这是在做弹幕的时候遇到的一个需求 透明背景,拖动弹幕=.= private void Window_MouseLeftButtonDown(object sender, MouseButtonEven ...

  9. redis 从0 到 1 键值相关命令 服务器相关命令

    keys * 获取所有的key   忽略其数据类型 数据为空   返回(empty list or set) keys a* .*b 获取以a开头 或者 以b结尾的key 返回(empty list ...

  10. WPF 控件 深度克隆

    原文:WPF 控件 深度克隆 http://social.msdn.microsoft.com/Forums/zh-SG/wpfzhchs/thread/e5c87129-966a-4d51-a934 ...