代码雨效果

最新推荐文章于 2024-09-12 16:25:48 发布

HAI6545

最新推荐文章于 2024-09-12 16:25:48 发布

阅读量128

点赞数 1

分类专栏： JavaScript案例文章标签： css html javascript

本文链接：https://blog.csdn.net/HAI6545/article/details/122414701

版权

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏

<!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>代码雨demo</title>
</head>
<style>
  * {
    padding: 0px;
    margin: 0px;
  }

  body,
  html {
    width: 100%;
    height: 100%;
  }

  #libao {
    width: fit-content;
    height: 100%;
    display: flex;
    font-size: 10px;
    background: #000;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }

  span {
    min-width: 15px;
    /* 栅栏格最小宽度 */
    font-size: 10px;
    color: #58bc5b;
    position: relative;
  }

  p {
    width: 100%;
    position: absolute;
    text-align: center;
  }

  .color6 {
    color: #58bc5b;
  }

  .color5 {
    color: #58bc5bd6;
  }

  .color4 {
    color: #58bc5ba8;
  }

  .color3 {
    color: #58bc5b60;
  }

  .color2 {
    color: #58bc5b28;
  }

  .color1 {
    color: #58bc5b10;
  }
</style>

<body>
  <div id="libao">
  </div>
  
</body>

</html>
<script>
  // 先拿到视窗宽高 - 供：创建多少栏和下坠高度使用
  let windowWidth = document.documentElement.offsetWidth
  let windowHeight = document.documentElement.offsetHeight

  // -> 创建栅栏格(让代码规范一条条重上往下坠) - window.onload 即为文档加载完后执行
  window.onload = () => {
    // 寻找到根节点
    let libao = document.getElementById('libao')
    let max = 0 // 创建了多少条
    // 创建间隔器 - 用来重复循环创建,当创满了后中断删除
    let times = setInterval(() => {
      var span = document.createElement('span') // 创建span标签
      span.className = 'span' + max++ // 添加独立class名字
      libao.appendChild(span) // 在节点添加栅栏格

      // 添加过后拿到节点宽度判断是否已超过视窗宽度
      if (libao.clientWidth > windowWidth) {
        clearInterval(times) // 清除间隔器 
        libao.removeChild(span) // 删除多余的栅栏格
        libao.style.width = '100%' // 将节点变为百分百,让它元素下面的p标签通过弹性盒模型自动分配宽度
        // 随机选择栅栏
        this.choice(max)
      }
    }, 5); // 这个10可删除(, 10 - 包括删除,) - 一下子完成
  }


  // -> 随机选择栅栏 
  function choice(max) {
    // Math.floor 结合 Math.random() * X, 只会得到 X - 1 的数, 所以这里要加上1
    // 原因: 随机出来的是X~Y 之 间的数, 所以Math.floor向下取整只会拿到 X-1 的数
    setInterval(() => {
      let num = Math.floor(Math.random() * max + 1)
      let libaoChild = document.getElementsByClassName('span' + num)[0]
      // 随机字体
      if (libaoChild) this.randomWord(libaoChild)
    }, 50)
  }


  // 随机字体
  function randomWord(libaoChild) {
    let pxs = 0 // 记录到几px了
    let height = 0 // 记录高度
    let randomWords = setInterval(() => {
      let p = document.createElement('p') // 创建代码块
      p.innerHTML = String.fromCharCode(65 + (Math.ceil(Math.random() * 25))) //随机生成数字后转字母
      p.style.top = pxs + 'px' // 设置盒子(代码)显示位置
      libaoChild.appendChild(p) // 添加盒子
      pxs += 12 // 累计高度

      // 判断是不是超出了可视距离
      if (pxs > windowHeight) {
        libaoChild.removeChild(p) // 删除多余的字体盒子
        clearInterval(randomWords) // 清除间隔器
      } else {
        // 变换颜色与删除本体
        this.change(p, libaoChild)
      }
      // 随机字体出现间隔数度
    }, 100);
  }


  // 变换颜色与删除本体
  function change(p, libaoChild) {
    let i = 6 // 最大字体颜色,需css支持
    let changes = setInterval(() => {
      p.className = 'color' + i-- // 添加相class名字, 如color6、color5、color4.....
      // 判断是否字体配置最后结束
      if (i < 0) {
        libaoChild.removeChild(p) // 删除结束字体盒子
        clearInterval(changes) // 清除间隔器
        changes = null // 控控清除间隔器
      }
    }, 200);
  }
</script>

HAI6545

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
代码雨效果

<!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>代码雨demo&l.
复制链接

扫一扫