初识JavaScript （十六）

最新推荐文章于 2022-06-07 22:22:13 发布

打酱油的女孩子

最新推荐文章于 2022-06-07 22:22:13 发布

阅读量200

点赞数

分类专栏： js 文章标签： js javascript bom

本文链接：https://blog.csdn.net/weixin_38341556/article/details/108232604

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

初识JavaScript （十六）

1 移动端事件介绍

移动设备事件介绍：
1：touchstart：第一次触摸屏幕的时候触发。
2：touchend：手离开屏幕的时候触发。
3：touchmove：在屏幕上滑动的时候触发。
4：touchcancel：触摸事件取消，当系统发生优先级更高的事件的时候，触摸事件会被取消。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
</body>
</html>

2 移动端事件属性

移动端事件属性
touches: TouchList {0: Touch, length: 1}
屏幕上所有的触摸点的信息。

targetTouches: TouchList {0: Touch, length: 1}
响应事件的元素对象上面的所有的点的信息

changedTouches: TouchList {0: Touch, length: 1}
触发当前事件的屏幕上的触摸点的信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <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>
</body>
</html>

3 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对象的一个属性对象。

4 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，代表了当前对象。代表了当前调用该方法的对象。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<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>
</body>
</html>

5 window对象的常用方法-alert-confirm-prompt-isNaN-isFinite

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。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<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>
</body>
</html>

6 window对象的常用方法-open

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<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>
</body>
</html>

7 window对象常用方法-close

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
</body>
</html>

8 5秒倒计时关闭当前窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
关闭倒计时：<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>
</body>
</html>

9 定时器方法-setInterval

window常用方法：setInterval(callback，intervalTime)
callback: 间隔执行的回调函数。可以是有名函数的名字，或者是匿名函数。
intervalTime：间隔的事件，单位毫秒。
作用：间隔指定的时间，执行指定的函数。
该方法也称为“间歇性执行函数”
语法：window.setIntervale()
返回：定时器编号。编号从1开始，依次递增。
特点：该方法是异步执行的方法。
同步执行：synchronize
按照顺序，从上到下依次执行。是一种数据相对安全的执行的方式。
异步执行：asynchronize
不用等待代码执行完毕之后才能执行后续的内容。
异步执行的数据具有一定的安全隐患。
优点：不用等待异步代码执行完毕就可以执行后续的代码。

定时器的销毁：使用window.clearInterval(定时器编号) 来销毁指定编号的
定时器。

注意：页面中可以同时开启任意个定时器。
如果定时器被清除了，那么该定时器的编号是否可以立即被复用？
测试结果：没有复用。依次递增。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<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>
</body>
</html>

10 计时牌

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>
</body>

</html>

11 计时牌优化

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>
</body>

</html>

12 移动的广告牌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</body>
</html>

13 定时器方法-setTimeOut

window常用方法：setTimeOut(callback,delayTime)：
参数：延迟 delayTime （毫秒）时间之后，执行一次 callback。
延迟执行函数。
返回：定时器编号。
清除定时编号：clearTimeOut(编号)；

注意：如果在没有到达延迟的时间之内删除了定时器，那么就依次都不会执行。
该函数最多执行一次回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

14 方法-moveTo-moveBy

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

15 方法-resizeTo-resizeBy

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

16 方法-scrollTo-scrollBy

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <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>
</body>
</html>

17 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的页面替换当前页面，不会产生浏览记录。没有后退。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<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>
</body>
</html>