冯佳丽_20210114冯佳丽

知识点总结

1、关于bom

window 浏览器窗体的对象
location 有关当前 URL 的信息 Window 对象的一个部分,可通过 window.location 属性来访问。
history 用户(在浏览器窗口中)访问过的 URL 可通过 window.history 属性对其进行访问

2、关于弹出层

2.1、普通弹出层
window.alert("弹出层语句");
注:window可以省略
alert("弹出层语句");
2.2、输入弹出层
window.promopt("标题语","输入框的初始值");
2.3、确认弹出层
window.comfirm("确认文字部分")

3、关于console

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

运行结果:

4、关于定时器

方法 含义
setInterval(code,millisec,lang) 按照指定的周期(以毫秒计)来调用函数或计算表达式。
方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
setTimeout(code,millisec,lang) 在指定的毫秒数后调用函数或计算表达式

注:

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部分不熟悉,主要自己要想通原理,然后通过属性方法实现功能。多思考多练习,感觉自己爱忘,需要加强记忆哦!

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1