(十二)原生js案例之跳舞的小方块

风清云淡_A2024-07-20 21:48

鼠标点击，小方块掉落下来，再次点击全部返回原来的位置，再随意点击，小方块上下来回运动

实现效果

代码实现

必要的css

css 复制代码

.box{
      width: 50px;
      height: 50px;
      background-color: #964DDD;
      margin-right: 10px;
      position: absolute;
      top:10px;
      color: #fff;
      text-align: center;
      line-height: 50px;
    }

逻辑实现

js 复制代码

window.onload = function(){
    let str = ''
    for (var i = 0; i < 20; i++) {
        str += `<div class="box" style="left:${60*i+10}px">${i+1}</div>`
    }
    document.body.innerHTML = str

   // 获取所有div元素
   let boxs = document.getElementsByClassName('box')
    let num = 0,timer = null,isFlag = false
    document.onclick = function(e){
      isFlag = !isFlag
      clearInterval(timer)
      timer = setInterval(function(){
        doMove(boxs[num],'top',20,isFlag ? 300:10)
        isFlag ? num++ : num--
        if(num==boxs.length || num < 0){
          clearInterval(timer)
          isFlag ? num = boxs.length-1 : num = 0
        }
      },100)
      
    }
   }

可以拓展下，做成合适的业务功能