Web API - 2

已于 2023-08-06 10:19:52 修改
阅读量59 收藏
点赞数
文章标签： 前端 javascript 开发语言
于 2023-08-02 09:52:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44957788/article/details/131988195
版权

API5

Window 对象

BOM：浏览器对象模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // document.querySelector()
        // window.document.querySelector()
        console.log(document === window.document)
        function fn(){
            console.log(11)
        }
        window.fn()
        var num = 10
        console.log(window.num)
    </script>
</body>
</html>

定时器-延时函数

setTimeout(回调函数，等待的毫秒数)

JS执行机制

JS执行机制-单线程
执行栈
回调函数
1、先执行执行栈中的同步任务
2、异步任务放入任务队列中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(1)
        console.log(2)
        setTimeout(function(){
            console.log(3)
        }, 0)
        console.log(4)
    </script>
</body>
</html>

location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" name="username">
        <input type="password " name="pwd">
        <button>提交</button>
    </form>
    <a href="#/my">我的</a>
    <a href="#/friend">关注</a>
    <a href="#/download">下载</a>
    <button class="reload">刷新</button>
    <script>
        // // console.log(window.location)
        // // console.log(location)
        // console.log(location.href)
        // //href 经常用href 利用js的方法去跳转页面
        // location.href = 'http://www.baidu.com'
        const reload = document.querySelector('click', function(){
            //f5刷新页面
            // location.reload()
            //强制刷新 ctrl + f5
            location.reload(true)
        })
    </script>
</body>
</html>

navigator对象

自动跳转至移动端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" name="username">
        <input type="password " name="pwd">
        <button>提交</button>
    </form>
    <a href="#/my">我的</a>
    <a href="#/friend">关注</a>
    <a href="#/download">下载</a>
    <button class="reload">刷新</button>
    <script>
        // // console.log(window.location)
        // // console.log(location)
        // console.log(location.href)
        // //href 经常用href 利用js的方法去跳转页面
        // location.href = 'http://www.baidu.com'
        const reload = document.querySelector('click', function(){
            //f5刷新页面
            // location.reload()
            //强制刷新 ctrl + f5
            location.reload(true)
        })
    </script>
</body>
</html>

history对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>后退</button>
    <button>前进</button>
    <script>
        const back = document.querySelector('button:first-child')
        const forward = back.nextElementSibling
        back.addEventListener('click', function(){
            //后退一步
            // history.back()
            history.go(-1)
        })
        forward.addEventListener('click', function(){
            //前进一步
            // history.forward()
            history.go(1)
        })
    </script>
</body>
</html>

本地存储

数据存在用户浏览器中

本地存储分类-localStorage

存储数据：

localStorage.setitem('key', 'value')

获取数据：

localStorage.getitem('key')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //要存储一个名字
        // localStorage.setItem('键', '值')
        localStorage.setItem('uname', 'pink老师')
        //获取方式 都加引号
        console.log(localStorage.getItem('uname'))
        //删除本地存储 只删除名字
        // localStorage.removeItem('uname')
        //改 有则改，无则增
        localStorage.setItem('uname', 'red老师')

        //我要存一个年龄
        //本地存储只能存储字符串类型
        localStorage.setItem('age', 18)
        console.log(localStorage.getItem('age'))
    </script>
</body>
</html>

本地存储分类-sessionStorage

生命周期为浏览器窗口

存储复杂数据类型

需要将复杂数据类型转换成JSON字符串，再存储到本地
存字符串，取对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const obj = {
            uname: 'pink老师',
            age: 18,
            gender: '女'
        }
        //存储复杂数据类型  无法直接使用
        // localStorage.setItem('obj', obj)  [object object]
        // //取
        // console.log(localStorage.getItem('obj'))
        // 1. 复杂数据类型必须转换为JSON字符串存储
        localStorage.setItem('obj', JSON.stringify(obj))
        //JSON 对象 属性和值有双引号
        // {"uname":"pink老师","age":18,"gender":"女"}
        //取
        // console.log(typeof localStorage.getItem('obj'))
        //2. 把JSON字符串转换为对象
        console.log(JSON.parse(localStorage.getItem('obj')))
    </script>
