JavaScript_BOM

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量274 收藏
点赞数 3
分类专栏： 学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duanjiani/article/details/115008895
版权

BOM浏览器对象模型

BOM的概念

  • BOM是指浏览器对象模型，浏览器对象模型提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

Window对象

  • window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window。
  • 注意window下的两个特殊属性：window.name ,window.top。

对话框

  • alert()
  • prompt()
  • confirm()

alert()

语法：window.alert(message)；message是要在对话框中显示的文本字符串，如果传入其他类型的值，会转换成字符串
实例：window.alert("123");
显示如下
alert
tips：警告对话框使用在无需用户确认的情况下，否则应该使用其他类型的对话框，比如：confirm,prompt。

window.confirm()

方法显示一个具有一个可选消息和两个按钮（确定和取消）的模态对话框.
语法：result=window.confirm(message)；message是要在对话框中显示的可选字符串。result是一个布尔值，表示是选择确定还是取消（true表示OK）。
实例：if(window.confirm("Do you like this ")){ window.open("exit.html","thank you"); }

显示如下：
在这里插入图片描述

window.prompt
语法：result=window.prompt(text,value);
显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。
result:用来存储用户输入文字的字符串，或者是NULL。
text：用来提示用户输入文字的字符串，如果没有任何提示内容，该参数可以省略不写。
value：文本输入框中的默认值，该参数可以不写。不过在IE7和8中，省略该参数会导致输入框中显示默认值“undefined”。

var sign = prompt("你是什么星座的?");
if (sign == "天蝎座"){
   alert("哇! 我也是天蝎座的耶!");
}
// 有多种使用prompt方法的方式
var sign = window.prompt(); // 打开空的提示窗口
var sign = prompt();       // 打开空的提示窗口
var sign = window.prompt('你觉得很幸运吗?'); // 打开显示提示文本为"你觉得很幸运吗?"的提示窗口
var sign = window.prompt('你觉得很幸运吗?','是的'); // 打开显示提示文本为"你觉得很幸运吗?"并且输入框默认值为"是的"的提示窗口

加载事件

  1. onload事件
    我们可以给window对象或者等元素添加onload加载事件，表示只有绑定事件的元素加载完毕才能触发事件，才能执行事件函数。其中window对象加载完毕：指的是所有html结构加载完，并且外部引入资源（js,css,img，视频）也加载完毕。
    tips：一个页面只能有一个window.onload加载事件。
    语法：window.οnlοad=func
    实例：window.onload()=function(){ init(); doSomethingElse(); };
    `
<!doctype html>
<html>
  <head>
    <title>onload test</title>
    // ES5
    <script>
      function load() {
        console.log("load event detected!");
      }
      window.onload = load;
    </script>
    // ES2015(aka: ES6)
    <script>
      const load = () => {
        console.log("load event detected!");
      }
      window.onload = load;
    </script>
  </head>
  <body>
    <p>The load event fires when the document has finished loading!</p>
  </body>
</html>`

延时器

  • 延时器是window对象的一个方法，类似于定时炸弹
  • 语法：window.setTimeout(func,time);
  • 第一个参数：延时执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加()。
  • 第二个参数：延时的时间，以毫秒计数，1000毫秒等于1秒。
  • 功能：在指定时间后，延迟执行一个函数。

清除延时器

  • window对象的一个方法
  • 语法：window.clearTimeout(timeout);
  • 参数：指定的延时器变量名引用。
  • 功能：清除指定的延时器。
  • 注意：清除的延时器需要存储到一个变量中，便于后期清除调用。
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<p>举例</p>
	<button onclick="delayedAlert();">开启延时器</button>
	<p></p>
	<button onclick="clearAlert();">取消延时器</button>

	<script type="text/javascript">
		var timeoutID;

		function delayedAlert() {
		  timeoutID = window.setTimeout(slowAlert, 2000);
		}

		function slowAlert() {
		  alert('出现了!');
		}

		function clearAlert() {
		  window.clearTimeout(timeoutID);
		}

	</script>
</body>
</html>

定时器

  • 定时器是是window对象的一个方法，相当于定时闹钟，每隔固定时间响一次。
  • 语法：window.setInterval(func,interval);
  • 第一个参数：每次执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加()。
  • 第二个参数：时间间隔，以毫秒计数，1000毫秒等于1秒。
  • 功能：每隔一个指定的时间，周期性的执行一个函数。

清除定时器

  • window对象的一个方法
  • 语法：window.clearInterval(timer);
  • 参数：指定的定时器变量名引用。
  • 功能：清除指定的定时器。
  • 注意：清除的定时器需要存储到一个变量中，便于后期清除调用。
<!-- 下面的例子里会每隔一秒就调用函数 flashtext() 一次，直至你通过按下 Stop 按钮来清除本次重复操作的唯一辨识符 intervalID。 -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>setInterval/clearInterval example</title>
</head>

