今日学习任务

  • [x] 1.localStorage与sessionStorage

  • [ ] localstorge与sessioStorge的区别

  • sessionStorage案例：页面间传值

  • [x] 2.offset家族

  • [ ] offsetWidth和offsetHeight获取元素宽高

  • offsetParent获取定位父级
  • offsetLeft和offsetTop获取定位距离

  • [x] 3.定时器

  • [x] 定时器作用及语法

  • [ ] setInterval():重复定时器

  • setTimeout():一次定时器

  • [ ] 4.定时器的应用场景案例

  • [ ] 秒杀

  • 动画

01-localstorage与sessionstorage

1.1-localstorage

1.localStorage:本地存储

  1.             将数据存储到浏览器

2.语法

  1.             存：  localStorage.setItem('属性名','属性值')
  3.             取：  localStorage.getItem('属性名')
  5.             删：  localStorage.removeItem('属性名')
  7.             清空： localStorage.clear()

3.注意点

  1.             a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
  3.             b.永久存储。除非自己删，否则一直存在于浏览器

day04 - 图1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <button id="btn1">存储据</button>
  11.     <button id="btn2">取储据</button>
  12.     <button id="btn3">删储据</button>
  13.     <button id="btn4">清空储据</button>
  15.     <script>
  16.         /* 
  17.             1.localStorage:本地存储
  18.                 将数据存储到浏览器
  20.             2.语法
  21.                 存：  localStorage.setItem('属性名','属性值')
  22.                 取：  localStorage.getItem('属性名')
  23.                 删：  localStorage.removeItem('属性名')
  24.                 清空： localStorage.clear()
  26.             3.注意点
  27.                 a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
  28.                 b.永久存储。除非自己删，否则一直存在于浏览器
  29.          */
  32.         //存
  33.         document.getElementById('btn1').onclick = function(){
  34.             localStorage.setItem('name','班长');
  35.             localStorage.setItem('age',18);
  36.             localStorage.setItem('girlFriend',['苍老师','波多老师','吉泽老师']);
  37.         }
  39.         //取
  40.         document.getElementById('btn2').onclick = function(){
  41.             let age = localStorage.getItem('age');
  42.             console.log(age); 
  43.         }
  45.         //删
  46.         document.getElementById('btn3').onclick = function(){
  47.             localStorage.removeItem('girlFriend'); 
  48.         }
  50.         //清空:一次性删除所有数据
  51.         document.getElementById('btn4').onclick = function(){
  52.             localStorage.clear(); 
  53.         }
  54.     </script>
  55. </body>
  56. </html>

1.2-sessionStorage

1.sessionStorage相当于短命版的localStorage，其他用法完全一致

2.两者区别：HP值不同

  1.             localStorage：永久存储（存在硬盘，HP值无限）
  3.             sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <button id="btn1">存储据</button>
  11.     <button id="btn2">取储据</button>
  12.     <button id="btn3">删储据</button>
  13.     <button id="btn4">清空储据</button>
  15.     <script>
  16.         /* 
  17.             1.sessionStorage相当于短命版的localStorage，其他用法完全一致
  19.             2.两者区别：HP值不同
  20.                 localStorage：永久存储（存在硬盘，HP值无限）
  21.                 sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）
  23.          */
  26.         //存
  27.         document.getElementById('btn1').onclick = function(){
  28.             sessionStorage.setItem('name','班长');
  29.             sessionStorage.setItem('age',18);
  30.             sessionStorage.setItem('girlFriend',['苍老师','波多老师','吉泽老师']);
  31.         }
  33.         //取
  34.         document.getElementById('btn2').onclick = function(){
  35.             let age = sessionStorage.getItem('age');
  36.             console.log(age); 
  37.         }
  39.         //删
  40.         document.getElementById('btn3').onclick = function(){
  41.             sessionStorage.removeItem('girlFriend'); 
  42.         }
  44.         //清空:一次性删除所有数据
  45.         document.getElementById('btn4').onclick = function(){
  46.             sessionStorage.clear(); 
  47.         }
  48.     </script>
  49. </body>
  50. </html>

