页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例

最新推荐文章于 2024-09-11 15:33:18 发布

嘻嘻哈哈二郎神

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量258

点赞数

分类专栏： javascript 实战练习练习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_70320000/article/details/129190220

版权

javascript 同时被 3 个专栏收录

32 篇文章 1 订阅

订阅专栏

实战练习

11 篇文章 0 订阅

订阅专栏

练习

7 篇文章 0 订阅

订阅专栏

5. 5秒钟之后跳转页面（location.href的应用）

6. 学生信息表(页面刷新数据不丢失)案例（重点）

1. 页面显示格式化的时间

注意：用方法获得的月份是 0~11 ，要给月份加一才能获得真正的月份

在定时器之外还要再写一下 div.innerHTML = getMyDate()，因为定时器需要1s之后才开始执行回调函数，而在这 1s页面里面的div 无内容，所以写在计时器外面，以至于不会出现1s中无内容的情况。

  <style>
    div {
      width: 300px;
      height: 40px;
      border: 1px solid pink;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    function getMyDate() {
      const date = new Date()
      let h = date.getHours()
      let m = date.getMinutes()
      let s = date.getSeconds()
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      function setZero(n) {
        if (n < 10) {
          return `${'0' + n}`
        }
      }
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}  ${h}:${m}:${s}`
    }
    // 在计时器外部再写以下，避免1s内无内容的情况
    div.innerHTML = getMyDate()
    setInterval(function(){
      div.innerHTML = getMyDate()
    }, 1000)
  </script>                                                                
</body>

第二种方法：使用 toLocalString( ) 方法,该方法返回的是 2023 / 2 / 23 09:21:35形式

此外还有 toLocaleDateString( ) 方法,该方法返回的是 2023/2/23 形式（年月日）

toLocaleTimeString( ) 方法,该方法返回的是 21:30:13 形式（时分秒）

语法：实例对象. toLocaleTimeString( )

  <script>
    const div = document.querySelector('div')
    // 得到日期对象
    const date = new Date()
    div.innerHTML = date.toLocaleString()
    setInterval(function(){
      const date = new Date()
      div.innerHTML = date.toLocaleString()
    }, 1000)
  </script>

2. 倒计时效果

还想使用颜色随机函数，使得页面刷新背景颜色改变

将倒计时页面中的今天时间修改为当前时间

<!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>Document</title>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是2222年2月22日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="scond">20</span>
    </p>
    <p class="tips">18:30:00下课</p>
  </div>
  <script>
    const hour = document.querySelector('#hour')
    const minutes = document.querySelector('#minutes')
    const scond = document.querySelector('#scond')

    // 将倒计时页面中的今天时间修改为当前时间
    const next = document.querySelector('.next')
    const date = new Date()
    const y = date.getFullYear()
    const m = date.getMonth() + 1 //注意月份要加一
    const d = date.getDate()
    next.innerHTML = `今天是${y}年${m}月${d}日`

    //随机颜色的函数
    function getRandomColor(flag = true) {
      if (flag) {
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        let color = '#'
        for (let i = 0; i < 6; i++) {
          let random = Math.floor(Math.random() * arr.length)
          color += arr[random]
        }
        return color
      } else {
        const r = Math.floor(Math.random() * 256)
        const g = Math.floor(Math.random() * 256)
        const b = Math.floor(Math.random() * 256)
        return `rgb(${r}, ${g}, ${b})`
      }
    } 
    // 页面刷新随机得到颜色
    const countdown = document.querySelector('.countdown')
    countdown.style.backgroundColor = getRandomColor()
    // 函数封装
    function getCountTime() {
      //1. 得到当前的时间戳
      const now = +new Date()
      //2. 得到将来的时间戳
      const last = +new Date('2023-2-23 23:59:59')
      // 3. 得到剩余的时间戳,记得转换为 秒数
      const count = (last - now) / 1000
      // 4. 转换为时分秒
      let d = parseInt(count / 60 / 60 / 24)
      let h = parseInt(count / 60 / 60 % 24)
      let m = parseInt(count / 60 % 60)
      let s = parseInt(count % 60)
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      // 把时分秒写到对应的盒子里
      hour.innerHTML = h
      minutes.innerHTML = m
      scond.innerHTML = s
    }
    // 先调用一次，页面一打开就调用一次，不会出现那 1s的空白期
    getCountTime()
    // 开启定时器，定时器里面的函数调用时不需要加小括号
    setInterval(getCountTime, 1000)
  </script>
</body>

</html>

3. 学成在线案例（创建节点、添加节点）

<body>
     <!-- 4. box核心内容区域开始 -->
     <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <!-- <li>
                    <a href="#">
                        <img src="images/course01.jpg" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li> -->
            </ul>
        </div>
    </div>
    <script>
        // 数据
        let data = [
            {
                src: 'images/course01.jpg',
                title: 'Think PHP 5.0 博客系统实战项目演练',
                num: 1125
            },
            {
                src: 'images/course02.jpg',
                title: 'Android 网络动态图片加载实战',
                num: 357
            },
            {
                src: 'images/course03.jpg',
                title: 'Angular2 大前端商城实战项目演练',
                num: 22250
            },
            {
                src: 'images/course04.jpg',
                title: 'Android APP 实战项目演练',
                num: 389
            },
            {
                src: 'images/course05.jpg',
                title: 'UGUI 源码深度分析案例',
                num: 124
            },
            {
                src: 'images/course06.jpg',
                title: 'Kami2首页界面切换效果实战演练',
                num: 432
            },
            {
                src: 'images/course07.jpg',
                title: 'UNITY 从入门到精通实战案例',
                num: 888
            },
            {
                src: 'images/course08.jpg',
                title: 'Cocos 深度学习你不会错过的实战',
                num: 590
            },
        ]
        const ul = document.querySelector('.box-bd ul')
        // console.log(ul);
        // 1. 根据数据的个数，创建 对应的li
        for (let i = 0; i < data.length; i++) {
            // 创建 新的li
            const li = document.createElement('li')
            // 把内容给li
            li.innerHTML = `
                <a href="#">
                    <img src=${data[i].src} alt="">
                    <h4>
                        ${data[i].title}
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>${data[i].num}</span>人在学习
                    </div>
                </a>
            `
            // 3.ul 追加li
            ul.appendChild(li)
        }
    </script>  
</body>

4.学生信息表案例（重点）

核心思路：

1. 声明一个空数组

2. 点击录入，根据相关数据，生成对象，追加到数组里面

3. 根据数组数据渲染页面——表格的行

4. 点击删除按钮，删除的是对应数组里面的数据

5. 再次根据数组的数据，渲染页面

注意阻止的是表单默认跳转，所以事件是’submit‘，且事件源是事件对象

在表单提交后，表单里面的内容应该都清空，使用 form.reset 表示重置表单

由于添加需要渲染，删除也需要渲染，所以可以封装函数

<!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 uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const tbody = document.querySelector('tbody')
   
    // 获取所有带name 属性的元素
    const items = document.querySelectorAll('[name]')
    // console.log(items);
    
    // 声明一个空数组，增加和删除都是对这个数组进行操作
    const data = []
    // 1. 录入状态
    // 1.1 表单提交事件
    const info = document.querySelector('.info')
    info.addEventListener('submit', function(e){
      // 阻止表单跳转的默认行为
      e.preventDefault()
      // console.log(11);

      // 这里进行表单验证 如果不通过，直接中断，不需要添加数据
      for (let i = 0; i < items.length; i++) {
        if (items[i].value === '') {
          return alert('输入内容不能为空')
        }
      }

      // 创建新的对象
      const obj = {
        stuId: data.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
      }
      // console.log(obj);
      // 追加给数组里面
      data.push(obj)
      // console.log(data);

      // 清空表单
      this.reset()
      // 先清空 tbody 把最新数组里面的数据渲染
      tbody.innerHTML = ''
      // 调用渲染函数
      render()

    })
    // 2. 渲染函数 因为增加和删除都需要渲染
    function render() {
        //遍历数组 
        for (let i = 0; i < data.length; i++) {
          // 生成tr
          const tr = document.createElement('tr')
          tr.innerHTML = `
            <td>${data[i].stuId}</td>
            <td>${data[i].uname}</td>
            <td>${data[i].age}</td>
            <td>${data[i].gender}</td>
            <td>${data[i].salary}</td>
            <td>${data[i].city}</td>
            <td>
              <a href="javascript:" data-id=${i}>删除</a>
            </td>
          `
          // 注意为 a 添加自定义属性，从而知道删除时当前对象的索引号
          // 追加元素 父元素.appendChild(子元素)
          tbody.appendChild(tr)
        }
    }

    // 3. 删除操作
    // 3.1 事件委托 tbody
    tbody.addEventListener('click', function(e){
      if (e.target.tagName === 'A') {
        // alert(11)
        // 得到当前元素的自定义属性 data-id
        // console.log(e.target.dataset.id);
        // 删除数组里面对应的数据
        data.splice(+e.target.dataset.id, 1)
        // 先清空 tbody 把最新数组里面的数据渲染
        tbody.innerHTML = ''
        // 调用渲染函数
        render()
      }
    })

  </script>
</body>
</html>

5. 5秒钟之后跳转页面（location.href的应用）

  <style>
    span {
      color: red;
    }
  </style>
</head>
<body>
  <a href="http://www.itcast.cn">支付成功<span>5</span>秒钟之后跳转到首页</a>
  <script>
    // 1. 获取元素
    const a = document.querySelector('a')
    // 2.开启定时器
    // 3. 声明倒计时变量
    let num = 5
    let timerId = setInterval(function () {
      num--
      a.innerHTML = `支付成功<span>${num}</span>秒钟之后跳转到首页`
      // 如果num === 0 则停止定时器，并且完成跳转功能
      if (num === 0) {
        clearInterval(timerId)
        // 4. 跳转  location.href
        location.href = 'http://www.itcast.cn'
      }
    }, 1000) 
  </script>

6. 学生信息表(页面刷新数据不丢失)案例（重点）

需求：录入学生信息，页面刷新数据不丢失

注意要先调用一下渲染函数 render( ), 以让页面一打开或刷新，之前储存的数据直接渲染在页面上

空数组或空对象的转化布尔值为 true

  <script>
    // 1. 读取本地存储的数据
    const data = localStorage.getItem('student-data')
    // 2.如果有就返回对象，没有就声明一个空的数组  arr一会渲染的时候使用
    const arr = data ? JSON.parse(data) : []
    console.log(arr);
    // const arr = [1,2]

    // 获取tbody
    const tbody = document.querySelector('tbody')
    // 3. 渲染模块函数
    function render() {
      // 遍历数组，有几个对象就生成几个tr,追加给tbody
      const trArr = arr.map(function(item, i){
        return `
        <tr>
          <td>${item.stuId}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>
            <a href="javascript:" data-id="${i}">删除</a>
          </td>
        </tr> 
        `
      })
      // console.log(trArr)
      // 因为trArr 是个数组， 我们不要数组，要的是字符串，所以使用 join()方法
      tbody.innerHTML = trArr.join('')
    }
    // 渲染函数首先调用一下，以让本地存储的数据一刷新就显示在页面上
    render()
    // 4. 录入模块
    const info = document.querySelector('.info')
    // 获取表单 form里面带有 name属性的元素
    const items = info.querySelectorAll('[name]')
    info.addEventListener('submit', function(e){
      // 阻止表单默认跳转
      e.preventDefault()
      // 声明空的对象
      const obj = {}
      // 注意空数组的布尔值为true
      obj.stuId = arr.length ? arr[arr.length - 1].stuId + 1 : 1
      // 非空判断
      for (let i = 0; i < items.length; i++) {
        const item = items[i]
        if (item.value === '') {
          return alert('输入内容不能为空')
        }
        obj[item.name] = item.value
      }
      // console.log(obj);
      // 追加给数组
      arr.push(obj)
      // 存储到本地存储里面
      localStorage.setItem('student-data', JSON.stringify(arr))
      // 渲染页面
      render()
      // 重置表单
      this.reset()
    })

    // 5. 删除模块
    tbody.addEventListener('click', function(e){
      if (e.target.tagName === 'A') {
        // console.log(1);
        // console.log(e.target.dataset.id);
        // 删除数组对应的这个数据
        arr.splice(e.target.dataset.id, 1)
        // 写入本地存储
        localStorage.setItem('student-data', JSON.stringify(arr))
        // 重新渲染
        render()
      }
    })
  </script>