用JavaScript实现烟花效果

你猜啊~~

已于 2022-10-09 18:00:37 修改

阅读量4.1k

点赞数 1

文章标签： javascript

于 2022-04-23 19:27:54 首次发布

本文链接：https://blog.csdn.net/qq_50721840/article/details/124368716

版权

要实现烟花效果之前，我们先得将body的背景设为黑色，这样烟花的效果才能更加明显，下面附上两种烟花效果的代码：

1、自由散落效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 10px;
            height: 10px;
            position: absolute;
        }
        html,body{
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body bgcolor="#000">
    
</body>
</html>
<script src="./animation.js"></script>
<script>
    //思路
    //给body加点击事件
    document.onclick = function(e){
         e = e || window.event
         let mouseX = e.clientX
         let mouseY = e.clientY
         //在底部生成一个div 颜色随机的 x轴 鼠标点击的x轴 y轴为屏幕高度
         let box = createdDiv()
         box.style.top  = window.innerHeight + "px" //窗口高度
         box.style.left = mouseX + 'px'
         document.body.appendChild(box)//添加给对应的body
         //控制div从底部到达鼠标点击的y轴位置
         animated(box,{"top":mouseY},function(){
            //在这个回调里面 原本的div删除 生成更多的div（颜色随机） 位置为鼠标点击的位置 这些div做抛物线运动
            box.remove()
            //随机个数
            let count = randomNumber(15,20)
            for(let i=0;i<count;i++){
                let div = createdDiv()
                // 位置为鼠标点击的位置 
                div.style.top  = mouseY + "px"
                div.style.left = mouseX + 'px'
                document.body.appendChild(div)//添加给对应的body
                //定时器控制div的运动
                //记录了四个象限
                // let arr = [{x:randomNumber(-20,-1),y:randomNumber(1,20)},
                // {x:randomNumber(1,20),y:randomNumber(1,20)},
                // {x:randomNumber(-20,-1),y:randomNumber(-20,-1)},
                // {x:randomNumber(1,20),y:randomNumber(-20,-1)}]
                //随机得到一个象限
                // let stepPoint = arr[randomNumber(0,3)]
                // 得到一个随机数来控制x和y 正负
                let x = randomNumber(0,1)==0?randomNumber(1,20):randomNumber(1,20)*-1
                let y = randomNumber(0,1)==0?randomNumber(1,20):randomNumber(1,20)*-1
                let stepPoint = {x,y}
                let stepY = stepPoint.y //取出y值
                let timer = setInterval(()=>{
                    //得到当前位置
                    let currentX = parseFloat(div.style.left)
                    let currentY= parseFloat(div.style.top)
                    stepY++
                    div.style.top  = currentY + stepY + "px"
                    div.style.left = currentX + stepPoint.x + 'px'
                    //等div的x轴到达0或者x到达屏幕的宽度 或者 y轴到达0 或者y到达屏幕高度的时候 
                    //停止运动 清除div
                    if(currentX<=0 || currentX>= window.innerWidth || currentY <= 0 || currentY >= window.innerHeight){
                        clearInterval(timer)
                        div.remove()
                    }

                },10)
            }
         },40)
    }
    // 生成随机颜色
    function randomColor(min,max){
        let r = randomNumber(min,max)
        let g = randomNumber(min,max)
        let b = randomNumber(min,max)
        return `rgb(${r},${g},${b})`
    }
    //生成区间内容随机数
    function randomNumber(min,max){
        return Math.round(Math.random()*(max-min))+min
    }
    //生成div给定对应的颜色和位置
    function createdDiv(){
        let div = document.createElement('div')
        div.className = 'box'
        div.style.backgroundColor = randomColor(100,250)
        return div
    }
</script>

2、圆形效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 20px;
            height: 20px;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>
<body bgcolor="#000">
    
</body>
<script src="./animatedPlus.js"></script>
<script>
    //思路
    //点击生成一个对应的div 定位放在底下
    document.onclick = function(e){
        e = e || window.event
        //获取点击的位置
        let mouseY = e.clientY
        let mouseX = e.clientX
        let box = createdDiv(mouseX,window.innerHeight - 20)//定位在底部
        document.body.appendChild(box) //将创建的div添加到body中
        //控制生成的div 升上去
        animated(box,{"top":mouseY},function(){
            //回调里面 这个div消失 生成多个div
            box.remove() //将自己移除
            //生成多个div
            let count = randomNumber(12,18) //随机生成个数
            //定义半径 
            let r = randomNumber(250,500) //随机生成半径
            for(let i=1;i<=count;i++){ //遍历
                let div = createdDiv(mouseX,mouseY)//重叠在一块 设置div的位置
                document.body.appendChild(div) //添加到body中
                //目标位置 Math.PI 为180deg
                let targetX = Math.ceil(Math.cos(2*Math.PI/count*i)*r+ parseFloat(div.style.left))
                let targetY = Math.ceil(Math.sin(2*Math.PI/count*i)*r+ parseFloat(div.style.top))
                //让这个多个div的位置发生变化
                animated(div,{"left":targetX,"top":targetY},function(){
                    div.remove() //移除元素
                })
            }
        })
    }
     // 生成随机颜色
     function randomColor(min,max){
        let r = randomNumber(min,max)
        let g = randomNumber(min,max)
        let b = randomNumber(min,max)
        return `rgb(${r},${g},${b})`
    }
    //生成区间内容随机数
    function randomNumber(min,max){
        return Math.round(Math.random()*(max-min))+min
    }
    //生成div给定对应的颜色和位置
    function createdDiv(x,y){
        let div = document.createElement('div')
        div.className = 'box'
        div.style.backgroundColor = randomColor(100,250)
        div.style.left = x + 'px'
        div.style.top = y + 'px'
        return div
    }
</script>
</html>

animation.js文件

    //方法封装
    function animated(element,targetObject,callback,speed){//element 变化的元素  传入目标对象 targetObject callback 回调函数
        clearInterval(element.timer)
        speed = typeof speed =='number'?speed:0
        //遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100,opacity":1,"zIndex":1}
        element.timer = setInterval(()=>{
            let flag = true 
            for(let key in targetObject){
              let current = parseFloat(getStyle(element,key))
              let step = 0
              let setValue
              //判断传进来的值
              if(key=="opacity"){//如果是opacity是使用下面这个
                  //不需要px作为单位
                  //目标元素 targetObject[key]  当前的值 Number(getStyle(element,key)) 步长 
                  step = (parseFloat(targetObject[key])*100-current*100)/10//保证最终达到目标位置
              }
              if(key!="opacity" && key!="zIndex"){ //height width left top
                  step = (targetObject[key]-current)/10
              }
                step = step > 0 ?Math.ceil(step):Math.floor(step)
              if(key=="opacity"){
                setValue = (current*100+step)/100
              }else{
                setValue = current+step+'px'
              }
              element.style[key] = setValue
              if(key=="zIndex"){//如果是层高 直接设置 
                element.style[key] = targetObject[key]
              }
              if(parseFloat(getStyle(element,key))!=targetObject[key]){//如果某个没有设置完
                    flag = false
              }
            }
            if(flag){
                clearInterval(element.timer)
                typeof callback =='function'?callback():console.log("");
            }
        },speed)
        //callback是所有的这个函数里面所有的事情做完以后做的事情
    }
    //获取样式的值
    function getStyle(element,attr){ //需要获取样式的对象  样式的名字
        // window.getComputedStyle(element,null)[attr]
        // element.currentStyle ie的兼容写法
        //获取样式对象
        var style = window.getComputedStyle?window.getComputedStyle(element,null):element.currentStyle
        return style[attr]
    }
    // 封装一个方法 用于获取滚动栏离顶部的距离和离最左距离
    function myScoll(){
        //如果没有滚动栏
        if(window.pageYOffset!=null){
            return {"left":window.pageXOffset,"top":window.pageYOffset}
        }
        //获取top值
        let top = document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop
        //获取left值
        let left = document.body.scrollLeft?document.body.scrollLeft:document.documentElement.scrollLeft
        //再返回
        return {left,top}
    }

animatedPlus.js文件

    //方法封装
    function animated(element,targetObject,callback,speed){//element 变化的元素  传入目标对象 targetObject callback 回调函数
        clearInterval(element.timer)
        if(typeof speed !='number'){
            speed = Number(speed)
            if(isNaN(speed)){
                speed = 0
            }
        }
        //遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100,opacity":1,"zIndex":1}
        element.timer = setInterval(()=>{
            let flag = true 
            for(let key in targetObject){
              let current = parseFloat(getStyle(element,key))
              let step = 0
              //判断传进来的值
              if(key=="opacity"){//如果是opacity是使用下面这个
                  //不需要px作为单位
                  //目标元素 targetObject[key]  当前的值 Number(getStyle(element,key)) 步长 
                  step = (targetObject[key]*100-current*100)/10 //保证最终达到目标位置
                  element.style[key] = (current*100+step)/100
              }
              if(key=="zIndex"){//如果是层高 直接设置 
                 element.style[key] = targetObject[key]
              }
              if(key!="opacity" && key!="zIndex"){ //height width left top
                step = (targetObject[key]-current)/10>0?Math.ceil((targetObject[key]-current)/10):Math.floor((targetObject[key]-current)/10)
                element.style[key] = current+step+'px'
              }
              if(parseFloat(getStyle(element,key))!=targetObject[key]){//如果某个没有设置完
                    flag = false
              }
            }
            if(flag){
                clearInterval(element.timer)
                //执行对应的callback
                if(typeof callback =='function'){//如果你是个函数
                    //执行这个函数
                    callback()
                }
            }
        },speed)
        //callback是所有的这个函数里面所有的事情做完以后做的事情
    }
    //获取样式的值
    function getStyle(element,attr){ //需要获取样式的对象  样式的名字
        // window.getComputedStyle(element,null)[attr]
        // element.currentStyle ie的兼容写法
        //获取样式对象
        var style = window.getComputedStyle?window.getComputedStyle(element,null):element.currentStyle
        return style[attr]
    }
    // 封装一个方法 用于获取滚动栏离顶部的距离和离最左距离
    function myScoll(){
        //如果没有滚动栏
        if(window.pageYOffset!=null){
            return {"left":window.pageXOffset,"top":window.pageYOffset}
        }
        //获取top值
        let top = document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop
        //获取left值
        let left = document.body.scrollLeft?document.body.scrollLeft:document.documentElement.scrollLeft
        //再返回
        return {left,top}
    }

你猜啊~~

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
用JavaScript实现烟花效果

要实现烟花效果之前，我们先得将body的背景设为黑色，这样烟花的效果才能更加明显，下面附上两种烟花效果的代码： 1、自由散落效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name...
复制链接

扫一扫