1.3-案例：页面间传值

day04 - 图2

  • 页面a
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <input type="text" placeholder="请输入账号" id="user">
  11.     <input type="password" placeholder="请输入密码" id="pwd">
  12.     <a href="09-页面间传值2.html" id="next">下一步</a>
  14.     <script>
  16.         let user = document.getElementById('user');
  17.         let pwd = document.getElementById('pwd');
  19.         document.getElementById('next').onclick = function(){
  20.             //希望跳转之前保存一下数据
  21.             sessionStorage.setItem('user',user.value);
  22.             sessionStorage.setItem('pwd',pwd.value);
  23.         }
  24.     </script>
  25. </body>
  26. </html>
  • 页面b
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <input type="text" placeholder="请输入职业" id="job">
  13.     <input type="text" placeholder="请输入邮箱" id="email">
  14.     <input type="text" placeholder="请输入地址" id="addr">
  16.     <input type="button" value="注册" id="register">
  18.     <script>
  20.         let job = document.getElementById('job');
  21.         let email = document.getElementById('email');
  22.         let addr = document.getElementById('addr');
  24.         document.getElementById('register').onclick = function () {
  26.             //拿到上一个页面的内容
  27.             let user = sessionStorage.getItem('user');
  28.             let pwd = sessionStorage.getItem('pwd');
  29.             //拿到当前页面的内容
  31.             //一起发给服务器
  32.             console.log(user, pwd, job.value, email.value, addr.value);
  34.         }
  35.     </script>
  36. </body>
  38. </html>

02-offset家族

  • 1.offset属性家族：获取元素真实的宽高和位置

    • offsetWidth、offsetHeight、offsetParent、offsetLeft、offsetTop

  • 2.之前学习的通过style属性获取宽高的特点

    • 1.只能获取行内的宽高
    • 2.获取到的值是一个string类型，并且带px
    • 3.获取到的只有宽高，不包含padding、border（总结就是行内写的是什么，获取的就是什么）
    • 4.既可以读取，也可以设置

  • 3.offsetWidth与offsetHeight：获取的是元素的实际宽高 = width + border + padding

    • 1.可以获取行内及内嵌的宽高
    • 2.获取到的值是一个number类型，不带单位
    • 3.获取的宽高包含border和padding
    • 4.只能读取，不能设置

day04 - 图3

