web APIs-练习二

Dowen002023-07-31 17:34

轮播图点击切换：

复制代码 
<!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>轮播图点击切换</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .slider {
            width: 560px;
            height: 400px;
            overflow: hidden;
        }

        .slider-wrapper {
            width: 100%;
            height: 320px;
        }

        .slider-wrapper img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .slider-footer {
            height: 80px;
            background-color: rgb(100, 67, 68);
            padding: 12px 12px 0 12px;
            position: relative;
        }

        .slider-footer .toggle {
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }

        .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        .slider-footer .toggle button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .slider-footer p {
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .slider-indicator {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }

        .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }

        .slider-indicator li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="./images/slider01.jpg" alt="" />
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了？</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>
    <script>
        // 1. 初始数据
        const sliderData = [
            { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
            { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
            { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
            { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
            { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
            { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
            { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
            { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
        ]
        let i = 0
        const img = document.querySelector('.slider-wrapper img')
        const p = document.querySelector('.slider-footer p')
        const footer = document.querySelector('.slider-footer')
        // 自动播放模块
        let timerId = setInterval(function () {
            next.click()
        }, 1000)

        // 按钮：向后跳
        const next = document.querySelector('.next')
        next.addEventListener('click', function () {
            i++
            i = i >= sliderData.length ? 0 : i
            toggle()
        })

        // 按钮：向前跳
        const prev = document.querySelector('.prev')
        prev.addEventListener('click', function () {
            i--
            i = i < 0 ? sliderData.length - 1 : i
            toggle()
        })

        // 共同部分
        function toggle() {
            i = i >= sliderData.length ? 0 : i
            img.src = sliderData[i].url
            p.innerHTML = sliderData[i].title
            footer.style.backgroundColor = sliderData[i].color
            document.querySelector('.slider-indicator .active').classList.remove('active')
            document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
        }

        // 鼠标经过 停止定时器
        const slider = document.querySelector('.slider')
        slider.addEventListener('mouseenter', function () {
            clearInterval(timerId)
        })

        // 鼠标离开 开始定时器
        slider.addEventListener('mouseleave', function () {
            clearInterval(timerId)
            timerId = setInterval(function () {
                // 利用js自动调用点击事件  click()  一定加小括号调用函数
                next.click()
            }, 1000)
        })

    </script>
</body>

</html>

随机点名：

复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }

        .qs {

            width: 450px;
            height: 40px;
            color: red;

        }

        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        let timerId = 0
        let random = 0
        const qs = document.querySelector('.qs')
        const start = document.querySelector('.start')
        start.addEventListener('click', function () {
            timerId = setInterval(function () {
                random = parseInt(Math.random() * arr.length)
                qs.innerHTML = arr[random]
            }, 30)
            if (arr.length === 1) {
                start.disabled = end.disabled = true
            }
        })

        const end = document.querySelector('.end')
        end.addEventListener('click', function () {
            clearInterval(timerId)
            arr.splice(random, 1)
        })

    </script>
</body>

</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>小米搜索框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {

            list-style: none;
        }

        .mi {
            position: relative;
            width: 223px;
            margin: 100px auto;
        }

        .mi input {
            width: 223px;
            height: 48px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            border: 1px solid #e0e0e0;
            outline: none;
        }

        .mi .search {
            border: 1px solid #ff6700;
        }

        .result-list {
            display: none;
            position: absolute;
            left: 0;
            top: 48px;
            width: 223px;
            border: 1px solid #ff6700;
            border-top: 0;
            background: #fff;
        }

        .result-list a {
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;
        }

        .result-list a:hover {
            background-color: #eee;
        }
    </style>

</head>

<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
    </div>
    <script>
        const input = document.querySelector('[type=search]')
        const ul = document.querySelector('.result-list')
        input.addEventListener('focus', function () {
            ul.style.display = 'block'
            input.classList.add('search')
        })
        input.addEventListener('blur', function () {
            ul.style.display = 'none'
            input.classList.remove('search')
        })

    </script>
</body>

</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>评论回车发布</title>
  <style>
    .wrapper {
      min-width: 400px;
      max-width: 800px;
      display: flex;
      justify-content: flex-end;
    }

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      background: url(./images/avatar.jpg) no-repeat center / cover;
      margin-right: 20px;
    }

    .wrapper textarea {
      outline: none;
      border-color: transparent;
      resize: none;
      background: #f5f5f5;
      border-radius: 4px;
      flex: 1;
      padding: 10px;
      transition: all 0.5s;
      height: 30px;
    }

    .wrapper textarea:focus {
      border-color: #e4e4e4;
      background: #fff;
      height: 50px;
    }

    .wrapper button {
      background: #00aeec;
      color: #fff;
      border: none;
      border-radius: 4px;
      margin-left: 10px;
      width: 70px;
      cursor: pointer;
    }

    .wrapper .total {
      margin-right: 80px;
      color: #999;
      margin-top: 5px;
      opacity: 0;
      transition: all 0.5s;
    }

    .list {
      min-width: 400px;
      max-width: 800px;
      display: flex;
    }

    .list .item {
      width: 100%;
      display: flex;
    }

    .list .item .info {
      flex: 1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;
    }

    .list .item p {
      margin: 0;
    }

    .list .item .name {
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }

    .list .item .text {
      color: #333;
      padding: 10px 0;
    }

    .list .item .time {
      color: #999;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
  </div>
  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>
  <div class="list">
    <div class="item" style="display: none;">
      <i class="avatar"></i>
      <div class="info">
        <p class="name">清风徐来</p>
        <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
        <p class="time">2022-10-10 20:29:21</p>
      </div>
    </div>
  </div>
  <script>
    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    const item = document.querySelector('.item')
    const text = document.querySelector('.text')
    // 1. 当我们文本域获得了焦点，就让 total 显示出来
    tx.addEventListener('focus', function () {
      total.style.opacity = 1
    })
    // 2. 当我们文本域失去了焦点，就让 total 隐藏出来
    tx.addEventListener('blur', function () {
      total.style.opacity = 0
    })
    // 3. 检测用户输入
    tx.addEventListener('input', function () {
      // console.log(tx.value.length)  得到输入的长度
      total.innerHTML = `${tx.value.length}/200字`
    })

    // 4. 按下回车发布评论
    tx.addEventListener('keyup', function (e) {
      // 只有按下的是回车键，才会触发
      // console.log(e.key)
      if (e.key === 'Enter') {
        // 如果用户输入的不为空就显示和打印
        if (tx.value.trim()) {
          // console.log(11)
          item.style.display = 'block'
          // console.log(tx.value)  // 用户输入的内容
          text.innerHTML = tx.value

        }
        // 等我们按下回车，结束，清空文本域
        tx.value = ''
        // 按下回车之后，就要把 字符统计 复原
        total.innerHTML = '0/200字'
      }

    })
  </script>
</body>

</html>

tab栏切换：

复制代码 
<!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>tab栏切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tab {
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }

    .tab-nav {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }

    .tab-nav h3 {
      font-size: 24px;
      font-weight: normal;
      margin-left: 20px;
    }

    .tab-nav ul {
      list-style: none;
      display: flex;
      justify-content: flex-end;
    }

    .tab-nav ul li {
      margin: 0 20px;
      font-size: 14px;
    }

    .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }

    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }

    .tab-content {
      padding: 0 16px;
    }

    .tab-content .item {
      display: none;
    }

    .tab-content .item.active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;">精选</a></li>
        <li><a href="javascript:;">美食</a></li>
        <li><a href="javascript:;">百货</a></li>
        <li><a href="javascript:;">个护</a></li>
        <li><a href="javascript:;">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
      <div class="item"><img src="./images/tab01.png" alt="" /></div>
      <div class="item"><img src="./images/tab02.png" alt="" /></div>
      <div class="item"><img src="./images/tab03.png" alt="" /></div>
      <div class="item"><img src="./images/tab04.png" alt="" /></div>
    </div>
  </div>
  <script>
    // 1. a 模块制作 要给 5个链接绑定鼠标经过事件
    // 1.1 获取 a 元素 
    const as = document.querySelectorAll('.tab-nav a')
    // console.log(as) 
    for (let i = 0; i < as.length; i++) {
      // console.log(as[i])
      // 要给 5个链接绑定鼠标经过事件
      as[i].addEventListener('mouseenter', function () {
        // console.log('鼠标经过')
        // 排他思想  
        // 干掉别人 移除类active
        document.querySelector('.tab-nav .active').classList.remove('active')
        // 我登基 我添加类 active  this 当前的那个 a 
        this.classList.add('active')

        // 下面5个大盒子 一一对应  .item 
        // 干掉别人
        document.querySelector('.tab-content .active').classList.remove('active')
        // 对应序号的那个 item 显示 添加 active 类
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')

      })
    }
  </script>
</body>

</html>

个人注册-同意协议：

复制代码 
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>个人注册</title>
  <link rel="stylesheet" href="./css/7.3/common.css" />
  <link rel="stylesheet" href="./css/7.3/index.css" />
  <link rel="icon" href="./images/7.3/favicon.ico" />
</head>

<body>
  <div class="register py-container">
    <!--head-->
    <div class="logoArea">
      <a href="home.html" class="logo"></a>
    </div>
    <!--register-->
    <div class="registerArea">
      <h3>
        注册新用户<span class="go">我有账号，去<a href="login.html">登陆</a></span>
      </h3>
      <div class="info">
        <form class="sui-form form-horizontal">
          <div class="control-group">
            <label class="control-label">用户名：</label>
            <div class="controls">
              <input type="text" class="input-xfat input-xlarge" placeholder="用户名" />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">邮箱：</label>
            <div class="controls">
              <input type="text" class="input-xfat input-xlarge" placeholder="邮箱" />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">登录密码：</label>
            <div class="controls">
              <input type="password" class="input-xfat input-xlarge" placeholder="设置登录密码" />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">确认密码：</label>
            <div class="controls">
              <input type="password" class="input-xfat input-xlarge" placeholder="再次确认密码" />
            </div>
          </div>
          <div class="control-group">
            <span class="control-label">&nbsp;</span>
            <label class="controls">
              <input id="agree" name="m1" type="checkbox" checked />
              <span>同意协议并注册《品优购用户协议》</span>
            </label>
          </div>
          <div class="control-group">
            <span class="control-label"></span>
            <div class="controls btn-reg">
              <button id="registerBtn" class="sui-btn btn-block btn-xlarge btn-danger" href="#">
                完成注册
              </button>
            </div>
          </div>
        </form>
        <div class="clearfix"></div>
      </div>
    </div>
    <!--foot-->
    <div class="py-container copyright">
      <ul>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">联系客服</a></li>
        <li><a href="#">商家入驻</a></li>
        <li><a href="#">营销中心</a></li>
        <li><a href="#">手机品优购</a></li>
        <li><a href="#">销售联盟</a></li>
        <li><a href="#">品优购社区</a></li>
        <li><a href="#">品优购公益</a></li>
        <li><a href="#">English Site</a></li>
        <li><a href="#">Contact U</a></li>
      </ul>
      <div class="address">
        地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
        电话：400-618-4000 传真：010-82935100
      </div>
      <div class="beian">京ICP备08001421号京公网安备110108007702</div>
    </div>
  </div>
  <script>
    // 思路
    // 1. 获取元素  复选框  和  按钮 
    const agree = document.querySelector('#agree')
    const registerBtn = document.querySelector('#registerBtn')
    // 2. 给按钮注册点击事件
    agree.addEventListener('click', function () {
      // 2.1 如果复选框选中，按钮就启用，如果复选框不选中，按钮就禁用
      // console.log(this.checked)  // 没有选中是false
      // console.log(registerBtn.disabled) 
      // registerBtn.disabled = true
      // 2.2 注意， 复选框选中是true， 按钮启用 disable 是false，是相反的要小心哦
      registerBtn.disabled = !this.checked
    })
    // 2.1 如果复选框选中，按钮就启用，如果复选框不选中，按钮就禁用


  </script>
</body>

</html>

仿京东显示隐藏密码：

复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box label {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
            height: 24px;
            background-color: pink;
            cursor: pointer;
            background: url(./images/close.png) no-repeat;
            background-size: cover;
        }

        .box label.active {
            background-image: url(./images/open.png);
        }
    </style>
</head>

<body>
    <div class="box">
        <label for=""></label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        // 1. 获取元素  label 和 input 
        const label = document.querySelector('label')
        const input = document.querySelector('input')
        // 2. 给label 注册事件， 可以切换类实现图片的切换
        // 声明一个变量来控制
        let flag = true
        label.addEventListener('click', function () {
            this.classList.toggle('active')
            // 3. 因为要修改input的 type属性 text和password，可以使用一个变量来控制  flag ， 如果为true 就切换为text ，如果为false就修改为 password
            if (flag) {
                input.type = 'text'

            } else {
                input.type = 'password'

            }

            flag = !flag
        })


    </script>
</body>

</html>

验证码倒计时：

复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 网页时钟</title>
  <style>
    body {
      padding: 40px;
    }

    ul {
      padding: 0;
      list-style: none;
    }

    li {
      margin: 10px 0;
      line-height: 26px;
      display: flex;
    }

    input,
    button {
      padding: 0;
      margin-left: 10px;
      display: block;
    }

    input {
      width: 190px;
      outline: none;
    }

    button {
      width: 120px;
    }

    .verify {
      width: 60px;
    }
  </style>
</head>

<body>
  <ul>
    <li>
      手机号:
      <input type="text">
    </li>
    <li>
      验证码:
      <input type="text" class="verify">
      <button id="btn">获取验证码</button>
    </li>
  </ul>

  <script>
    // 1. 获取元素 按钮
    const btn = document.querySelector('#btn')
    // 2. 给按钮注册点击事件
    btn.addEventListener('click', function () {
      // 3. 点击之后，禁用按钮，同时开启倒计时
      this.disabled = true
      // 控制显示数字的
      let i = 5
      btn.innerHTML = `${i}秒之后重新获取`
      let timer = setInterval(function () {
        i--
        // 在定时器里面不能用this，this执行的window
        btn.innerHTML = `${i}秒之后重新获取`

        // 4. 如果时间为0，则清除定时器，并且更改文字
        if (i < 0) {
          clearInterval(timer)

          btn.innerHTML = '获取验证码'
          btn.disabled = false
        }
      }, 1000)

    })



  </script>
</body>

</html>

手风琴：

复制代码 
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>手风琴</title>
  <style>
    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1200px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
      transition: all 500ms;
    }

    div ul {
      width: 1200px;
    }
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li>
        <a href="#">
          <img src="./images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/5.jpg" alt="">
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
  // 获取元素
  const box = document.querySelectorAll('li');// lis = [li, li, li, li, li]
  // 分析：
  // 1、鼠标进入显示图片，
  // 鼠标进入li，让当前li变成800，其他的li变成100
  for (let i = 0; i < box.length; i++) {

    box[i].addEventListener('mouseenter', function () {
      for (let j = 0; j < box.length; j++) {// 事件触发执行，为了让所有li变成240宽的
        box[j].style.width = '100px';
      }
      this.style.width = '800px'
    })

    box[i].addEventListener('mouseleave', function () {
      // 让所有的li变成240
      for (let j = 0; j < box.length; j++) {// 事件触发执行，为了让所有li变成240宽的
        box[j].style.width = '240px';
      }
    })

  }





</script>

</html>
相关推荐
沿着路走到底15 分钟前
JS事件循环
java·前端·javascript
子春一233 分钟前
Flutter 2025 可访问性（Accessibility）工程体系：从合规达标到包容设计，打造人人可用的数字产品
前端·javascript·flutter
白兰地空瓶39 分钟前
别再只会调 API 了！LangChain.js 才是前端 AI 工程化的真正起点
前端·langchain
jlspcsdn2 小时前
20251222项目练习
前端·javascript·html
行走的陀螺仪2 小时前
Sass 详细指南
前端·css·rust·sass
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ2 小时前
React 怎么区分导入的是组件还是函数，或者是对象
前端·react.js·前端框架
LYFlied2 小时前
【每日算法】LeetCode 136. 只出现一次的数字
前端·算法·leetcode·面试·职场和发展
子春一22 小时前
Flutter 2025 国际化与本地化工程体系：从多语言支持到文化适配，打造真正全球化的应用
前端·flutter
QT 小鲜肉3 小时前
【Linux命令大全】001.文件管理之file命令（实操篇）
linux·运维·前端·网络·chrome·笔记
羽沢313 小时前
ECharts 学习
前端·学习·echarts
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Labelme从安装到标注：零基础完整指南07CentOS的ISO镜像下载08Multisim使用教程详尽版--(2025最新版)09Gemini3 生成的基于手势控制3D粒子圣诞树10jdk21下载、安装（Windows、Linux、macOS）