                <button>开启</button>
                <button>关闭</button>
                <script>
                var btn = document.getElementsByTagName('button');
                var timeout;
                btn[0].onclick = function() {
                    timeout = setTimeout(function() {
                        alert('hello world');
                    }, 1000);
                }
                btn[1].onclick = function() {
                    clearTimeout(timeout);
                }
                </script>

**:如果点击开启后,在1s内又点击了关闭那么,对话框则不会弹出。

间歇调用

是指每隔指定的时间就执行一次代码,直到间歇调用被取消或者页面被卸载。

setInterval(）

参数
第一个参数,要执行的代码
第二个参数,每次执行之前需要等待的毫秒数

返回值
一个间歇调用ID

clearInterval()

参数
要取消的间歇调用的ID
示例

                    var num=0;
                    var max=10;
                    var timeout;
                    function number(){
                        num++;
                        if(num==max){
                            clearInterval(timeout);
                            console.log('done');
                        }else{
                            console.log(num);
                        }
                    }
                    timeout=setInterval(number,500);

系统对话框

alert()
主要用于显示警告信息。该方法接受一个字符串并将其显示给用户。

  alert('hello world');

confirm()
确认对话框。该方法返回布尔值。true表示点击了ok，false表示点击了cancel

            var result=confirm('ok?');
            console.log(result);//true|fasle

prompt()
会话框。提示用户输入一些文本。点击ok该方法返回输入的值。点击取消返回null

            var result=prompt('your name?');
            console.log(result);//cc

location对象

它提供了与当前窗口中加载的文档有关的信息,该提供了一些导航功能。location对象既是window对象的属性,也是document对象的属性。即window.location==document.location

属性

host 返回服务器的名称和端口号

hostname 返回不带端口号的服务器名称

href 返回当前加载页面的完整url

pathname 返回url的目录和文件名

port 返回url中指定的端口号

protocol 返回页面使用的协议例如'http:'

search 返回url的查询字符串,这个字符串以问号开头例如:'?name='cc'

方法

assign()

立即打开新url并在浏览器的历史记录中生成一条记录。

             location.assign('www.baidu.com');
            // window.location与location。href设置URL也会调用assign方法。
             window.location='www.baidu.com';
             location.href='www.baidu.com';

replace()
禁用浏览器回退按钮。
参数为一个url,结果会导致浏览器位置改变。但不会在历史记录中生成新记录

                 var btn=document.getElementsByTagName('button')[0];
                btn.onclick=function(){
                    //window.location='1-focus.html';
                    location.replace('1-focus.html');        
                }

reload()

重新加载当前显示的页面。参数可以为boolean类型.默认false,表示可以从缓存中直接加载。true表示强制从服务器重新加载。

拓展

查询字符串参数

	<script>
		//将查询字符串的?去掉
		var qs=(location.search.length>0?location.search.substring(1):"");
		//保存数据的对象
		var args={};
		//去掉&
		var items=qs.length?qs.split('&'):[];
		// 保存去掉'='的值
		var item=null;
		//保存name属性
		var name=null;
		//保存name属性的值
		var value=null;
		items.forEach( function(element, index) {
			// 遍历items
			item=element.split('=');
				//将解码的url的name赋值到name中
			name=decodeURIComponent(item[0]);
			//将解码的url的值赋值到value中
			value=decodeURIComponent(item[1]);
			if(name.length){
				args[name]=value;
			}
			return args;
		});
		console.log(args);
	</script>

history对象

保存着用户上网的历史记录,从窗口被打开的那一刻算起。

属性

length

保存着历史记录的数量。

方法

go()

可以在用户的历史记录中任意跳转。

参数
表示向后或向前跳转的页面数的一个整数值。
负数表示向后跳转;整数表示向前跳转

back()
回退一页

forward()
前进一页

示例

<button>回退</button>
<button>前进</button>
	<script>
	var btn=document.getElementsByTagName('button');
	btn[0].onclick=function(){
		//window.location='1-focus.html';
		history.back();	
	}
	btn[1].onclick=function(){
		//window.location='1-focus.html';
		history.forward();	
	}
	console.log(history.length);
	</script>

BOM --几种对象的总结

BOM

window对象

间歇调用和超时调用

系统对话框

location对象

属性

方法

history对象

方法

示例

猜你喜欢