016Day-移动端事件、BOM、windows对象常用方法、定时器方法、计时牌练习

本文链接：https://blog.youkuaiyun.com/yanxiaona111/article/details/108310349

本文详细介绍了移动端事件及其属性，如touches、targetTouches和changedTouches。接着讲解了BOM（浏览器对象模型）的核心——window对象，强调了其在JavaScript中的重要地位和作用。内容包括window对象的常用方法，如alert、confirm、prompt，以及open、close、setInterval等，并通过实例展示了如何实现5秒倒计时关闭窗口和计时牌的练习。此外，还讨论了moveTo、moveBy、resizeTo、resizeBy等方法，以及location对象的属性和方法在页面导航中的应用。

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

一、移动端事件介绍

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
<div></div>

<script>
    var div = document.querySelector("div");
    div.ontouchstart = function () {
        console.log ("触屏开始");
    }
    div.ontouchend = function () {
        console.log ("触屏结束");
    }
    div.ontouchmove = function () {
        console.log ("触屏中");
    }
</script>

二、移动端事件属性

移动端事件属性
touches: TouchList {0: Touch, length: 1}
屏幕上所有的触摸点的信息。
targetTouches: TouchList {0: Touch, length: 1}
响应事件的元素对象上面的所有的点的信息
changedTouches: TouchList {0: Touch, length: 1}
触发当前事件的屏幕上的触摸点的信息

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
<div></div>

<script>
    var div = document.querySelector ("div");
    div.ontouchstart = function (e) {
        e = e || window.event;
        console.log (e);
    }
</script>

三、BOM介绍

js的三大组成部分：
1：ECMAScript
js的核心。规定了js的基本语法，基本类型，流程控制，函数、对象等等。
2：DOM：Document Object Model
规定了如何通过js访问页面文档。核心对象是 document。
document 是规范的核心，用于让各个浏览器厂商来表示页面文档对象的。
通过document对象就可以访问整个页面的文档。
3：BOM：Broswer Object Model
BOM 也是js 的规范的一部分。规定了如何通过js语言来访问浏览器对象。
在BOM中代表了整个浏览器窗口对象的对象是 window 对象。
【window 对象是各个不同浏览器厂商根据BOM规范提供给js用于访问自己浏览器对象的对象。】
学习BOM 就是学习window对象的使用。
window对象的使用：
window对象的属性+方法的学习。
window对象的很多重要的属性也是对象。还要学习window对象的属性的属性和方法。
document对象就是window对象的一个属性对象。

四、 window对象介绍

window对象：
1：window对象是BOM的核心，是BOM规范中的顶层对象。代表了当前的浏览器窗口对象。
2：通过window对象可以访问整个浏览器窗口中的内容。
3：window对象是一个全局对象，直接使用即可。document对象就是window对象的一个属性。作为window对象的属性和方法，都是可以直接使用的。也可以通过[window.属性|方法]来访问。
4：如果在全局作用域下，定义的全局变量或者是全局函数，那么也会作为window对象的属性和方法存在。
5: 如果在全局作用域下使用 this ，那么this 代表了window对象。全局函数中的this同样也代表了window对象。可以使用this 来区分同名的局部变量和全局变量。
6：对于window对象来说，该对象不需要创建，当浏览器窗口被打开的时候，该对象就已经创建好了，直接使用即可。而且一个浏览器窗口对应一个window对象。多个浏览器窗口就对应多个window对象。通过不同的window对象访问不同的浏览器窗口。当窗口被关闭的时候，对应的window对象被销毁。
补充：函数中的this，代表了当前对象。代表了当前调用该方法的对象。

<script>
    console.log (window);
    var num = 10;
    console.log (window.num);
    function test() {
        console.log (1);
        var num = 100;
        console.log (num);//局部的
        console.log (this.num);//全局的
        console.log (window.num);//全局的
        console.log (this === window);//true
    }

    console.log (this === window);//true

    window.test();

    var obj = {
       name:"小刚",
       study:function () {
           console.log (this);
       }
    }
    obj.study();

