javascript实现烟花案例（内附源码）

于 2023-09-04 20:18:38 发布
阅读量282 收藏
点赞数 2
文章标签： javascript 开发语言 ecmascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tcugg/article/details/132676192
版权

案例介绍：

这个案例主要是我们点击盒子里的任意一个位置，相对于当前点击位置使Y轴为零向点击的位置做缓冲运动，到达点击位置后炸开又以当前位置随机生成小圆点向四周扩散到达位置后消失。

效果展示：

 代码实现：

1.先使用html和css将基本架构写出来

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 900px;
            height: 600px;
            background: black;
            border: 10px solid #ee11ff;
            margin: 50px auto;
            position: relative;
        }

        .smallBox {
            width: 10px;
            height: 10px;
            background-color: aqua;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- <div class="smallBox"></div> -->
    </div>
</body>

</html>

效果：

css可以根据自己的的喜好来设置

2.封装我们需要使用到的方法

1.缓冲运动

/* 
 封装缓冲运动 
 @params {Object} ele 表示运动的元素
 @params {Object}  options 表示需要改变的属性和目标组成的对象
 @params {Function}  callback 表示回调函数
*/
 function animateHc(ele, options, callback) {
    for (let key in options) {
        // 清除定时器
        clearInterval(ele[key])
        // 在元素本身上面定义属性 接收定时器
        ele[key] = setInterval(() => {
            let beigin = parseInt(getStyle(ele, key))
            let step = (options[key] - beigin) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            let res = beigin + step
            ele.style[key] = res + 'px' 
            if (res == options[key]) {
                clearInterval(ele[key])
                callback && callback()
            }
        }, 30)
    }
}

2.获取随机数

//获取区间随机数
 function randomNum(a,b){
    var max = Math.max(a,b)
    var min = Math.min(a,b)
    return Math.floor(Math.random()*(max-min+1))+min
 }

3.获取元素样式

/* 
   获取元素的样式
 @params {Object} ele 表示元素
 @params {String}  attr 表示样式
*/
 function getStyle(ele, attr) {
     if (window.getComputedStyle) {
         return getComputedStyle(ele, null)[attr]
     } else {
         return ele.currentStyle[attr]
     }
 }

4.获取随机颜色

//  获取随机颜色
 function getColor(){
    return `rgb(${randomNum(0,255)},${randomNum(0,255)},${randomNum(0,255)})`
 }

3.需求实现

1.获取元素

这里我们只需要获取box就行

var box = document.querySelector('.box')

2.点击box随机位置在X轴上生成一个小的box

box.onclick = (e) => {
                var e = e || window.event
                var x = e.offsetX
                var y = e.offsetY
                var div = document.createElement('div')
                div.className = 'smallBox'
                div.style.left = x + 'px'
                div.style.backgroundColor = getColor()
                box.appendChild(div)
}

 效果：

3.让小的box做缓冲运动移动到点击位置并消失后随机生成30~50个一样大小的小方块设置样式圆角50%变为小圆圈

animateHc(div, { top: y }, () => {
                    div.remove()
                    var num = randomNum(30, 50)
                    var arr = []
                    var frag = document.createDocumentFragment()
                    //创建文档碎片优化性能
                    for (var i = 0; i <= num; i++) {
                        var p = document.createElement('p')
                        p.className = 'smallBox'
                        p.style.left = x + 'px'
                        p.style.top = y + 'px'
                        p.style.backgroundColor = getColor()
                        p.style.borderRadius = '50%'
                        frag.appendChild(p)
                        arr.push(p)
                    }
}

效果：

4.最后遍历这30~50个小圆圈并随机生成位置让小圆圈向那个位置坐缓冲运动，到达位置后消失

arr.forEach((it) => {
                        animateHc(it, {
                            left: randomNum(0, box.clientWidth),
                            top: randomNum(0, box.clientHeight)
                        }, () => {
                            it.remove()
                        })
                    })

所有需求已实现，完成案例

效果展示：

源码：

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 900px;
            height: 600px;
            background: black;
            border: 10px solid #ee11ff;
            margin: 50px auto;
            position: relative;
        }

        .smallBox {
            width: 10px;
            height: 10px;
            background-color: aqua;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
    <script src="../js/tool.js"></script>
</head>

<body>
    <div class="box">
        <!-- <div class="smallBox"></div> -->
    </div>

    <script>
        var box = document.querySelector('.box')

        init()

        function init() {
            handleClick()
        }

        function handleClick() {
            box.onclick = (e) => {
                var e = e || window.event
                var x = e.offsetX
                var y = e.offsetY
                var div = document.createElement('div')
                div.className = 'smallBox'
                div.style.left = x + 'px'
                div.style.backgroundColor = getColor()
                box.appendChild(div)
                animateHc(div, { top: y }, () => {
                    div.remove()
                    var num = randomNum(30, 50)
                    var arr = []
                    var frag = document.createDocumentFragment()
                    //创建文档碎片优化性能
                    for (var i = 0; i <= num; i++) {
                        var p = document.createElement('p')
                        p.className = 'smallBox'
                        p.style.left = x + 'px'
                        p.style.top = y + 'px'
                        p.style.backgroundColor = getColor()
                        p.style.borderRadius = '50%'
                        frag.appendChild(p)
                        arr.push(p)
                    }
                    box.appendChild(frag)
                    arr.forEach((it) => {
                        animateHc(it, {
                            left: randomNum(0, box.clientWidth),
                            top: randomNum(0, box.clientHeight)
                        }, () => {
                            it.remove()
                        })
                    })
                })
            }
        }

    </script>
</body>

</html>

tool.js文件

/* 
 封装缓冲运动 
 @params {Object} ele 表示运动的元素
 @params {Object}  options 表示需要改变的属性和目标组成的对象
 @params {Function}  callback 表示回调函数
*/
 function animateHc(ele, options, callback) {
    for (let key in options) {
        // 清除定时器
        clearInterval(ele[key])
        // 在元素本身上面定义属性 接收定时器
        ele[key] = setInterval(() => {
            let beigin = parseInt(getStyle(ele, key))
            let step = (options[key] - beigin) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            let res = beigin + step
            ele.style[key] = res + 'px' 
            if (res == options[key]) {
                clearInterval(ele[key])
                callback && callback()
            }
        }, 30)
    }
}

/* 
   获取元素的样式
 @params {Object} ele 表示元素
 @params {String}  attr 表示样式
*/
 function getStyle(ele, attr) {
     if (window.getComputedStyle) {
         return getComputedStyle(ele, null)[attr]
     } else {
         return ele.currentStyle[attr]
     }
 }

 //获取区间随机数
 function randomNum(a,b){
    var max = Math.max(a,b)
    var min = Math.min(a,b)
    return Math.floor(Math.random()*(max-min+1))+min
 }

//  获取随机颜色
 function getColor(){
    return `rgb(${randomNum(0,255)},${randomNum(0,255)},${randomNum(0,255)})`
 }

觉得博主写的不错的点点关注点点赞！！！谢谢

tangy_q__
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值