<body onload="changeColor();">
  <div id="my_box">
    <p>Hello World</p>
  </div>
  <button onclick="stopTextColor();">Stop</button>

  <script>
    var nIntervId;

    function changeColor() {
      nIntervId = setInterval(flashText, 1000);
    }

    function flashText() {
      var oElem = document.getElementById('my_box');
      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
    }

    function stopTextColor() {
      clearInterval(nIntervId);
    }
  </script>
</body>
</html>

简单运动

原理

  • 简单运动：是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个运动的效果。人眼的视觉残留的时间在0.1–0.4秒之间。
  • 制作方法：通过定时器，实现每隔一段极短的时间（50-100毫秒左右），执行函数，函数内部让运动的属性值发生变化。
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			position: absolute;
		    top: 100px;
		    left: 0;
		    width: 100px;
		    height: 100px;
		    background-color: red;
		}
	</style>
</head>
<body>
	<input type="button" value="开始" id="start">
	<div class="box" id="box"></div>
	<script>
		//获取元素
		var box=document.getElementById("box");
		var start=document.getElementById("start");
		//点击开始按钮，盒子向右移动
		//定义全局变量nowleft存储元素位置
		var nowleft=0;
		start.onclick=function(){
			setInterval(function(){
				// 信号量进行自加
		        nowleft += 5;
		        // 将最新的 nowLeft 的值赋值给元素的 css 属性
		        box.style.left = nowleft + "px";
			},1000);
		};
	</script>
</body>
</html>

提高运动速度的方法

  1. 缩短时间间隔，增加每秒移动的速度
  2. 加大步长，让每一步走的更长。

清除定时器的问题

  1. 将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户错误点击情况。
  2. 多次点击开始，会造成加速，多次点击开始，不能够停止。

解决方法：设表先关，每次开启新的定时器之前，都清除一次前面的定时器。

