统计
  • 建站日期:2021-03-10
  • 文章总数:275 篇
  • 评论总数:115 条
  • 分类总数:21 个
  • 最后更新:9月4日
文章 技术代码

简单HTML+CSS+JS写出烟花效果

小椿
首页 技术代码 正文

效果

简单布局HTML结构
这里只用了一个最大的盒子div
其他的都是动态生成

<body>
    <div class="box"></div>
    <script src="./demo.js"></script>
    <script src="./index.js"></script>
    <script src="./use.js"></script>
</body>

设定CSS样式

<style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 这里给大盒子设定样式,设定宽高背景色、溢出隐藏、盒子阴影 相对定位*/
        .box {
            width: 1000px;
            height: 600px;
            margin: 10px auto;
            background: #000;
            border: 50px solid skyblue;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 5px 10px gray;
        }
        /* 这里给大的生成的li 设定样式 宽高 绝对定位 */
        .bigFire {
            width: 10px;
            height: 10px;
            position: absolute;
        }
        /*这里给往上“飞” 的小li设定样式 宽高 绝对定位 圆*/
        .smallFire {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            position: absolute;
        }
    </style>

JS代码

<script>
//这里是 ues.js 文件中的代码  主要是为了获取页面中的 节点  
//然后创建节点  调用入口函数
const oBox = document.querySelector('div');
const oFire = new Fire(oBox);
oFire.init();

</script>
//这里是 index.js 文件中的内容  主要实现功能
<script>
class Fire {
    constructor(element) {
        this.ele = element;
    }
    init() {
        this.setFire();
    }
    setFire() {
        this.ele.addEventListener('click', e => {
            let x = e.offsetX;
            let y = e.offsetY;
            if (x < 0) {
                x = 0;
            }
            if (y < 0) {
                y = 0;
            }
            if (x > 1000 - 10) {
                x = 1000 - 10;
            }
            if (y > 600 - 10) {
                y = 600 - 10;
            }

            const fUp = document.createElement('p');
            const fDown = document.createElement('p');
            fUp.className = 'bigFire';
            fDown.className = 'bigFire';
            let a = everColor();
            fUp.style.background = a;
            fDown.style.background = a;
            fDown.style.height = '20px';
            fUp.style.borderRadius = '50%';
            fDown.style.borderRadius = '50%';
            fDown.style.boxShadow = '0 0 5px 3px white';
            fUp.style.boxShadow = '0 0 5px 3px white';
            fUp.style.top = y + 'px';
            fUp.style.left = x + 'px';
            fDown.style.bottom = 0 + 'px';
            fDown.style.left = x + 'px';
            this.ele.appendChild(fDown);
            this.ele.appendChild(fUp);

            move(fDown, {
                top: y
            }, () => {
                this.ele.removeChild(fDown);
                this.ele.removeChild(fUp);

                let num = parseInt(Math.random() * (100 + 1 - 50) + 50);
                let arr = [];
                for (let i = 1; i <= num; i++) {
                    const lf = document.createElement('p');
                    lf.className = 'smallFire';
                    lf.style.background = everColor();
                    lf.style.left = x + 'px';
                    lf.style.top = y + 'px';
                    lf.style.boxShadow = '0px 0px 5px white'
                    this.ele.appendChild(lf);
                    arr.push(lf);
                    let coorX = parseInt(Math.random() * (x + 200 + 1 - (x - 200)) + (x - 200));
                    let coorY = parseInt(Math.random() * (y + 200 + 1 - (y - 200)) + (y - 200));

                    move(lf, {
                        left: coorX,
                        top: coorY
                    }, () => {
                        this.ele.removeChild(lf);
                        arr.splice(arr.indexOf(lf), 1);
                    })
                }
                let time = setInterval(() => {
                    if (arr.length === 0) {
                        clearInterval(time);
                    }
                }, 30)
            })
        })
    }
}
</script>

这是我自己封装的一个原生库 就是引入的demo.js文件
上面的函数中有用到其中一两个函数的 所以自己看着取

