• 前端作业（17）

    之后的20个作业，学自【20个JavaScript经典案例-哔哩哔哩】 https://b23.tv/kVj1P5f，加上自己学习的知识组合

    支付倒计时

    1. 支付10s倒计时

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>支付10s倒计时</title>
    9.     <style>
    10.         div {
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: #eee;
    14.             padding: 20px;
    15.             margin: 0 auto;
    16.         }
    17.         
    18.         button {
    19.             margin: 30px 25px;
    20.         }
    21.     </style>
    22. </head>
    23.  
    24. <body>
    25.     <div>
    26.         <table>
    27.             <tr>
    28.                 <td>商品:</td>
    29.                 <td>Web前端课程</td>
    30.             </tr>
    31.             <tr>
    32.                 <td>原价:</td>
    33.                 <td>1980元</td>
    34.             </tr>
    35.             <tr>
    36.                 <td>现价:</td>
    37.                 <td>1.98元</td>
    38.             </tr>
    39.             <tr>
    40.                 <td>内容:</td>
    41.                 <td>HTML</td>
    42.             </tr>
    43.             <tr>
    44.                 <td>地址:</td>
    45.                 <td>北京朝阳区</td>
    46.             </tr>
    47.             <tr></tr>
    48.             <tr>
    49.                 <td><button>取消</button></td>
    50.                 <td><button>确定</button></td>
    51.             </tr>
    52.             <tr></tr>
    53.         </table>
    54.     </div>
    55.     <script>
    56.         // 用getElementsByTagName()方法获取button,因为支付是第二个，所以后跟[1],数组从0开始计数，所以是1
    57.         // 1. 声明范围：
    58.         // let块作用域
    59.         // if (true) {
    60.         //     let a1 = 'ss';
    61.         //     console.log(a1); // ss
    62.         // }
    63.         // console.log(a1); // ReferenceError
    64.         // var函数作用域
    65.         // if (true) {
    66.         //     var a1 = 'ss';
    67.         //     console.log(a1); // ss
    68.         // }
    69.         // console.log(a1); //ss
    70.         // 2. let定义变量不能预解析，提前调用会报错 ReferenceError; var相反，可以预解析，结果为 undefined
    71.         // console.log(a1); // ReferenceError
    72.         // console.log(a2); // undefined
    73.         // let a1 = 'ss';
    74.         // var a2 = 'as';
    75.         document.getElementsByTagName('button')[1].onclick = function() {
    76.             let res = window.confirm('您确定吗？');
    77.             if (res) {
    78.                 location.href = 'payment.html';
    79.             }
    80.         }
    81.     </script>
    82. </body>
    83.  
    84. </html>

     ① 常用输入输出语句：

    alert() = window.alert()浏览器弹出警示框
    prompt()浏览器弹出输入框
    console.log()浏览器控制台输出信息
    document.write()HTML中输入信息

    ② document 对象，对HTML中的元素进行访问

    body对 body 元素直接访问
    cookie设置或返回文档相关的所有cookie
    domain返回文档域名
    title返回文档标题
    URL返回文档URL
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <script>
    13.         console.log(document.body.scrollWidth);
    14.         console.log(document.cookie);
    15.         console.log(document.domain);
    16.         console.log(document.title);
    17.         console.log(document.URL);
    18.     </script>
    19. </body>
    20.  
    21. </html>

    write()写入HTML表达式或JS代码
    getElementById()返回指定id的第一个对象的引用
    getElementByName()返回指定名称的对象集合
    getElementByTagName()返回指定标签名对象集合
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <script>
    13.         document.write('I am');
    14.  
    15.         function reWrite() {
    16.             document.write('rew');
    17.         }
    18.     </script>
    19.     <button onclick="reWrite()">onclick</button>
    20. </body>
    21.  
    22. </html>

     

    try1

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         div {
    11.             margin: 0 auto;
    12.             width: 500px;
    13.         }
    14.         
    15.         #sec {
    16.             color: red;
    17.             font-size: 30px;
    18.         }
    19.     </style>
    20. </head>
    21.  
    22. <body>
    23.     <div>
    24.         <h2>恭喜您，支付成功!</h2>
    25.         <p><span id="sec">10</span>s后自动返回首页</p>
    26.         <button>立即返回</button>
    27.     </div>
    28.     <script>
    29.         window.onload = function() {
    30.             let timer = 10;
    31.             setInterval(() => {
    32.                 timer--;
    33.                 document.getElementById('sec').innerText = timer;
    34.                 if (timer == 0) {
    35.                     location.href = 'https://www.bilibili.com';
    36.                 }
    37.             }, 1000);
    38.         }
    39.         document.getElementsByTagName('button')[0].onclick = function() {
    40.             location.href = 'https://www.bilibili.com';
    41.         }
    42.     </script>
    43. </body>
    44.  
    45. </html>

    ③ window 对象表浏览器的一个实例，双重角色，即JS访问浏览器窗口的一个接口和ECMAScript的全局对象。

    （1）window对象是BOM（Browser Object Model）的核心对象，BOM其他对象，如document、location、navigator、screen、history，就是window对象的子对象。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <script>
    13.         var age = 18;
    14.         console.log(age); //18
    15.         console.log(window.age); //18
    16.         function sayAge() {
    17.             console.log(age);
    18.         }
    19.         sayAge(); //18
    20.         window.sayAge(); //18
    21.         // 全局定义了变量 age 和函数 sayAge()，
    22.         // 则它们自动转为window对象的属性或方法，
    23.         // window.age和window.sayAge()可以访问age和sayAge()
    24.     </script>
    25. </body>
    26.  
    27. </html>

     

     （2）window对象中两个函数

    同异
    setTimeout(code/function,milliseconds);实现一个函数在指定的时间（毫秒）之后运行几毫秒后运行
    setInterval(code/function,milliseconds);间隔几毫秒就重复运行
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <script>
    13.         setTimeout(function() {
    14.             console.log('hello');
    15.         }, 1000);
    16.  
    17.         setInterval(function() {
    18.             console.log('hello');
    19.         }, 1000);
    20.  
    21.         var timer = setInterval(function() {
    22.             console.log('hi');
    23.         }, 2000);
    24.         clearInterval(timer); //取消定时器
    25.     </script>
    26. </body>
    27.  
    28. </html>

  • 相关阅读:
    AgeDB(data.Dataset)
    ChatGPT研究论文提示词集合3-【数据收集】、【数据分析】和【解释与讨论】
    Web3中文｜10月份超48%的以太坊NFT交易额是假的
    定时器浅析
    【Gradle自动化构建编程框架】一、介绍
    《第一堂棒球课》：走进棒球运动·美职棒小联盟
    批量检查多台服务器 高亮打印每个IP 绿底红字
    英语考试的作文模板
    工厂设计模式
    【JavaScript】video标签配置及相关事件：
  • 原文地址：https://blog.csdn.net/weixin_63492023/article/details/133616162