<!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 {
      position: absolute;
      top: 100px;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <input type="button" value="开始" id="start">
  <input type="button" value="结束" id="end">
  <div class="box" id="box"></div>
  <script>
    // 简单运动
    // 获取元素
    var start = document.getElementById("start");
    var end = document.getElementById("end");
    var box = document.getElementById("box");
    // 信号量
    var nowLeft = 0;
    // 全局定义一个变量存储定时器
    var timer;
    // 解决方法：设表先关，每次重新开启一个定时器之前都先关闭一下之前的定时器
    start.onclick = function () {
      // 先清除定时器
      clearInterval(timer);
      timer = setInterval(function () {
        // 信号量进行自加
        nowLeft += 5;
        // 将最新的 nowLeft 的值赋值给元素的 css 属性
        box.style.left = nowLeft + "px";
      },100);
    };
    // 清除定时器
    end.onclick = function () {
      clearInterval(timer);
    };
  </script>
</body>
</html>

需求：要求运动到指定位置停止，例如让元素停止在500px的位置。
问题：如果步长设置的不合理，停止的位置可能不是正好在500处。
解决办法：拉钟停表

<!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 {
      position: absolute;
      top: 100px;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <input type="button" value="开始" id="start">
  <div class="box" id="box"></div>
  <script>
    // 简单运动
    // 获取元素
    var start = document.getElementById("start");
    var box = document.getElementById("box");
    // 信号量
    var nowLeft = 0;
    // 全局定义一个变量存储定时器
    var timer;
    // 定时器
    start.onclick = function () {
      // 先清除定时器
      clearInterval(timer);
      timer = setInterval(function () {
        // 信号量进行自加
        nowLeft += 37;
        // 判断这一次的运动是否走到了500 的位置
        // 拉终停表，走到规定的终点位置
        if (nowLeft >= 500) {
          // 将变量的值强制赋值为 500
          nowLeft = 500;
          // 清除定时器
          clearInterval(timer);
        }
        // 将最新的 nowLeft 的值赋值给元素的 css 属性
        box.style.left = nowLeft + "px";
      },50);
    };
  </script>
</body>
</html>

需求：在规定时间内让元素走到规定的结束位置，时间间隔可以更改
解决办法：步标整除
总距离=步长*次数
时间间隔自定义，总时长固定。
求出总次数=总时间/时间间隔
定义计数器变量，每执行一次定时器函数增加计数一，直到执行达到总次数，停止计时器。

<!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 {
      position: absolute;
      top: 100px;
      left: 200px;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <input type="button" value="开始" id="start">
  <div class="box" id="box"></div>
  <script>
    // 简单运动
    // 获取元素
    var start = document.getElementById("start");
    var box = document.getElementById("box");
    
    // 已知 开始位置、结束位置、总时长、时间间隔
    // 总距离 = 步长 * 总次数
    // 总距离 = 结束位置 - 起始位置  ，已知可以求出来
    // 总次数 = 总时长 / 时间间隔 ，已知可以求出来
    // 步长 = （结束位置 - 起始位置） / （总时长 / 时间间隔）
    // 信号量 ,也相当于初始值
    var nowLeft = 200;
    // 结束位置
    var endLeft = 500;
    // 总时长
    var time = 1000;
    // 时间间隔
    var interval = 50;
    // 运算总次数
    var maxcount = time / interval;
    // 运算出每一次的步长
    var step = (endLeft - nowLeft) / maxcount;
    // console.log(step);
    // 定义一个次数的累加器
    var count = 0;
    // 准备条件结束可以开始定时器了
    var timer;
    start.onclick = function () {
      timer = setInterval(function () {
        // 让元素的属性每一次变化一个步长
        nowLeft += step;
        // 每运动一次让次数累加器加 1
        count++;
        // 停止定时器
        if (count >= maxcount) {
          // 拉终停表
          nowLeft = endLeft;
          clearInterval(timer);
        }
        // 给属性赋值
        box.style.left = nowLeft + "px";
      },interval);
    };
  </script>
</body>
</html>
歌歌DAY
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
【内附完整redis配置文件】linux服务器命令设置redis最大限制内存大小，设置redis内存回收机制，redis有哪些回收机制
G佳伟
04-23 525
redis经常出现进程自己挂掉，经排查后是因为redis占用内存过大，导致服务器内存爆满进程自己挂掉。
Js BOM中用定时器实现简单运动会遇到的一些小问题及解决
小白的学习之路
03-09 201
简单运动 简单运动：是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个运动的效果，人眼的视觉残留的时间0.1~0.4 s 可以通过定时器，实现每隔一个极短时间（50~100毫秒左右），执行函数，函数内部让运动的属性值发生变化 定时器常见问题1 将定时器的开始和停止过程写在不同的事件函数内部，容易出现用户错误点击情况: ​ 简单运动代码如下： <html> <head> <meta c..
JavaScript_BOM简介
Maxim的博客
05-04 339
JS_BOM简介 1、什么是BOM 浏览器对象模型 BOM可以使我们通过JS来操作浏览器 2、BOM对象 Window - 代表整个浏览器的窗口 同时window也是网页中全局对象 Navigator - 网景前身 代表当前浏览器的信息 通过对象可以来识别不同的浏览器 由于历史原因 navigator对象中的属性已经不能帮助我们获取正确属性了 一半我们只会使用userAgent来判断浏览器信息 1、 获取浏览器信息 console.log(window.navigator.userAgent)
javascript_BOM中京东倒计时案例
persist_in1的博客
09-28 103
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <titl...
html_JavaScript_BOM
jss19940414的博客
12-16 108
BOM   注意：window对象本身就有name和top属性，其中top属性是只读的，name的类型是字符串，不管在script中给name赋什么值，consoel.log(typeof name)的类型都是String类型（字符串） ...
JavaScript_BOM.txt
10-19
JavaScript_BOM 浏览器对象 介绍浏览器的常用对象及其不同浏览器的差别
_javascript_BOM&DOM&JSON
08-01
javascript BOM 和 DOM 和 JSON
javascript必修课_bom
06-21
本课将带你学习前端开发中最重要的技术JavaScript,它是网页与用户进行交互的基石。我们将从最简单的点击事件、表单提交、元素改变颜色开始，一步步由浅及深学习JS的各种酷炫知识。最后我们还会学习Jquery框架，以...
javascript的BOM
10-22
BOM是浏览器的窗口对象，提供了很多窗口处理的API。在webapp框架越来越多的情况下，需要我们在同一窗口处理不同页面、不同的ajax数据，则需要我们熟悉BOM的内容。
javascript的BOM汇总
10-23
本文给大家汇总了一些javascript的BOM相关方法，有需要的小伙伴可以参考下。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 417
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1009
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 522
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 305
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 415
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 488
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
使用vue3+ts+vite从零开始搭建bolg(二)
qq_75246137的博客
04-21 250
svg:用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。component中的index.ts,注册全局组件。package.json中的scripts配置项。vite.config.ts文档中配置。SvgIcon的index.vue文件。.env.development文件。.env.production文件。vite.config.ts配置。tsconfig.ts配置。.env.test文件。
JavaScript函数的作用域
猿码互联
04-23 175
JavaScript函数的作用域指的是变量的可访问范围。在JavaScript中，函数作用域是基于词法作用域（也称为静态作用域）的，意味着函数的作用域在函数被创建时就确定了，而不是在函数被调用时。这样创建的匿名函数会立即执行，并且其中的变量只能在函数内部访问，外部无法访问。这种方式在旧版本的JavaScript中很常见，但在ES6之后，可以直接使用块级作用域来实现同样的效果。需要注意的是，在ES6之前，JavaScript中并没有块级作用域的概念，只有函数作用域和全局作用域。
JavaScript的BOM
05-10
BOM（浏览器对象模型）是指浏览器提供的一组对象，它们可以访问和控制浏览器窗口，比如location、navigator、history、screen等对象，通过这些对象可以获取或修改浏览器窗口的URL、浏览器信息、浏览历史记录、屏幕...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值