</body>
</html>

数组中map方法 迭代数组

map可以遍历数组处理数据，并且返回新的数组
map有返回值
forEach没有返回值

数组中join方法

把数组中所有元素转换成一个字符串
<!

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const arr = ['red', 'blue', 'pink']

        //1. 数组map方法 处理数据并返回给一个数组
        const newArr = arr.map(function(ele, index){
            // console.log(ele) //数组元素
            // console.log(index) //索引号
            return ele + '颜色'
        })
        console.log(newArr)
        //2. 数组join方法
        //小括号为空则逗号分割
        console.log(newArr.join())  //red颜色,blue颜色,pink颜色
        //小括号是空字符串，则元素之间没有分割符
        console.log(newArr.join(''))  //red颜色blue颜色pink颜色
        console.log(newArr.join('|'))  
    </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>学生信息管理</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      
        <!-- <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr>  -->
       
    </tbody>
  </table>
  <script>
    // 参考数据
    const initData = [
      {
        stuId: 1001,
        uname: '欧阳霸天',
        age: 19,
        gender: '男',
        salary: '20000',
        city: '上海',
      }
    ]
    // localStorage.setItem('data', JSON.stringify(initData))
    //1. 渲染业务
    // 1.1 先读取本地存储的数据
    // (1) 本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面
    // (2) 如果没有数据 则用空数组代替
    const arr = JSON.parse(localStorage.getItem('data')) || []
    // console.log(arr)
    // 1.2 利用map和join方法来渲染页面
    const tbody = document.querySelector('tbody')
    function render(){
      // (1) 利用map遍历数组，返回对应tr的数组
      const trArr = arr.map(function(ele, index){
        return `
          <tr>
            <td>${ele.stuId}</td>
            <td>${ele.uname}</td>
            <td>${ele.age}</td>
            <td>${ele.gender}</td>
            <td>${ele.salary}</td>
            <td>${ele.city}</td>
            <td>
              <a href="javascript:" data-id = "${index}">删除</a>
            </td>
        </tr> 
        `
      })

      // console.log(trArr)
      // (2) 把数组转换为字符串
      // (3) 把生成的字符串追加给tbody
      tbody.innerHTML = trArr.join('')
    }
    render()
    // 2. 新增业务
    const info = document.querySelector('.info')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')

    //2.1 form表单注册提交事件，阻止默认行为
    info.addEventListener('submit', function(e){
      e.preventDefault()
    //2.2 非空判断
      if(!uname.value || !age.value || !salary.value){
        return alert('输入内容不能为空')
      }
    //2.3 给arr数组追加对象，里面存储表单获取过来的数据
    arr.push(
      {
        //处理stuid: 数组最后一条数据的stuid + 1
        stuId: arr.length ? arr[arr.length - 1].stuId + 1: 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }
    )
    //2.4 渲染页面和重置表单 (reset()方法)
    render()
    this.reset()  //重置表单
    //2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
    localStorage.setItem('data', JSON.stringify(arr))
    })
    //3. 删除业务
    //3.1 采用事件委托形式，给tbody注册点击事件
    tbody.addEventListener('click', function(e){
      //判断是否点击的是删除按钮
      if(e.target.tagName === 'A'){
        // alert(11)
        //3.2 得到当前点击链接的索引号，渲染数据的时候，动态给a链接添加自定义属性例如 data-id = "0"
        console.log(e.target.dataset.id)
        
        //确认框确认是否要真的删除
        if(confirm('您确认真的要删除这条数据吗？')){
          //3.3 根据索引号，利用splice删除数组这条数据
          arr.splice(e.target.dataset.id, 1)
          //3.4 重新渲染页面
          render()
          //3.5 把最新arr数组存在本地存储
          localStorage.setItem('data', JSON.stringify(arr))
        }
      }
    })
  </script>
