知识点总结

1、关于bom

2、关于弹出层

2.1、普通弹出层

window.alert("弹出层语句");
注：window可以省略
alert("弹出层语句");

2.2、输入弹出层

window.promopt("标题语","输入框的初始值");

2.3、确认弹出层

window.comfirm("确认文字部分")

3、关于console

console.log("日志");
console.error("错误")
console.warn("警告")

运行结果：

4、关于定时器

注：

code:必需。要调用的函数或要执行的代码串

millisec:必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

lang:可选。 JScript | VBScript | JavaScript

5、关于获取网页元素

document———>window.document

document.getElementById("Id选择器的值")

​ getElementsByClassName("class选择器的值")

​ getElementsByName("name的值")

​ getElementByTagName("标签名")

​ querySelector("一个，包含上述的方式")

​ querySelectorAll("多个，包含上述的方式")

注：

多个值是用数组的方式存储

6、开始/暂停时间（案例）

        <p>显示时间</p>
        <hr >
        <button onclick="start()">开始</button>
        <button onclick="pause()">暂停</button>

            // 由于函数作用域的关系，需要写在外面，才能使用
            var timer;
            //开始
            function start(){
                //如果已经开始后，先把之前的清空
                clearInterval(timer)
                // 添加定时器
                timer=setInterval(time,1000)
            }
            function time(){
                var date=new Date()
                var p=document.querySelector("p")
                p.innerHTML=date.toLocaleString()
            }
            //暂停
            function pause(){
                // 停止定时器
                clearInterval(timer)
            }

运行结果：

7、3s后跳转页面(案例)

p{
                padding-top: 100px;
                font-size: 30px;
                text-align: center;
                letter-spacing: 5px;
            }
            span{
                font-weight: 700;
            }
            a{
                text-decoration: none;
            }

<p>页面在<span>3</span>秒后跳转<a href="https://www.baidu.com/">百度</a>页面或者直接点击<a href="https://www.baidu.com/">此处</a>跳转！</p>

        setInterval(subtract,1000)
            function subtract(){
                //获取数字
                var time=document.querySelector("span");
                time.innerText=time.innerText-1;
                if(time.innerText == 0){
                    // 跳转 document.querySelector("#a").href
                    location.href = "https://www.baidu.com/";
                }
            }

结果：

心得体会

js部分不熟悉，主要自己要想通原理，然后通过属性方法实现功能。多思考多练习，感觉自己爱忘，需要加强记忆哦！