前端作业（17）

咋的啥名都用不了呢~

已于 2023-10-08 18:00:05 修改

阅读量201

点赞数

文章标签：前端

于 2023-10-07 17:38:52 首次发布

本文链接：https://blog.csdn.net/weixin_63492023/article/details/133616162

版权

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

支付倒计时

1. 支付10s倒计时

<!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>支付10s倒计时</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #eee;
            padding: 20px;
            margin: 0 auto;
        }
        
        button {
            margin: 30px 25px;
        }
    </style>
</head>

<body>
    <div>
        <table>
            <tr>
                <td>商品:</td>
                <td>Web前端课程</td>
            </tr>
            <tr>
                <td>原价:</td>
                <td>1980元</td>
            </tr>
            <tr>
                <td>现价:</td>
                <td>1.98元</td>
            </tr>
            <tr>
                <td>内容:</td>
                <td>HTML</td>
            </tr>
            <tr>
                <td>地址:</td>
                <td>北京朝阳区</td>
            </tr>
            <tr></tr>
            <tr>
                <td><button>取消</button></td>
                <td><button>确定</button></td>
            </tr>
            <tr></tr>
        </table>
    </div>
    <script>
        // 用getElementsByTagName()方法获取button,因为支付是第二个，所以后跟[1],数组从0开始计数，所以是1
        // 1. 声明范围：
        // let块作用域
        // if (true) {
        //     let a1 = 'ss';
        //     console.log(a1); // ss
        // }
        // console.log(a1); // ReferenceError
        // var函数作用域
        // if (true) {
        //     var a1 = 'ss';
        //     console.log(a1); // ss
        // }
        // console.log(a1); //ss
        // 2. let定义变量不能预解析，提前调用会报错 ReferenceError; var相反，可以预解析，结果为 undefined
        // console.log(a1); // ReferenceError
        // console.log(a2); // undefined
        // let a1 = 'ss';
        // var a2 = 'as';
        document.getElementsByTagName('button')[1].onclick = function() {
            let res = window.confirm('您确定吗？');
            if (res) {
                location.href = 'payment.html';
            }
        }
    </script>
</body>

</html>

① 常用输入输出语句：

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

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

body	对 body 元素直接访问
cookie	设置或返回文档相关的所有cookie
domain	返回文档域名
title	返回文档标题
URL	返回文档URL

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

<body>
    <script>
        console.log(document.body.scrollWidth);
        console.log(document.cookie);
        console.log(document.domain);
        console.log(document.title);
        console.log(document.URL);
    </script>
</body>

</html>

write()	写入HTML表达式或JS代码
getElementById()	返回指定id的第一个对象的引用
getElementByName()	返回指定名称的对象集合
getElementByTagName()	返回指定标签名对象集合

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

<body>
    <script>
        document.write('I am');

        function reWrite() {
            document.write('rew');
        }
    </script>
    <button onclick="reWrite()">onclick</button>
</body>

</html>

try1

<!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>
        div {
            margin: 0 auto;
            width: 500px;
        }
        
        #sec {
            color: red;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div>
        <h2>恭喜您，支付成功!</h2>
        <p><span id="sec">10</span>s后自动返回首页</p>
        <button>立即返回</button>
    </div>
    <script>
        window.onload = function() {
            let timer = 10;
            setInterval(() => {
                timer--;
                document.getElementById('sec').innerText = timer;
                if (timer == 0) {
                    location.href = 'https://www.bilibili.com';
                }
            }, 1000);
        }
        document.getElementsByTagName('button')[0].onclick = function() {
            location.href = 'https://www.bilibili.com';
        }
    </script>
</body>

</html>

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

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

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

<body>
    <script>
        var age = 18;
        console.log(age); //18
        console.log(window.age); //18
        function sayAge() {
            console.log(age);
        }
        sayAge(); //18
        window.sayAge(); //18
        // 全局定义了变量 age 和函数 sayAge()，
        // 则它们自动转为window对象的属性或方法，
        // window.age和window.sayAge()可以访问age和sayAge()
    </script>
</body>

</html>

（2）window对象中两个函数

	同	异
setTimeout(code/function,milliseconds);	实现一个函数在指定的时间（毫秒）之后运行	几毫秒后运行
setInterval(code/function,milliseconds);	实现一个函数在指定的时间（毫秒）之后运行	间隔几毫秒就重复运行

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

<body>
    <script>
        setTimeout(function() {
            console.log('hello');
        }, 1000);

        setInterval(function() {
            console.log('hello');
        }, 1000);

        var timer = setInterval(function() {
            console.log('hi');
        }, 2000);
        clearInterval(timer); //取消定时器
    </script>
</body>

</html>