(Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
时间:2022-07-24
本文章向大家介绍(Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
原生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>
- CSS3 倒影
- 写一只具有识别能力的图片爬虫
- 【今日问题】变量未初始化引起的崩溃
- 前端特效开发 | 点击查看大图相册效果
- 开发 | 星际争霸2人工智能研究环境 SC2LE 初体验
- 开发 | 我做了12万条的影评分析,告诉你《战狼Ⅱ》都在说些啥
- JavaScript | 函数定义的两种方法;预编译与执行
- jQuery特效 | 导航底部横线跟随鼠标缓动
- JavaScript | 选中并获取多行文本框内容的效果
- JavaScript | 动画显示比例的投票效果
- 原生JS | 作用域
- 腾讯、网易、新浪新闻网站爬虫编写记录及评论格式分析
- 原生JS | 随机抽取不重复的数组元素 —— 有没有更好的方法?
- 原生JS | 逻辑操作符的短路问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php多进程应用场景实例详解
- Linux Crontab Shell脚本实现秒级定时任务的办法
- laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
- yii框架使用分页的方法分析
- Linux服务器间文件实时同步的实现
- TP3.2.3框架文件上传操作实例详解
- yii2.0框架场景的简单使用示例
- Laravel5.6框架使用CKEditor5相关配置详解
- 怎么在Linux中自定义bash命令提示符
- Hbase入门详解
- php使用curl模拟多线程实现批处理功能示例
- php实现的简单多进程服务器类完整示例
- Linux磁盘挂载、分区、扩容操作的实现办法
- PHP商品秒杀问题解决方案实例详解【mysql与redis】
- PHP设计模式之组合模式定义与应用示例