</body>

</html>

API6

正则表达式-匹配字符串中字符组合的模式

作用：
验证表单（匹配）、过滤敏感词（替换）、字符串中提取（提取）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const str = '我们在学习前端，希望学习前端能高薪毕业'
        // 正则表达式使用
        // 1. 定义规则
        const reg = /前端/
        // 2. 是否匹配
        // console.log(reg.test(str))  //true
        // 3. exec()
        console.log(reg.exec(str))  //返回数组
    </script>
</body>
</html>

元字符-具有特殊含义的字符，更灵活

边界符（表示位置，用什么开头，什么结尾）

提示字符所处的位置，^开始，$结尾 精确匹配

量词（表示重复次数）

设定某个模式出现的次数

字符类

[ ]匹配字符集合
比如 \d 表示 0-9
[ ]里面加 ^ 表示取反
. 匹配除换行符之外的任何单个字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //元字符
        // console.log(/哈/.test('哈'))
        // console.log(/哈/.test('哈哈'))
        // console.log(/哈/.test('二哈'))
        // console.log('-------------------')
        // //1. 边界符
        // console.log(/^哈/.test('哈'))
        // console.log(/^哈/.test('哈哈'))
        // console.log(/^哈/.test('二哈'))  //false
        // console.log(/^哈$/.test('哈'))  //只有这种情况为true，其他全为false
        // console.log(/^哈$/.test('哈哈'))  //false
        // console.log(/^哈$/.test('二哈'))  //false
        // console.log('-------------------')
        // // 量词*类似 >= 0次
        // console.log(/^哈$/.test('哈'))  //true
        // console.log(/^哈*$/.test(''))  //true
        // console.log(/^哈*$/.test('哈'))  //true
        // console.log(/^哈*$/.test('哈哈'))  //true
        // console.log(/^哈*$/.test('二哈很傻'))  //false
        // console.log(/^哈*$/.test('哈很傻'))  //false
        // console.log(/^哈*$/.test('哈很哈'))  //false
        // console.log('-------------------')
        // // 量词+类似 >= 1次
        // console.log(/^哈$/.test('哈'))  //true
        // console.log(/^哈+$/.test(''))  //false
        // console.log(/^哈+$/.test('哈'))  //true
        // console.log(/^哈+$/.test('哈哈'))  //true
        // console.log(/^哈+$/.test('二哈很傻'))  //false
        // console.log(/^哈+$/.test('哈很傻'))  //false
        // console.log(/^哈+$/.test('哈很哈'))  //false
        // console.log('-------------------')
        // // 量词?类似 0 或 1次
        // console.log(/^哈?$/.test(''))  //true
        // console.log(/^哈?$/.test('哈'))  //true
        // console.log(/^哈?$/.test('哈哈'))  //false
        // console.log(/^哈?$/.test('二哈很傻'))  //false
        // console.log(/^哈?$/.test('哈很傻'))  //false
        // console.log(/^哈?$/.test('哈很哈'))  //false
        // console.log('-------------------')
        //量词 {n} 写几就必须出现几次
        // console.log(/^哈{4}$/.test('哈'))
        // console.log(/^哈{4}$/.test('哈哈'))
        // console.log(/^哈{4}$/.test('哈哈哈'))
        // console.log(/^哈{4}$/.test('哈哈哈哈'))
        // console.log(/^哈{4}$/.test('哈哈哈哈哈'))
        // console.log(/^哈{4}$/.test('哈哈哈哈哈哈'))
        // console.log('-------------------')
        // //量词 {n,} 大于等于n次
        // console.log(/^哈{4,}$/.test('哈'))
        // console.log(/^哈{4,}$/.test('哈哈'))
        // console.log(/^哈{4,}$/.test('哈哈哈'))
        // console.log(/^哈{4,}$/.test('哈哈哈哈'))
        // console.log(/^哈{4,}$/.test('哈哈哈哈哈'))
        // console.log(/^哈{4,}$/.test('哈哈哈哈哈哈'))
        // console.log('-------------------')
        // //量词 {n,m} 大于等于n且小于等于m  逗号左右两侧千万不能有空格
        // console.log(/^哈{4,6}$/.test('哈'))
        // console.log(/^哈{4,6}$/.test('哈哈'))
        // console.log(/^哈{4,6}$/.test('哈哈哈'))
        // console.log(/^哈{4,6}$/.test('哈哈哈哈'))
        // console.log(/^哈{4,6}$/.test('哈哈哈哈哈'))
        // console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈'))
        // console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'))
        // console.log('-------------------')
        //字符类 [abc] 只选一个
        // console.log(/^[abc]$/.test('a'))  //true
        // console.log(/^[abc]$/.test('b'))  //true
        // console.log(/^[abc]$/.test('c'))  //true
        // console.log(/^[abc]$/.test('ab'))  //false
        // console.log(/^[abc]{2}$/.test('ab'))  //true
        // console.log('-------------------')
         //字符类 [a-z] 只选一个
        console.log(/^[a-z]$/.test('p'))  //true
        console.log(/^[A-Z]$/.test('p'))  //false
        console.log(/^[A-Z]$/.test('P'))  //true
        console.log(/^[0-9]$/.test(2))  //true
        console.log(/^[a-zA-Z0-9]$/.test(2))  //true
        console.log(/^[^a-zA-Z0-9]$/.test('P'))  //false
        console.log('-------------------')
    </script>
