操作BOM

IT00123

已于 2022-08-09 16:46:30 修改

阅读量153

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 开发语言

于 2022-08-09 16:32:23 首次发布

本文链接：https://blog.youkuaiyun.com/IT00123/article/details/126249789

本文介绍了如何使用JavaScript进行网页的基本操作，包括窗口管理和位置控制等，并详细解释了如何运用setTimeout和setInterval实现定时任务，如图片轮播等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.window

window.open()打开

  window.open("网址")

window.close()关闭

获取屏幕

var windowWidth = window.innerWidth

        console.log(windowWidth)

        var windowHeight = window.innerHeight

        console.log(windowHeight)

2.location

location代表了当前页面

name主机名称

3.系统对话框

alert

alert('我是警告框')

confirm()

确认框有两个按钮：“Cancel”（取消）和“OK”（确定）

confirm("你确定吗")

prompt

prompt("你叫什么名字")

assign()

传递一个url参数，打开新url，并在浏览记录中生成一条记录。

replace()

参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录。

reload()

重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。

<body>
    <input type="button" value="assign" id="assign">
    <input type="button" value="reload" id="reload">
    <input type="button" value="replace" id="replace">
    <input type="button" value="href" id="href">

    <script>
        assign.onclick = function() {
            // assign打开并返回时会有记录
            location.assign("https://www.baidu.com")
        }
        reload.onclick = function() {
            //reload页面刷新
            console.log("aaa")
            location.reload("")
        }
        replace.onclick = function() {
            //replace 新文档替换当前的是  会打开新的
            location.replace("https://www.baidu.com")
        }
        href.onclick = function() {
            location.href("https://www.baidu.com")
        }
    </script>
</body>

间歇调用和超时调用

setTimeout()

该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID);

setInterval()

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用。

定时器图片切换

<!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>
<style>
    .box {
        width: 100%;
    }
    
    ul {
        width: 600px;
        height: 30px;
        list-style: none;
        display: flex;
        justify-content: space-around;
    }
    
    ul li {
        width: 20px;
        height: 20px;
        background-color: antiquewhite;
        border-radius: 50%;
        margin-top: -70px;
        margin-left: -50px;
    }
    
    .center {
        width: 600px;
        height: 400px;
        border: 3px solid antiquewhite;
        margin: auto;
    }
    
    img {
        width: 600px;
        height: 400px;
    }
</style>

<body>
    <div class="box">
        <div class="center">
            <img src="../第3/img/bg1.jpg" alt="">
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script>
        var index = 1

        function name() {
            var arr = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg"]
            var a = document.querySelector(".center img")
            a.src = "../第3/img/" + arr[index]
            var lit = document.querySelectorAll("ul li")
            for (var i = 0; i < lit.length; i++) {
                // lit[i].classList.remove("active")
            }
            // lit[index].classList.add("active")

            index++
            if (index > 5) {
                index = 0


            }
        }
        setInterval(name, 1000)
    </script>
</body>

</html>

效果