web APIs-练习二

最新推荐文章于 2024-11-17 17:08:10 发布

Dowen00

最新推荐文章于 2024-11-17 17:08:10 发布

阅读量1.3k

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/m0_63171030/article/details/131949071

版权

轮播图点击切换：

<!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>