JS学习记录（补充三）

Posted 2020-10-01 天上一片红

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS学习记录（补充三）相关的知识，希望对你有一定的参考价值。

BOOM部分

Screen


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Screen</title>
</head>
<body>

</body>
<script>

    console.log(screen.width);
    console.log(screen.height);
    console.log(screen.availWidth);
    console.log(screen.availHeight);

</script>
</html>

结果图：

Location


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location</title>
</head>
<body>
<button onclick="assign()">加载新页面</button>
<button onclick="replace()">替换页面</button>
<button onclick="reload1()">刷新当前页面</button>
<button onclick="reload2()">彻底刷新当前页面</button>
</body>
<script>
    function assign() {
        /*可以返回老页面*/
        location.assign("http://www.baidu.com");
    }
    function replace() {
        /*不能返回老页面*/
        location.replace("http://www.baidu.com");
    }
    function reload1() {
        location.reload();
    }
    function reload2() {
        location.reload(true);
    }



</script>
<!--<script>
    console.log(location.href);/*完整的url*/
    console.log(location.protocol);/*协议*/
    console.log(location.port);/*端口号*/
    console.log(location.hostname);/*主机名称*/
    console.log(location.pathname);/*路径名称*/
    console.log(location.search);/*？后的数据部分*/
</script>-->
</html>

结果图：

History对象
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History对象</title>
</head>
<body>
<a href="Demo40.html">Demo40</a>
    <button onclick="forward()">下一个页面</button>
</body>
<script src="../../js/history.js"></script>
</html>

结果图：

Navigator对象
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigator</title>
</head>
<body>

</body>
<script>
    console.log(navigator.appName);
    console.log(navigator.appVersion);
    console.log(navigator.userAgent);
    console.log(navigator.platform);
</script>
</html>

定时器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
<button onclick="show()">五秒后显示HelloWord</button>
<button onclick="cancelShow()">取消显示HelloWord</button>
<button onclick="cancelShow2()">停止显示HelloWord</button>
</body>
<script>
    //     setTimeout  默认情况下，只会执行一次。
    var hello;
    function show() {
        hello = setTimeout(function () {
            alert("HelloWord!");
        }, 500);
    }
    function cancelShow() {
        clearTimeout(hello);
    }
</script>
<!--<script>
    //    setInterval 根据指定的时间，循环执行。

    var hello2 = setInterval(function () {
        console.log("HelloWord!");
    }, 1000);
    function cancelShow2() {
        clearTimeout(hello2);
    }
</script>-->
</html>

结果图：

confirm(对话框中显示的纯文本)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>confirm(对话框中显示的纯文本)</title>
</head>
<body>

</body>
<script>
    var flag=confirm("确认样删除此信息吗？");
    if(flag){
        alert("删除成功");
    }
    else {
        alert("你取消了删除");
    }
    /*注意confirm与prompt和alert的区别*/
</script>
</html>

结果图：

以上是关于JS学习记录（补充三）的主要内容，如果未能解决你的问题，请参考以下文章