<script>
//1 获取参数
function getAdd() {
  var str = decodeURI(window.location.search).substr(1);
  var arr = str.split("&");
  var obj = {};
  arr.forEach(function (v) {
    arr1 = v.split("=");
    obj[arr1[0]] = arr1[1];
  });
  return obj;
}

//2 随机颜色
function everColor() {
  var str = "0123456789abcdef";
  var color = "#";
  for (var i = 1; i <= 6; i++) {
    var num = parseInt(Math.random() * str.length);
    color += str[num];
  }
  return color;
}
// 随机颜色
function evColor() {
  return `rgb(parseInt(Math.random() * 256), parseInt(Math.random() * 256), parseInt(Math.random() * 256))`;
}

//3 样式获取兼容
function myGetStyle(e, k) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(e)[k];
  } else {
    return e.currentStyle(style);
  }
}

//4, table 表格删除效果
function setTable() {
  var str = '';
  arr.forEach(function (v, k) {
    str += `
      <tr>
      <td>${k+1}</td>
      <td>${v.name}</td>
      <td>${v.sex}</td>
      <td>${v.age}</td>
      <td>${v.addr}</td>
      <td>${v.tel}</td>
      <td><button name ="del" index="${k}">删除</button></td>
      </tr>
  `
  })
  oTbody.innerHTML = str;
}

//5, 获取六位随机数
function setnum() {
  var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
  var vc = '';
  while (vc.length !== 6) {
    var num = parseInt(Math.random() * str.length);
    if (vc.indexOf(str[num]) === -1) {
      vc += str[num];
    }
  }
  return vc;
}

// 6,move运动函数
// 参数1:运动的标签对象
// 参数2:运动的属性和属性值 对象类型
// 参数3:运动终止,执行的回调函数 函数名称 / 匿名函数

function move(element, type, callback) {
  // 创建对象,存储不同属性的定时器
  let obj = {};
  // 循环遍历参数2,key存储的是运动css样式属性
  for (let key in type) {
    // 创建定时器,存储在对象中,属性是运动css样式属性,属性值是 setInterval() 的返回值,也就是定时器序号
    obj[key] = setInterval(() => {
      // 获取原始属性值
      // 如果是透明度,直接获取属性值,并且乘以 100
      // 不是透明度,去除px单位,获取数值部分
      let oldStyle = key === 'opacity' ? myGetStyle(element, key) * 100 : parseInt(myGetStyle(element, key));

      // 计算步长
      // 如果是透明度,原始属性值*100 - 初始属性值 / 次数
      // 不是透明度, 原始属性值 - 初始属性值 / 次数
      let speed = key === 'opacity' ? (type[key] * 100 - oldStyle) / 5 : (type[key] - oldStyle) / 5;

      // 步长取整
      // 正数 : 向上取整
      // 负数 : 向下取整
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

      // 初始值累加步长
      oldStyle += speed;

      // 将改变的初始值,赋值给标签对象
      // 如果是透明度, 改变的初始值/100 赋值
      // 如果不是透明度 , 改变的初始值 拼接 px 单位
      element.style[key] = key === 'opacity' ? oldStyle / 100 : `${oldStyle}px`;
      if (key === 'opacity') {
        if (oldStyle === type[key] * 100) {
          // 清除定时器
          clearInterval(obj[key]);
          // 删除对象中的对应的数据单元
          delete(obj[key]);
        }
      } else {
        // 判断改变的初始值 等于 最终位置
        if (oldStyle === type[key]) {
          // 清除定时器
          clearInterval(obj[key]);
          // 删除对象中的对应的数据单元
          delete(obj[key]);
        }
      }

      // 获取对象的所有键名,组成新的数组
      var arr = Object.keys(obj);
      // 如果数组长度为0,证明对象没有单元,所有定时器都清除
      if (arr.length === 0) {
        // 执行回调函数
        callback();
      }
    }, 50)
  }

}
</script>
版权声明 1 本站名称:乡野风情
2 本站网址:http://www.t35.cn/
3 本文网址:http://www.t35.cn/jsdm/259.html
4 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:550966987进行删除处理。
5 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
-- 展开阅读全文 --
js实现防抖节流
« 上一篇
彩色圆点气泡跟随 鼠标光标动画特效
下一篇 »

发表评论