</script>

五、 window对象的常用方法

window对象的常用方法：
1：alert(msg): 警告提示框
在当前窗口中弹窗显式实参的内容。弹窗的显示的风格取决于浏览器。
而且该方法具有暂停当前程序执行的功能。阻塞式方法。只有点击了确定，才能继续后续代码的执行。
返回：void
2：confirm(msg): 确认提示框
用于确认某些操作的，自带确定取消按钮。
返回：布尔。点击确定返回true，点击取消返回false。
3: prompt(msg) : 输入框，返回输入的内容，string类型。
4：isNaN(num): 用来判断当前实参是否是NaN的。如果是返回true，否则返回false。
5: isFinite(num): 判断实参是否是有穷数。是true，不是false。

<script>
    //alert
    window.alert("轻轻的我将离开你，请将眼角的泪拭去！");
    console.log ("hello");

    //confirm
    var con = window.confirm("轻轻地我将离开你？");
    console.log (con);

    window.prompt("请输入你的目前资产？");

    console.log (window.isNaN(NaN));//true

    console.log (window.isFinite(Infinity));//false

</script>

六、 window对象的常用方法-open

window对象的常用方法：open
作用：用来打开一个浏览器窗口对象。
语法：window.open(url,windowName,windowFeature)
url: 打开的窗口的默认打开的网址信息。string
url 省略：about：blank
windowName：给窗口起的名字。如果已经存在改名字的窗口，那么会在已经存在的窗口中打开新内容。不会打开新窗口。
省略：_blank
windowFeature：窗口的属性信息。
返回：新的窗口对象。

<script>
    var div = document.createElement('div');
    div.style.width = "200px";
    div.style.height = "200px";
    div.style.backgroundColor = "red";
    div.onclick = function(){
        //打开空白窗口。
        // window.open();
        var newWin = window.open("http://www.163.com","neteasy","width=300,height=300,top=300,left=300");
        console.log (newWin);
    };
    document.body.appendChild(div);

</script>

七、 window对象常用方法

window对象常用方法：
window.close():
作用：关闭当前窗口对象。
自己关闭自己：测试结果。谷歌、火狐、IE都可以

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="box"></div>
<button id="btn">关闭自己</button>
<script>
    //使用open打开一个空白窗口，三秒之后关闭该窗口。
    var box = document.getElementById("box");
    box.onclick = function () {
        var newWindow = window.open();
        var timer = setInterval(function () {
            newWindow.close();
            clearInterval(timer);
        },3000);
    };
    //自己关闭自己
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        //window.close();
        close();
    }
</script>

八、5秒倒计时关闭当前窗口

关闭倒计时：<span>5</span>
<script>
    var span = document.querySelector("span");
    var time = 5;

    var timer = setInterval(function () {
        //设置时间自减
        span.innerHTML = --time;
        if(time === 0){
            //先清除定时器
            clearInterval(timer);
            window.close();
        }
    },1000);
</script>

九、定时器方法-setInterval

window常用方法：setInterval(callback，intervalTime)
callback: 间隔执行的回调函数。可以是有名函数的名字，或者是匿名函数。
intervalTime：间隔的事件，单位毫秒。
作用：间隔指定的时间，执行指定的函数。
该方法也称为“间歇性执行函数”
语法：window.setIntervale()
返回：定时器编号。编号从1开始，依次递增。
特点：该方法是异步执行的方法。
同步执行：synchronize
按照顺序，从上到下依次执行。是一种数据相对安全的执行的方式。
异步执行：asynchronize
不用等待代码执行完毕之后才能执行后续的内容。
异步执行的数据具有一定的安全隐患。
优点：不用等待异步代码执行完毕就可以执行后续的代码。
定时器的销毁：使用window.clearInterval(定时器编号) 来销毁指定编号的
定时器。
注意：页面中可以同时开启任意个定时器。
如果定时器被清除了，那么该定时器的编号是否可以立即被复用？
测试结果：没有复用。依次递增。

