[JAVASCRIPT]原生js实现自动滚动条

绝对不是因为看了今日校园的请假条,绝对不是!!!
本人每次进出校园都有正常请假哦!!!

原生js实现一个滚动条
index.html里面加一个容器

<div class="gundongtiao"></div>

js部分
首先我们获取到这个div

let gundongtiao = document.querySelector('.gundongtiao')

添加30个绿色小块块先

let v = `<div class="green-one"> <div class="gundong-green"></div> <div class="gundong-green2"></div> </div>`
      for (let i = 1; i <= 30; i++) {
   
        v += `<div class="green-one"> <div class="gundong-green"></div> <div class="gundong-green2"></div> </div>`
      }
      gundongtiao.innerHTML = v

现在把它们设置成三角形,再拼在一起成为菱形
css实现这部分内容

.gundongtiao {
   
        display: flex;
        position: absolute;
      }

.green-one {
   
        position: relative;
        display: flex;
        margin-right: 30px;
      }

.gundong-green {
   
        width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
        height: 0px;
        border-bottom: 15px solid #01d26d;
        border-left: 15px solid transparent; /*transparent 表示透明*/
        border-right: 15px solid transparent;
      }

.gundong-green2 {
   
        position: absolute;
        left: 14px;
        width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
        height: 0px;
        border-top: 15px solid #01d26d;
        border-left: 15px solid transparent; /*transparent 表示透明*/
        border-right: 15px solid transparent;
      }

现在让滚动条动起来
用setInterval实现

	  let timer // 定义一个timer作为计时器
      let style = gundongtiao.style // 获取这个div的style
      let num = 0 // num表示style里的left属性的值
      timer = setInterval(function () {
   
        style.left = `${
     num}px`
        num--
        if (num == -300) {
   
          num = 0
        }
      }, 25)

实现的效果:
动起来了

完整代码如下(装在一个html文件里就可以了,当然你想的话也可以分开)

<!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>
  </head>
  <body>
    <div class="gundongtiao"></div>

    <script> let gundongtiao = document.querySelector('.gundongtiao') let v = `<div class="green-one"> <div class="gundong-green"></div> <div class="gundong-green2"></div> </div>` for (let i = 1; i <= 30; i++) {
      v += `<div class="green-one"> <div class="gundong-green"></div> <div class="gundong-green2"></div> </div>` } gundongtiao.innerHTML = v let timer // 定义一个timer作为计时器 let style = gundongtiao.style // 获取这个div的style let num = 0 // num表示style里的left属性的值 timer = setInterval(function () {
      style.left = `${
       num}px` num-- if (num == -300) {
      num = 0 } }, 25) </script>
    <style> .gundongtiao {
      display: flex; position: absolute; } .green-one {
      position: relative; display: flex; margin-right: 30px; } .gundong-green {
      width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/ height: 0px; border-bottom: 15px solid #01d26d; border-left: 15px solid transparent; /*transparent 表示透明*/ border-right: 15px solid transparent; } .gundong-green2 {
      position: absolute; left: 14px; width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/ height: 0px; border-top: 15px solid #01d26d; border-left: 15px solid transparent; /*transparent 表示透明*/ border-right: 15px solid transparent; } </style>
  </body>
</html>

快复制下来试一试吧!!!