1.1-offsetWidth与offsetHeight

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <style>
  8.         .one{
  9.             width: 100px;
  10.             padding: 10px;
  11.             border: 10px solid red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <div id="box" class="one" style="height: 150px; background: pink; "></div>
  17. </body>
  19. <script>
  20.     /*offset属性家族：获取元素真实的宽高和位置
  21.         * offsetWidth、offsetHeight、offsetParent、offsetLeft、offsetTop
  22.      */
  24.     let box = document.getElementById('box');
  25.     /*之前学习的通过style属性获取宽高的特点
  26.     * 1.只能获取行内的宽高
  27.     * 2.获取到的值是一个string类型，并且带px
  28.     * 3.获取到的只有宽高，不包含padding、border（总结就是行内写的是什么，获取的就是什么）
  29.     * 4.既可以读取，也可以设置
  30.      */
  31.     console.log ( box.style.width );
  32.     console.log ( box.style.height );
  34.     box.style.height = '100px';
  36.     /*offsetEWidth与offsetHeight：获取的是元素的实际宽高 = width + border + padding
  37.     1.可以获取行内及内嵌的宽高
  38.     2.获取到的值是一个number类型，不带单位
  39.     3.获取的宽高包含border和padding
  40.     4.只能读取，不能设置
  41.      */
  42.     console.log ( box.offsetWidth );        //width + border + padding
  43.     console.log ( box.offsetHeight );        //height + border + padding
  45.     box.offsetWidth = 300;                    //手动设置无效：只能读取，不能设置。
  46. </script>
  47. </html>

1.2-offsetParent

  1. offsetParent:获取最近的定位父元素 （自己定位参照的父元素）
  2. 注意点：
  3. 1.如果元素自身是固定定位（fixed），则定位父级是null
  4. 2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body
  5. 3.body的定位父级是null
  7. <!DOCTYPE html>
  8. <html lang="en">
  9. <head>
  10.     <meta charset="UTF-8">
  11.     <title>Title</title>
  12.     <style>
  13.         .one{
  14.               top: 50px;
  15.               left: 0px;
  16.               width: 100px;
  17.               height: 100px;
  18.               background: greenyellow;
  19.               position: absolute;
  20.           }
  22.         .two{
  23.             top: 100px;
  24.             left: 0;
  25.             width: 200px;
  26.             height: 200px;
  27.             background: cyan;
  28.             position: relative;
  29.         }
  31.         .three{
  32.             top: 0;
  33.             left: 0;
  34.             width: 300px;
  35.             height: 300px;
  36.             background: green;
  37.             position: relative;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42. <div class="three">
  43.     <div class="two">
  44.         <div class="one" id="box">1</div>
  45.     </div>
  46. </div>
  48. </body>
  50. <script>
  51.     /*offsetParent:获取最近的定位父元素  （自己定位参照的父元素）
  52.     //注意点：
  53.     1.如果元素自身是固定定位，则定位父级是null
  54.     2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body
  55.     3.body的定位父级是null
  57.      */
  59.     let box = document.getElementById('box');
  60.     console.log ( box.offsetParent );
  63.     //如果是固定定位fixed，则父元素是null
  64.     //原因：固定定位参照的是浏览器窗口，这不属于任何一个元素，所以是null
  65.    // console.log ( box.offsetParent );//null
  67.     //body自身的定位父元素是null
  68.     console.log ( document.body.offsetParent );
  70. </script>
  71. </html>

1.3-offsetLeft和offsetTop

  • offsetLeft:获取自己左外边框与offsetParent的左内边框的距离
  • offsetTop:获取自己上外边框与offsetParent的上内边框的距离
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .one{
  8.             top:50px;
  9.             left: 50px;
  10.             width: 100px;
  11.             height: 100px;
  12.             background: greenyellow;
  13.             border: 10px solid red;
  14.             margin: 20px;
  15.             position: absolute;
  16.         }
  18.         .two{
  19.             top: 200px;
  20.             left: 200px;
  21.             width: 200px;
  22.             height: 200px;
  23.             background: cyan;
  24.             border: 20px solid purple;
  25.             padding: 10px;
  26.             position: absolute;
  27.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="two">
  33.         <div class="one" id="box">1</div>
  34.     </div>
  35. </body>
  37. <script>
  38.     /*
  39.         offsetLeft:获取自己左外边框与offsetParent的左内边框的距离
  40.         offsetTop:获取自己上外边框与offsetParent的上内边框的距离
  41.      */
  43.     let box = document.getElementById('box');
  45.     console.log ( box.offsetLeft );        //70
  46.     console.log ( box.offsetTop );        //70
  47. </script>
  48. </html>

03-定时器作用及语法

1.1-setInterval

定时器：某一件事（一段代码）并不是马上执行，而是隔一段时间执行

  • setInterval:创建定时器

    • 特点：一旦创建立即计时，必须要手动停止，否则会无限的每隔一段时间执行代码

  • clearInterval(定时器id)：清除定时器

    • 一个页面可以创建很多个定时器，通过制定定时器id可以清除特定的定时器
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <button id="start">开启</button>
  13.     <button id="end">结束</button>
  14.     <p id="p1">0</p>
  15.     <script>
  16.         /*1.定时器: 让一段代码每隔一定时间自动执行
  17.           2.语法
  18.             开启定时器：  setInterval()    一旦开启永久重复，只能手动调用语法停止
  19.             清除定时器    clearInterval()
  20.           */
  21.         let p1 = document.querySelector('#p1');
  23.         let timeID = null;//声明变量存储定时器
  24.         //注册事件
  25.         document.getElementById('start').onclick = function () {
  26.             /**开启定时器
  27.             第一个参数：一段代码  回调函数
  28.             第二个参数：时间间隔 单位：ms
  29.             返回值： 定时器ID timeID
  30.                 定时器ID：一个页面可以开启很多个不同的定时器，浏览器为了区分这些定时器，每开启一个定时器
  31.                 就会给它们一个编号，这个编号叫做定时器ID
  32.             */
  33.             timeID =  setInterval(function () {
  34.                 console.log('哈哈哈');
  35.                 p1.innerText++;
  36.                 // let text = p1.innerText;
  37.                 // text++;//只是变量text的值+1
  38.                 // console.log(text);
  39.                 // p1.innerText = text;
  40.             }, 1000);
  41.         };
  44.         document.getElementById('end').onclick = function () {
  45.             //清除定时器
  46.             //参数：定时器ID
  47.             clearInterval(timeID);
  48.         };
  51.     </script>
  52. </body>
  54. </html>

1.2-setTimeout

  • 定时器setTimeout与setInterval唯一的区别是，setTimeout定时器只会执行一次

  • 总结：

    • 1.如果你想让这个代码一段时间后只执行一次，使用setTimeout
    • 2.如果你想让这个代码每隔一段时间执行一次（执行多次），使用setInterval
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         /* 1. setInterval() :永久定时器   一旦开启会永久重复， 只能手动清除
  12.                 clearInterval() :清除
  14.             2. setTimeout() : 一次定时器   一旦开启只会执行一次，执行完毕之后自动清除
  16.          */
  18.         let timeID =  setTimeout(function(){
  19.              console.log('boom');
  20.          },5000);
  22.          //一次定时器也可以清除，但是不常用
  23.         //  clearInterval(timeID);
  24.         // clearTimeout(timeID);
  26.     </script>
  27. </body>
  28. </html>

04-定时器的场景案例

1.1-倒计时秒杀

效果预览

  • 思路分析

    开启定时器，1s

    1.       1.先获取页面元素的文本   h m s<br />
    2.       2.每过1s，s--<br />
    3.       3.如果s < 0, s = 59, m--<br />
    4.       4.如果m < 0, m = 59, h--<br />
    5.       5.如果 h m s < 10,则在前面加上0<br />
    6.       6.将计算的h m s 结果，显示到页面元素中<br />
    7.       7.如果h == 0 && m == 0 && s == 0
  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 200px;
  10.             height: 100px;
  11.             margin: 100px auto;
  12.         }
  14.         span {
  15.             display: inline-block;
  16.             width: 30px;
  17.             height: 40px;
  18.             line-height: 40px;
  19.             background-color: #222;
  20.             color: #fff;
  21.             text-align: center;
  22.             font-weight: 700;
  23.         }
  24.     </style>
  25. </head>
  27. <body>
  28.     <div class="box">
  29.         <span id="spanHour">03</span>
  30.         <span>:</span>
  31.         <span id="spanMin">06</span>
  32.         <span>:</span>
  33.         <span id="spanSec">15</span>
  34.     </div>
  35.   <script>
  36.     /*思路分析 
  37.       开启一个永久定时器。时间间隔1s。
  38.       (1).获取页面元素的文本。 h m s
  39.       (2).每过1s， s--
  40.       (3). 如果s < 0, s = 59,m--
  41.       (4) 如果 m < 0, m = 59,h--
  42.       (5)如果hms < 10，则在前面加上0  
  43.       (5)将计算好的时分秒hms赋值给页面元素文本
  44.       (6)如果 s == 0 && m == 0 && h == 0,清除定时器
  45.     */
  47.     let timeID = setInterval(function () {
  48.       //(1).获取页面元素的文本。 h m s
  49.       let hDiv = document.querySelector('#spanHour');
  50.       let mDiv = document.querySelector('#spanMin');
  51.       let sDiv = document.querySelector('#spanSec');
  52.       let h = hDiv.innerText;
  53.       let m = mDiv.innerText;
  54.       let s = sDiv.innerText;
  55.       //(2).每过1s， s--
  56.       s--;
  57.       //(3). 如果s < 0, s = 59,m--
  58.       if (s < 0) {
  59.         s = 59;
  60.         m--;
  61.       };
  62.       //(4) 如果 m < 0, m = 59,h--
  63.       if (m < 0) {
  64.         m = 59;
  65.         h--;
  66.       };
  68.       //(5)如果h m s < 10，则在前面加上0 
  69.       /*注意点： 不要直接用字符串和数字计算，应该先转成number类型 */
  70.       s = parseInt(s);
  71.       m = parseInt(m);
  72.       h = parseInt(h);
  73.       s = s < 10 ? '0' + s : s;
  74.       m = m < 10 ? '0' + m : m;
  75.       h = h < 10 ? '0' + h : h;
  76.       //(6)将计算好的时分秒hms赋值给页面元素文本
  77.       hDiv.innerText = h;
  78.       mDiv.innerText = m;
  79.       sDiv.innerText = s;
  80.       //(7)如果 s == 0 && m == 0 && h == 0,清除定时器
  81.       if (s == 0 && m == 0 && h == 0) {
  82.         clearInterval(timeID);
  83.       }
  84.     }, 1000)
  86.   </script>
  87. </body>
  89. </html>

1.2-动画介绍（匀速动画）

效果预览

  • 需求：点击开始按钮，让div向右移动800px ，动画效果

  • 动画可以理解为物理中的运动，运动三要素：v = s/t （速度 = 距离/时间）

    • 如果没有时间因素，则会造成瞬移效果
  • 1.如果直接修改div的left值就会瞬间移动，没有动画效果
  • 2.动画效果：让div的left值每隔一段时间向右移动一点，直到移动800为止
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>标题</title>
  6.     <style>
  7.         .one {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: pink;
  11.             position: absolute;
  12.             top: 50px;
  13.             left: 0px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <input type="button" value="开始" id="start"/>
  19. <div class="one" id="box"></div>
  20. </body>
  22. <script>
  23.     /*需求：点击开始按钮，让div向右移动800px ，动画效果
  25.     动画可以理解为物理中的运动，运动三要素：v = s/t  （速度 = 距离/时间）
  26.         * 如果没有时间因素，则会造成瞬移效果
  27.         *
  28.     1.如果直接修改div的left值就会瞬间移动，没有动画效果
  29.     2.动画效果：让div的left值每隔一段时间向右移动一点，直到移动800为止
  30.     * */
  32.     //1.获取div
  33.     let div = document.querySelector('#box');
  35.     // //直接修改div的left值就会瞬间移动，没有动画
  36.     // document.getElementById('start').onclick = function (  ) {
  37.     //     div.style.left = '800px';
  38.     // }
  40.     //2.利用定时器实现动画（setInterval）
  41.     let timeID = null;//声明一个变量，用来记录定时器的id
  42.     let currentLeft = 0 ;//声明一个变量，用来记录运动中当前的left值
  43.     document.getElementById('start').onclick = function (  ) {
  44.         timeID = setInterval(function (  ) {
  45.             //定义一个距离因子来表示速度，每隔一段时间，当前距离会叠加这个因子
  46.             //因子越小，动画越平缓
  47.             let step = 9;
  48.             currentLeft += step;
  49.             div.style.left = currentLeft + 'px';
  51.             //判断div是否达到目的地，否则会无限向右移动
  52.             if(currentLeft >= 800){
  53.                 div.style.left = 800 + 'px';    //到达终点
  54.                 clearInterval(timeID);            //清除定时器，停止运动
  55.             }
  57.         },100);//间隔时间越小动画越平缓
  58.     }
  60. </script>
  61. </html>