第六章-BOM模型

最新推荐文章于 2024-05-01 09:00:00 发布

我的艺术就是派大星

最新推荐文章于 2024-05-01 09:00:00 发布

阅读量236

点赞数

分类专栏： H5 开发基础

本文链接：https://blog.csdn.net/qq_44627608/article/details/102924003

版权

H5 开发基础专栏收录该内容

13 篇文章 3 订阅

订阅专栏

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
核心（ECMAScript）描述了该语言的语法和基本对象；
文档对象模型（DOM）描述了处理网页内容的方法和接口；
浏览器对象模型（BOM）描述了与浏览器进行交互的方法和接口。

WINDOWS

window是最顶层的全局变量，他的方法使用时通常可以省略window

警告框 ----- alert( )
window.alert( message )

确认窗口 ----- confirm( )
window.confirm( message );
message 为要在确认框中显示的文本内容
返回值时boolean类型
例：window.confirm(‘你确定要关闭此窗口吗？’);

输入框 ----- prompt( )
window.prompt(message, [default]);
message 为要在提示框中显示的文本内容， default 为单行文本框中的默认内容
例：window.prompt(‘请输入你的评价, 1(满意) 2(一般) 3(不满意)’, ‘’);

延迟执行 ----- setTimeout( )
只执行一次
setTimeout( code,interval )
code 为要延迟执行的 JavaScript 代码；一般写函数的结构
interval 为延迟执行的间隔时间，单位为毫秒
若想实现的代码是方法的话，code位置只写方法名，不要括号

取消延迟执行 clearTimeout( )
clearTimeout( id )
id 是 setTimeout( ) 方法返回的数字

周期执行 ----- setInterval( )
重复执行，直到 clearInterval( ) 被调用或窗口被关闭
setInterval( code,interval )
code 为要周期执行的 JavaScript 代码；
interval 为周期执行的间隔时间，单位为毫秒

取消周期执行 clearInterval( )
clearInterval( id )
id 是 setInterval( ) 方法返回的数字

    var intervalId = setInterval(callback, 1000);
    function callback() {
        console.log((new Date()).toLocaleString());
    }
    var stop = document.getElementById("stop");
    stop.onclick = function() {
        clearInterval(intervalId);
    }

    var count = document.getElementById("count");
    var start = document.getElementById("start");
    var stop = document.getElementById("stop");
    var intervalId = 0;
    var countNum = 0;
    start.onclick = function() {
        clearInterval(intervalId);
        intervalId = setInterval(function() {
            countNum = countNum + 1;
            count.innerHTML = countNum;
        }, 1000);
    }
    stop.onclick = function() {
        clearInterval(intervalId);
    }

打开浏览器窗口 ----- open ( )
window.open( url,name,features,replace )
url : 在打开的窗口中加载文档的 URL 地址。（可选参数)
name : 新开窗口的名称。（可选参数)_blank,
features : 新开窗口的特性。（可选参数
replace : 是否替换窗口中浏览的当前历史,布尔值。（可选参数）
window.open(“http://www.baidu.com”,"_blank",“width=200px,height=200px,left=500px，top=200px”,"");

关闭浏览器窗口 close ( )
window.close( )//关闭当前窗口，无参数
window.close(“http://www.baidu.com”);

计算字符串中的算式
console.log(eval(“1+1”));

HISTORY

history 对象可以访问浏览器窗口的浏览历史
histary.back()
后退到上一个访问过的页面

histary.forward()
前进到下一个访问过的节点

histary.go()跳转节点
go(n) 如果 n 为正数，则前进到第 n 个访问过的网页；如果 n 为负数，则后退到第 n 个访问过的网页。
go(0)表示刷新当前页面
在这里插入图片描述

			console.log(navigator);
			//获得当前浏览器对象的用户代理名称
			var userAgent = navigator.userAgent;
			//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
			//若为IE类浏览器，则用户代理值中含有“MSIE”字符串
			if (userAgent.indexOf('MSIE') >= 0) {
				alert('IE浏览器');
			} else if (userAgent.indexOf('Firefox') >= 0) {
			//若为火狐浏览器，则用户代理值中含有“Firefox”字符串
				alert('火狐浏览器');
			} else if (userAgent.indexOf('Chrome') > 0){
			//若为谷歌浏览器，则用户代理值中含有“Chrome”字符串
				alert('谷歌浏览器');
			}

		console.log(navigator.appName);
		console.log(navigator.appVersion);
		console.log(navigator.onLine);
		console.log(navigator.platform);
		console.log(navigator.userAgent);
		console.log(screen.height);
		console.log(screen.width);
		console.log(screen.availHeight);
		console.log(screen.availWidth);

	<body>
		<form>
			<input type = "text" name = "timer"  size = "21" value = "0"/>
			<br/>
			<input type="button" name="button1"  value="开始计时" width = "5" onclick="judgeValue();"/>
			<input type="button" value="停止计时" onclick = "window.clearInterval(intervalId)"/>
		</form>
	</body>
	<script type="text/javascript">
		var intervalId;
		var time = window.document.forms[0].timer;
		//判断计时开始时的初值
		function judgeValue(){
			intervalId = window.setInterval(addNumber,1000);
		}
		//计数器加1
		function addNumber(){
			time.value=parseInt(time.value)+1;
		}
	</script>