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

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

实现效果

代码实现

  • 必要的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)
      
    }
   }

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

相关推荐
sorryhc2 分钟前
【AI解读源码系列】ant design mobile——Avatar头像
前端·javascript·react.js
Mintopia10 分钟前
🎭 一场浏览器里的文艺复兴
前端·javascript·aigc
Mintopia10 分钟前
🎬《Next 全栈 CRUD 的百老汇》
前端·后端·next.js
AryaNimbus26 分钟前
你不知道的Cursor系列:如何使用Cursor同时开发多项目?
前端·ai编程·cursor
国家不保护废物30 分钟前
Function Call与MCP:给AI插上连接现实的翅膀
前端·aigc·openai
500佰30 分钟前
阿里Qoder AI 新开发工具,长期记忆、Wiki和Quest模式是它的独有特性
前端
Juchecar31 分钟前
Vue3 Class 和 Style 绑定详解
前端·vue.js
coding随想32 分钟前
揭秘DOM键盘事件:从基础到高级技巧全解析!
前端
xianxin_34 分钟前
CSS Position(定位)
前端
xianxin_35 分钟前
CSS Float(浮动)
前端