<script>
    setInterval(startTimers,1000);
    setInterval(clearTimers,1000);

    //每隔2s启动一个定时器。
    var timers = [];
    function startTimers() {
        var timer = setInterval(function () {
        },2000);
        console.log ("产生了定时器："+timer);
        timers.push(timer);
    }
    //清除定时器的方法。
    function clearTimers() {
        if(timers.length > 0){
            var pop = timers.pop();
            console.log ("定时器编号为："+pop+"的定时器被删除了");
            clearInterval(pop);
        }
    }
</script>

十、练习-计时牌

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #box {
            width: 400px;
            border: orange 1px solid;
            margin: 50px auto;
        }
        #ym {
            height: 100px;
            line-height: 100px;
            font-size: 48px;
            text-align: center;
        }
        #date {
            height: 200px;
            line-height: 200px;
            text-align: center;
            background: orange;
            font-size: 100px;
        }
        #week {
            height: 100px;
            line-height: 100px;
            font-size: 48px;
            text-align: center;
        }
        #hms {
            height: 100px;
            line-height: 100px;
            font-size: 48px;
            text-align: center;
        }
    </style>
</head>

<body>
<div id="box">
    <div id="ym"></div>
    <div id="date"></div>
    <div id="week"></div>
    <div id="hms"></div>
</div>

<script>
    var ymDiv = document.getElementById("ym");
    var dateDiv = document.getElementById("date");
    var weekDiv = document.getElementById("week");
    var hmsDiv = document.getElementById("hms");

    updateDate();

    var timer = setInterval(updateDate,1000);

    //每隔一秒，得到一次当前系统时间，设置显式
    function updateDate() {
        //会产生很多date对象。
        var nowDate = new Date();
        //获得具体的属性。
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1;
        ymDiv.innerHTML = `${year}年${month}月`;
        //设置日期
        var date = nowDate.getDate();
        dateDiv.innerHTML = date;
        //设置星期
        var weeks = ["日","一","二","三","四","五","六"];
        var day = nowDate.getDay();
        weekDiv.innerHTML = "星期"+weeks[day];

        var hours = nowDate.getHours();
        hours = hours < 10 ? '0'+hours : hours;
        var minutes = nowDate.getMinutes();
        minutes = minutes < 10 ? '0'+minutes : minutes;
        var seconds = nowDate.getSeconds();
        seconds = seconds < 10 ? '0'+seconds : seconds;
        hmsDiv.innerHTML = `${hours}时${minutes}分${seconds}秒`;
    }

</script>

十一、练习计时牌-优化

消耗资源：
申请内存：
能少创建对象就少创建对象。
能复用就复用。
能不在循环中创建对象就不在循环中创建。
优化的策略：不要每一秒产生一个对象。

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #box {
            width: 400px;
            border: orange 1px solid;
            margin: 50px auto;
        }
        #ym {
            height: 100px;
            line-height: 100px;
            font-size: 48px;
            text-align: center;
        }
        #date {
            height: 200px;
            line-height: 200px;
            text-align: center;
            background: orange;
            font-size: 100px;
        }
        #week {
            height: 100px;
            line-height: 100px;
            font-size: 48px;
            text-align: center;
        }
        #hms {
            height: 100px;
            line-height: 100px;
            font-size: 48px;
            text-align: center;
        }
    </style>
</head>

<body>
<div id="box">
    <div id="ym"></div>
    <div id="date"></div>
    <div id="week"></div>
    <div id="hms"></div>
</div>

