2022-04-30 js点击事件实现烟花效果

原创

已于 2022-05-20 19:52:37 修改 · 625 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #class #构造函数 #原型对象 #prototype

于 2022-04-30 23:16:07 首次发布

本文介绍了如何使用JavaScript实现点击事件触发的烟花效果。当用户在背景中点击鼠标时，烟花将在点击位置升起，到达点击高度后绽放。烟花的颜色完全随机生成，为页面带来动态的视觉体验。

需求

在背景中任意点击鼠标,对应的横坐标位置有烟花上升,
一直上升到鼠标点击位置后炸开,
烟花颜色完全随机

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  #container {
   
   
    width: 80%;
    height: 600px;
    border: 1px red solid;
    position: relative;
    margin: 20px auto;
    cursor: pointer;
    background: black;
  }

  .fire {
   
   
    background: red;
    position: absolute;
    /* 设置bottom时,top获取为最大值,减去鼠标点击位置 */
    bottom: 0px;
    width: 6px;
    height: 6px;

  }

  .small-fire {
   
   
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 50%;
  }
</style>

<body>
  <div id="container">

  </div>
  <script>
    // 1 给div绑定点击事件
    function Fire() {
   
   
      this.con = document