(十二)原生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)
      
    }
   }

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

相关推荐
恋猫de小郭几秒前
用 AI 把一个五年前的 RN 项目,从 0.61.3 升级到 0.74.0 是一种什么样的体验
android·前端·react native
子洋8 分钟前
本地安装 QuickJS 与 入门示例
前端·javascript·后端
Mike_jia10 分钟前
Gogs:极简自建Git服务神器——从零构建企业级代码管理平台
前端
Ronin-Lotus11 分钟前
上位机知识篇---脚本文件
linux·前端·chrome·终端命令·脚本文件
前端小巷子21 分钟前
Vue computed 与 methods 的本质差异
前端·vue.js·面试
啃火龙果的兔子1 小时前
CSS 预处理器(Preprocessor)和后处理器(Postprocessor)
前端·css
懋学的前端攻城狮1 小时前
JavaScript作用域与闭包深度解析:从原理到实战
前端·javascript
晓得迷路了1 小时前
栗子前端技术周刊第 92 期 - TypeScript 5.9、pnpm 10.14、Vite 下载量超 Webpack...
前端·javascript·vite
我不吃饼干9 小时前
在 React 中实现倒计时功能会有什么坑
前端·react.js
小小小小宇9 小时前
前端PerformanceObserver
前端