<script>
    var ymDiv = document.getElementById("ym");
    var dateDiv = document.getElementById("date");
    var weekDiv = document.getElementById("week");
    var hmsDiv = document.getElementById("hms");

    //就产生一个对象。
    var nowDate = new Date();
    //启动刷新界面
    updateDate();

    var timer = setInterval(updateDate,1000);

    //每隔一秒，得到一次当前系统时间，设置显式
    function updateDate() {
        //获得具体的属性。
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1;
        ymDiv.innerHTML = `${year}年${month}月`;
        //设置日期
        var date = nowDate.getDate();
        dateDiv.innerHTML = date;
        //设置星期
        var weeks = ["日","一","二","三","四","五","六"];
        var day = nowDate.getDay();
        weekDiv.innerHTML = "星期"+weeks[day];

        var hours = nowDate.getHours();
        hours = hours < 10 ? '0'+hours : hours;
        var minutes = nowDate.getMinutes();
        minutes = minutes < 10 ? '0'+minutes : minutes;
        var seconds = nowDate.getSeconds();
        //让当前时间对象自增一秒
        nowDate.setSeconds(seconds + 1);

        seconds = seconds < 10 ? '0'+seconds : seconds;
        hmsDiv.innerHTML = `${hours}时${minutes}分${seconds}秒`;
    }

</script>

十二、练习移动的广告牌

 <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: coral;
            position: fixed;
            left: 0;
            top: 0;
        }

        span {
            float: right;
            width: 30px;
            height: 30px;
            background-color: cyan;
            border-radius: 50%;
            font-size: 16px;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>
<div id="box"><span>×</span></div>
<script>
    var brand = document.getElementById ("box");
    var span = document.querySelector("span");
    //获得视口的宽度
    var viewClient = document.documentElement || document.body;
    var viewWidth = viewClient.clientWidth;
    var viewHeight = viewClient.clientHeight;

    //x轴的初始速度
    var speedX = 2;
    var speedY = 2;
    const INTERVAL = 10;

    //获得内部或者外部样式
    var styles = getStyles (brand);

    var timer = setInterval(move,INTERVAL);

    //浮动停止
    brand.onmouseover = function () {
        clearInterval(timer);
    }
    brand.onmouseout = function () {
        timer = setInterval(move,INTERVAL);
    }
    //关闭
    span.onclick = function () {
        brand.style.display = "none";
    }

    //广告牌移动的方法
    function move() {
        //获得当前距离左边界的距离
        var left = parseInt (styles.left);
        if (left <= 0) {//左边界
            speedX = 2;
        }
        if(left >= viewWidth - brand.offsetWidth){//右边界
            speedX = -2;
        }
        //修改div的left样式
        brand.style.left = left + speedX + "px";

        var top = parseInt (styles.top);
        if (top <= 0) {//左边界
            speedY = 2;
        }
        if(top >= viewHeight - brand.offsetHeight){//右边界
            speedY = -2;
        }
        //修改div的left样式
        brand.style.top = top + speedY + "px";
    }

    //获得指定元素的内部或者外部样式对象的兼容方法
    function getStyles(ele) {
        if (window.getComputedStyle)
            return getComputedStyle (ele);
        return ele.currentStyle;
    }
</script>

十三、定时器方法

window常用方法：setTimeOut(callback,delayTime)：
参数：延迟 delayTime （毫秒）时间之后，执行一次 callback。
延迟执行函数。
返回：定时器编号。
清除定时编号：clearTimeOut(编号)；
注意：如果在没有到达延迟的时间之内删除了定时器，那么就依次都不会执行。
该函数最多执行一次回调函数。

<button>5秒之后打开网易</button>
<button id="btn">清除</button>

<script>
    //5s之后打开指定的窗口
    var btn = document.querySelector ("button");
    var timer = 0;
    btn.onclick = function () {
        timer = setTimeout (function () {
            window.open ("http://www.163.com");
            clearTimeout (timer);
        }, 5000);
        console.log ("延迟执行："+timer);//2
    };

    var interval = setInterval(function () {
    },100);
    console.log (interval);//1

    var clear = document.getElementById ("btn");
    clear.onclick = function () {
        clearTimeout (timer);
    }
</script>

十四、方法-moveTo-moveBy

了解：
moveTo(x,y);
将当前窗口移动至指定的屏幕的位置。
moveBy(offsetX,offsetY)
将当前窗口的坐标改变指定的值。

十五、方法-resizeTo-resizeBy

了解：
resizeTo(width,height)
将当前窗口的宽度和高度设置为指定的值。
resizeBy(offsetWidth,offsetHeight)
将当前窗口的宽度和高度改变指定的值。

十六、方法-scrollTo-scrollBy

scrollTo(left,top)
将窗口的滚动的距离设置为指定的值。
scrollBy(offsetX,offsetY)
将窗口的滚动的距离改变指定的值。

  <style>
        body{
            height: 3000px;
        }
        #to{
            position: fixed;
            left: 10px;
            bottom: 30px;
        }
        #by{
            position: fixed;
            left: 100px;
            bottom: 30px;
        }
    </style>
