JavaScript(BOM浏览器对象模型、定时器(包含京东倒计时效果案例和发送短信案例))

最新推荐文章于 2022-10-06 22:49:52 发布

退堂鼓职业选手

最新推荐文章于 2022-10-06 22:49:52 发布

阅读量460

点赞数 1

分类专栏：学习记录JavaScript 文章标签： javascript js css html5

本文链接：https://blog.youkuaiyun.com/weixin_45886797/article/details/119389819

版权

学习记录JavaScript 专栏收录该内容

9 篇文章

订阅专栏

JSday11

文章目录

JSday11
- BOM浏览器对象模型

BOM浏览器对象模型

BOM概述

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心为window。

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

DOM	BOM
文档对象模型	浏览器对象模型
将文档当做对象来看待	将浏览器当做对象看待
顶级对象为document	顶级对象是window
主要是操作页面的元素	浏览器窗口交互的一些对象
是W3C标准规范	是浏览器厂商在各自浏览器上定义的，兼容性较差

window对象是浏览器的顶级对象，具有双重角色

它是JS访问浏览器窗口的一个接口
它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window。

window对象常见事件

窗口加载事件

window.onload = function(){}
或
window.addEventListener("load",function(){});

window.load是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等(IE9以上)。

若页面图片很多时该事件较为合适。

调整窗口大小事件

window.onresize = function(){}
window.addEventListener("resize",function(){});

只要窗口大小像素发送变化，就会触发这个事件
利用该事件完成响应式布局。window.innerWidth当前屏幕的宽度。

定时器

两种定时器

setTimeout()

window.setTimeout(调用函数，[延迟的毫秒数]);

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

页面中可能有很多的定时器，我们经常给定时器加标识符(名字)

var time1 = setTimeout(callback,3000)	// callback为自定义函数,此时时间为3秒
var time2 = setTimeout(callback,3000)

setTimeout()这个调用函数我们也称为回调函数callback。

普通函数是按照代码顺序直接调用

而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

停止setTimeout()定时器

window.clearTimeout(timeoutID)	//ID即定时器名字

clearTimeout()方法取消了先前用过调用setTimeout()建立的定时器。(window可省略)

<body>
    <button>点击停止定时器</button>

    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function(){
            console.log('Boom~');
        },5000)
        btn.addEventListener('click',function(){
            clearTimeout(timer);
        })
    </script>
</body>

setInterval()

window.setInterval(回调函数,[间隔的毫秒数]);

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

window可以省略
这个调用函数可以直接写函数，或者函数名或者采取==字符串’函数名()’==三种形式。
间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

案例1：京东倒计时效果

案例分析:

倒计时是不断变化的，因此需要定时器来自动变化(setInterval)
三个黑色盒子分别存放时分秒
三个黑色盒子利用innerHTML放入计算的小时分钟秒数
第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题

<html>
	<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 {
		  width: 200px;
		  height: 300px;
		  margin: 200px 200px;
		  background: red;
		  position: relative;
		}

		.txt {
		  width: 150px;
		  height: 50px;
		  text-align: center;
		  line-height: 50px;
		  color: #fff;
		  font-size: 30px;
		  font-weight: 900;
		  position: absolute;
		  left: 25px;
		  top: 50px;
		}

		.hour {
		  left: 20px;
		}

		.h_m {
		  left: 68px;
		}

		.minute {
		  left: 80px;
		}

		.m_s {
		  right: 68px;
		}

		.second {
		  left: 140px;
		}

		.hour,
		.minute,
		.second {
		  position: absolute;
		  top: 200px;
		  color: #fff;
		  font-weight: 800;
		  font-size: 20px;
		  text-align: center;
		  line-height: 40px;
		  width: 40px;
		  height: 40px;
		  background: black;
		}

		.h_m,
		.m_s {
		  color: #fff;
		  font-size: 20px;
		  font-weight: 900;
		  position: absolute;
		  bottom: 70px;
		}

		.words {
		  margin-top: 160px;
		  font-size: 18px;
		  color: white;
		  margin-left: 20px;
		  text-align: center;
		  position: absolute;
		}
	  </style>
	</head>

	<body>
	  <div id="box">
		<div class="txt">KT5秒杀</div>
		<div class="words"><strong>18:00</strong> 点场 倒计时</div>
		<div class="hour"></div>
		<!-- 小时与分钟之间的冒号 -->
		<span class="h_m">:</span>
		<div class="minute"></div>
		<!-- 分钟与秒之间的冒号 -->
		<span class="m_s">:</span>
		<div class="second"></div>
	  </div>
	</body>
	<script>
	  //1、获取元素
	  var hour = document.querySelector(".hour");
	  var minute = document.querySelector(".minute");
	  var second = document.querySelector(".second");
	  var inputTime = +new Date("2021-8-4 18:00:00");//倒计时的结束时间，自己设置时间
	  countDown();									 //先调用一次这个函数 防止第一次刷新页面有空白
	  //2、开启定时器
	  setInterval(countDown, 1000);					 //1000毫秒，每一秒钟调用一次函数
	  //3、倒计时-时分秒函数
	  function countDown() {
		var nowTime = +new Date(); 					 //返回的是当前时间的总的毫秒数
		var times = (inputTime - nowTime) / 1000;    // times是剩余时间的总的毫秒数
		var h = parseInt(times / 60 / 60 % 24);
		h = h < 10 ? '0' + h : h;					 //判断数值小于10的情况 如 0-9改为 00-09
		hour.innerHTML = h;					  		 //更改div里面的内容 把h给获取元素hour的内容
		var m = parseInt(times / 60 % 60);
		m = m < 10 ? "0" + m : m;
		minute.innerHTML = m;						 //同上
		var s = parseInt(times % 60);
		s = s < 10 ? "0" + s : s;
		second.innerHTML = s;						 //同上
	  }
	</script>

</html>

停止setInterval()定时器

window.clearInterval(interval);

clearInterval()方法取消了先前通过调用setInterval()建立的定时器。

注意：

window可以省略
里面的参数就是定时器的标识符。

案例2：发送短信

点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。

1. 按钮点击之后，会禁用disable为true
2. 同时按钮里面的内容会变化，主要button里面的内容通过innerHTML修改
3. 里面秒数是有变化的，因此需要用到定时器
4. 定义一个变量，在定时器里面不断递减
5. 如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态

手机号码： <input type="number"> <button>发送</button>
<script>
    var btn = document.querySelector('button');
    var time = 60; // 定义剩下的秒数
    btn.addEventListener('click', function() {
        btn.disabled = true;
        var timer = setInterval(function() {
            if (time == 0) {
                // 清除定时器和复原按钮
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
                time = 60;
            } else {
                btn.innerHTML = '还剩下' + time + '秒';
                time--;
            }
        }, 1000);

    })
</script>