</body>
</html>
预定义：某些常见模式的简写方式

\d 相当于 [0-9]
\w 相当于 [A-Za-z0-9_]
\s 相当于 [\t\r\n\v\f]

修饰符：约束正则执行的某些细节行为 如是否区分大小写、是否修饰多行匹配等

i表示不区分大小写
g表示匹配所有满足正则表达式的结果

用户名验证案例

<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>Document</title>
    <style>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }

        .error {
            color: red;
            background: url(./images/error1.png) no-repeat left center;
        }

        .right {
            color: green;
            background: url(./images/right.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <input type="text">
    <span></span>
    <script>
        // 1. 准备正则
        const reg = /^[a-zA-Z0-9-_]{6,16}$/
        const input = document.querySelector('input')
        const span = input.nextElementSibling
        // 2. 失去焦点，开始判断
        input.addEventListener('blur', function(){
            // console.log(reg.test(this.value))
            if(reg.test(this.value)){
                span.innerHTML = '输入正确'
                span.className = 'right'
            }else{
                span.innerHTML = '请输入16位的英文数字下划线'
                span.className = 'error'
            }
        })
    </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>Document</title>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <div></div>
    <script>
        const tx = document.querySelector('textarea')
        const btn = document.querySelector('button')
        const div = document.querySelector('div')
        btn.addEventListener('click', function(){
            // console.log(tx.value)
            div.innerHTML = tx.value.replace(/激情|基情/g, '**')
            tx.value = ''
        })
    </script>
</body>
</html>

综合案例-小兔鲜页面注册

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/register.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <a href="./login.html">请先登录</a>
        </li>
        <li>
          <a href="./register.html">免费注册</a>
        </li>
        <li>
          <a href="./center-order.html">我的订单</a>
        </li>
        <li>
          <a href="./center.html">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">在线客服</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites"></i>
            手机版
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="xtx_header">
    <div class="wrapper">
      <!-- 网站Logo -->
      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
      <!-- 主导航 -->
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="./index.html">首页</a>
          </li>
          <li>
            <a href="./category01.html">生鲜</a>
          </li>
          <li>
            <a href="./category01.html">美食</a>
          </li>
          <li>
            <a href="./category01.html">餐厨</a>
          </li>
          <li>
            <a href="./category01.html">电器</a>
          </li>
          <li>
            <a href="./category01.html">居家</a>
          </li>
          <li>
            <a href="./category01.html">洗护</a>
          </li>
          <li>
            <a href="./category01.html">孕婴</a>
          </li>
          <li>
            <a href="./category01.html">服装</a>
          </li>
        </ul>
      </div>
      <!-- 站内搜索 -->
      <div class="xtx_search clearfix">
        <!-- 购物车 -->
        <a href="./cart-none.html" class="xtx_search_cart sprites">
          <i>2</i>
        </a>
        <!-- 搜索框 -->
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
        </div>
      </div>
    </div>
  </div>
  <div class="xtx-wrapper">
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card">
        <h3>新用户注册</h3>
        <form class="xtx-form">
          <div data-prop="username" class="xtx-form-item">
            <span class="iconfont icon-zhanghao"></span>
            <input name="username" type="text" placeholder="设置用户名称">
            <span class="msg"></span>
          </div>
          <div data-prop="phone" class="xtx-form-item">
            <span class="iconfont icon-shouji"></span>
            <input name="phone" type="text" placeholder="输入手机号码  ">
            <span class="msg"></span>
          </div>
          <div data-prop="code" class="xtx-form-item">
            <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
            <input name="code" type="text" placeholder="短信验证码">
            <span class="msg"></span>
            <a class="code" href="javascript:;">发送验证码</a>
          </div>
          <div data-prop="password" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
            <span class="msg"></span>
          </div>
          <div data-prop="confirm" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="confirm" type="password" placeholder="请再次输入上面密码">
            <span class="msg"></span>
          </div>
          <div class="xtx-form-item pl50">
            <i class="iconfont icon-queren"></i>
            已阅读并同意<i>《用户服务协议》</i>
          </div>
          <div class="xtx-form-item">
            <button class="submit">下一步</button>
            <!-- <a class="submit" href="javascript:;">下一步</a> -->
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="xtx_footer clearfix">
    <div class="wrapper">
      <!-- 联系我们 -->
      <div class="contact clearfix">
        <dl>
          <dt>客户服务</dt>
          <dd class="chat">在线客服</dd>
          <dd class="feedback">问题反馈</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd class="weixin">公众号</dd>
          <dd class="weibo">微博</dd>
        </dl>
        <dl>
          <dt>下载APP</dt>
          <dd class="qrcode">
            <img src="./uploads/qrcode.jpg">
          </dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
      <div class="wrapper">
        <!-- 口号 -->
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民</a>
          <a href="javascript:;" class="express">物流快捷</a>
          <a href="javascript:;" class="quality">品质新鲜</a>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight &copy; 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </div>
  <script>
    (function(){
      // 1. 发送短信验证码
    const code = document.querySelector('.code')
    let flag = true  //通过一个变量来控制
    // 1.1 点击事件
    code.addEventListener('click', function(){
    if(flag){
      //取反了，不能马上第二次点击
      flag = false
      let i = 5
      code.innerHTML = `0${i}秒后重新获取`
      let timeId = setInterval(function(){
        i--
        code.innerHTML = `0${i}秒后重新获取`
        if(i === 0){
          clearInterval(timeId)
          //重新获取
          code.innerHTML = `重新获取` 
          //到时间了，可以开启flag了
          flag = true
        }
      }, 1000)
    }
    })
    })();

    // 2. 验证用户名
    // 2.1 获取用户名表单
    const username = document.querySelector('[name=username]')
    // 2.2 使用change事件 值发送变化的时候
    username.addEventListener('change', verifyName)
    // 2.3 封装函数
    function verifyName(){
      // console.log(11)
      const span = username.nextElementSibling
      // 2.4 定规则
      const reg = /^[a-zA-Z0-9-_]{6,10}$/
      if(!reg.test(username.value)){
        // console.log(11)
        span.innerText = '输入不合法，请输入6~10位'
        return false
      }
      //2.5 合法的 清空span
      span.innerText = ''
      return true
    }

    // 3. 验证手机号
    // 3.1 获取手机号表单
    const phone = document.querySelector('[name=phone]')
    // 3.2 使用change事件 值发送变化的时候
    phone.addEventListener('change', verifyPhone)
    // 3.3 封装函数
    function verifyPhone(){
      // console.log(11)
      const span = phone.nextElementSibling
      // 3.4 定规则
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if(!reg.test(phone.value)){
        // console.log(11)
        span.innerText = '输入不合法，请输入正确的11位手机号码'
        return false
      }
      //3.5 合法的 清空span
      span.innerText = ''
      return true
    }

    // 4. 验证验证码
    // 4.1 获取验证码表单
    const codeInput = document.querySelector('[name=code]')
    // 4.2 使用change事件 值发送变化的时候
    codeInput.addEventListener('change', verifyCode)
    // 4.3 封装函数
    function verifyCode(){
      // console.log(11)
      const span = codeInput.nextElementSibling
      // 4.4 定规则 验证码
      const reg = /^\d{6}$/
      if(!reg.test(codeInput.value)){
        // console.log(11)
        span.innerText = '输入不合法，6位数字'
        return false
      }
      //4.5 合法的 清空span
      span.innerText = ''
      return true
    }

    // 5. 验证密码框
    // 5.1 获取密码框
    const password = document.querySelector('[name=password]')
    // 5.2 使用change事件 值发送变化的时候
    password.addEventListener('change', verifyPwd)
    // 5.3 封装函数
    function verifyPwd(){
      // console.log(11)
      const span = password.nextElementSibling
      // 5.4 定规则 验证码
      const reg = /^[a-zA-Z0-9-_]{6,20}$/
      if(!reg.test(password.value)){
        // console.log(11)
        span.innerText = '输入不合法，6~20位数字字母符号组成'
        return false
      }
      //5.5 合法的 清空span
      span.innerText = ''
      return true
    }

    // 6. 密码的再次验证
    // 6.1 获取再次验证表单
    const confirm = document.querySelector('[name=confirm]')
    // 6.2 使用change事件 值发送变化的时候
    confirm.addEventListener('change', verifyConfirm)
    // 6.3 封装函数
    function verifyConfirm(){
      // console.log(11)
      const span = confirm.nextElementSibling
      //6.4 当前表单的值不等于密码框的值 就是错误的
      if(confirm.value !== password.value){
        // console.log(11)
        span.innerText = '两次密码输入不一致'
        return false
      }
      //6.5 合法的 清空span
      span.innerText = ''
      return true
    }
   
    //7. 我同意
    const queren = document.querySelector('.icon-queren')
    queren.addEventListener('click', function(){
      //切换类 原来有就删掉，原来没有就添上
      this.classList.toggle('icon-queren2')
    })

    //提交模块
    const form = document.querySelector('form')
    form.addEventListener('submit', function(e){
      //判断是否勾选我同意模块，如果有icon-queren2说明勾选
      if(!queren.classList.contains('icon-queren2')){
        alert('请勾选同意协议')
        //阻止提交
        e.preventDefault()
      }
      //依次判断上面的文本框 是否通过，只要一个没通过就阻止
      // console.log(verifyName())
      if(!verifyName()) e.preventDefault()
      if(!verifyPhone()) e.preventDefault()
      if(!verifyCode()) e.preventDefault()
      if(!verifyPwd()) e.preventDefault()
      if(!verifyConfirm()) e.preventDefault()
    })
  </script>
</body>
</html>

阶段案例-小兔鲜登录页面

API7

放大镜效果案例（实战）

╰ 羁绊
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值