</head>
<body>
<button id="to">scrollTo</button>
<button id="by">scrollBy</button>

<script>
    var toBtn = document.getElementById("to");
    toBtn.onclick = function () {
        window.scrollTo(0,500);
    }
    var byBtn = document.getElementById("by");
    byBtn.onclick = function () {
        window.scrollBy(0,-20);
    }
</script>

十七、 window对象的常用属性：location

window对象的常用属性：location
1：location：是一个对象。和document.location 是同一个对象。可以直接使用。
2：location 对象代表了浏览器窗口中的地址栏部分。
location对象的属性如下：
***1：href 属性：代表了地址栏中的地址信息。可以通过修改该属性实现页面的跳转。
而且会产生浏览记录。
2: protocol: url 地址信息中使用的协议。http https
3：host：访问的主机的域名+端口号。
4：hostname：域名|主机名
域名对应IP地址。域名可以确定和网络中的哪个计算机通信。
5：port：端口号
端口号确定了和计算机中的哪个软件通信。不同的软件使用了不同的端口号。
http://www.baidu.com
www.baidu.com: 百度服务器的主机的域名。
IP地址：任何网络中的一台主机都必须有一个唯一的IP地址。可以通过它的ip地址唯一的定位到该主机。网络中的主机通常不直接通过ip地址来访问。ip地址不容易记忆，主机都会有一个名称，域名。该域名可以唯一的对应一个ip地址。
DNS服务器（域名解析服务器）就负责将域名解析为该域名对应的ip地址。
6：pathname：请求的文件的路径。
7：search：请求的参数。? 后的内容。
location 的方法：
**1：assign(url): 在当前页面打开指定的url。并产生浏览记录。可以后退。
**2: reload(): 相当于页面点击刷新按钮。重新装载当前页面。使用缓存装载。
如果reload(true) ：这样使用，意味着强制刷新页面，不使用缓存刷新。
**3: replace(url): 使用指定的url的页面替换当前页面，不会产生浏览记录。没有后退。

<button id="baidu">百度一下</button>
<button id="assign">assign</button>
<button id="reload">reload</button>
<button id="replace">replace</button>

<script>
    console.log (window.location === document.location);//true
    var baidu = document.getElementById ("baidu");
    baidu.onclick = function () {
        //获得
        //http://localhost:63342/web-js/18.window%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7-location.html?_ijt=kr2evh3sk2u4ubun3d91jkd65e
        console.log (window.location.href);
        console.log (location.protocol);
        console.log (location.host);
        console.log (location.hostname);
        console.log (location.port);
        console.log (location.pathname);
        console.log (location.search);
        //修改
        // window.location.href = "http://www.163.com";
    };

    var assign = document.getElementById ("assign");
    assign.onclick = function () {
        location.assign ("http://www.163.com");
    }
    var reload = document.getElementById ("reload");
    reload.onclick = function () {
        location.reload ();
    }
    var replace = document.getElementById("replace");
    replace.onclick = function () {
        location.replace("http://www.baidu.com");
    }

</script>