java | (二十四)js BOM

编程语言 2022-04-06 16:15:23 阅读次数: 0

这里写目录标题

window

全局变量

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>

    <script>
		/* 声明一个全局变量 */
		window.username="user";
		/* 声明一个全局方法 */
		window.sayname=function(){
      
      
			alert("我是"+this.username);        	
		}
		sayname();        
	</script>
    </div>    
</body>
</html>

confirm()

window.confirm(“message”);
功能：显示一个带有指定消息和OK及取消按钮的对话框
返回值：确定：返回true；取消：返回false

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>
	<button id="btn">按钮</button>

    <script>
		var btn = document.getElementById("btn");
		btn.onclick=function(){
      
      
			var result = window.confirm("您确定是要关闭吗");
			console.log(result);
		}
    
	</script>
    </div>    
</body>
</html>

展示：
在这里插入图片描述

prompt(text,defaultText)

text:要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultTest：默认的输入文本

如果单击取消按钮，返回null
单击确认按钮，返回输入字段当前显示的文本

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>

    <script>
		var mes = window.prompt("请输入您的年龄","18");
    	console.log(mes);
	</script>
    </div>    
</body>
</html>

结果：
请添加图片描述

open

打开一个新的窗口

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>

    <script>
		/* 打开一个新窗口 */
		/* 还可以为新窗口设置属性 */
		window.open("Untitled-2.html","newWindow","width=400px,height=600px");
	</script>
    </div>    
</body>
</html>

结果：
在这里插入图片描述

close()

关闭窗口

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>
	<input type="button" id="btn" value="退出"/>
    <script>
		btn = document.getElementById("btn");
		
		var clickToQuit=function(){
      
      
			window.close();		
		}
		btn.onclick=clickToQuit;
	</script>
    </div>    
</body>
</html>

结果:
在这里插入图片描述
点击退出按钮，退出当前界面

计时器

超时调用setTimeout
setTimeout(code,millisec)
功能：在指定的毫秒数后调用函数或计算表达式
code:要调用的函数或要执行的JavaScript代码串
millisec:等待的毫秒数

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>
    <script>
		window.setTimeout(function(){
      
      
			alert("延时3s的提示");
		},3000);
	</script>
    </div>    
</body>
</html>

结果
请添加图片描述
clearTimeout(id_of_settimeout)
功能：取消由setTimeout()方法设置的timeout
参数说明：
id_of_settimeout:由setTimeout()返回的ID值

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>
    <script>
		var timeout1 = window.setTimeout(function(){
      
      
			alert("延时3s的提示");
		},3000);
		window.clearTimeout(timeout1);/* 取消掉延时的提示 */
	</script>
    </div>    
</body>
</html>

间歇调用
setInterval(code,millisec)
code:调用函数或代码串
millisec:周期性执行或调用code之间的时间间隔，单位毫秒
清除间歇调用
clearInterval(id_interval)

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>
    <script>
		/* 每秒执行一次函数 */
		var intervalId = window.setInterval(function(){
      
      
			console.log("每秒打印一次");	
		},1000);
		/* 5s后清除这个间隙 */
		window.setTimeout(function(){
      
      
			window.clearInterval(intervalId);	
		},5000);
	</script>
    </div>    
</body>
</html>

结果：
请添加图片描述

location对象

常用方法

location对象提供了与当前窗口中加载的文档有关的信息，还提供导航的功能，它既是window对象的属性，也是document对象的属性

location.href与window.location.href等价
location.href:返回当前加载页面的完整URL
location.hash功能：返回URL中的hash(#号后跟零或多个字符)，如果不包含则返回空字符串

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
		.box1{
      
      background:gray;height:600px}
		.box2{
      
      background:green;height:600px}
	</style>
</head>	
<body>
	<div class="box1" id="top"></div>
    <div class="box2"></div>
    <input type="button" id="btn" value="返回顶部"、/>
    
    <script>
		var btn = document.getElementById("btn");
		/* 设置按钮：按下后返回顶部 */
		btn.onclick=function(){
      
      
			location.hash="#top";	
		}
	</script>
    </div>    
</body>
</html>

结果：
点击按钮后，返回顶部，且出现
请添加图片描述
location.host
返回服务器名称和端口号（如果有）
location.hostname
返回不带端口号的服务器名称
location.pathname
返回URL中的目录和（或）文件名
location.port
返回url中指定端口号，没有则返回空字符串
location.protocol
返回页面使用的协议
location.search
返回url的查询字符串，这个字符串以问号开头
演示：
打开在这里插入图片描述
在控制台输入、返回
在这里插入图片描述

位置控制

用href方法：
1s钟跳转到Untitled-2

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
		.box1{
      
      background:gray;height:600px}
		.box2{
      
      background:green;height:600px}
	</style>
</head>	
<body>

    <script>
		setTimeout(function(){
      
      
			location.href="Untitled-2.html";
		},1000);
	</script>
    </div>    
</body>
</html>

replace()方法，与以上相比，没有后退按钮请添加图片描述

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>A
	</style>
</head>	
<body>

    <script>
		setTimeout(function(){
      
      
			location.replace("Untitled-2.html");
		},1000);
	</script>
    </div>    
</body>
</html>

location.reload()重新加载当前显示的页面
说明：
location.reload()可能从缓冲中加载
location.reload(true)从服务器重新加载

history

history.back()返回上一个界面
相当于history.go（-1）
Untitled-1.html

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>
	<input type="button" value="跳转" id="btn"/>
    <script>
		document.getElementById("btn").onclick=function(){
      
      
			location.href = "Untitled-2.html";
		}
	</script>
    </div>    
</body>
</html>

Untitled-2.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content" content="text/html" charset="utf-8"/>
<style>
	body{
      
      
		margin:0;padding:0;color:#fff;text-align:center;
	}
	.header{
      
      
		width:100%;height:50px;background:#333;margin:0 auto;
		line-height:50px;position:fixed;
	}
	.banner{
      
      
		width:800px;height:300px;background:#30a457;margin:0 auto;
		padding-top:50px;
	}
	.container{
      
      
		width:800px;height:300px;background:#39F;
		margin:0 auto;
	}
	.foot{
      
      
		width:800px;height:300px;background:#9C3;
		margin:0 auto;line-height:100px;
	}
	
		
</style> 
</head>
<body>
	<div class="header">这是页面的头部</div>
    <div class="banner">这是页面的banner图</div>
    <div class="container">这是页面内容</div>
    <div class="foot">这是页面尾部<br><input type="button" value="回到上一页" id="btn"></div>
    <script>
		var btn = document.getElementById("btn");
		btn.onclick=function(){
      
      
			//回到上一个页面
			
			history.back();	
		}
	</script>
</body>
</html>

展示：
请添加图片描述
请添加图片描述
untitle-2可以返回上一个界面
history.forward()前进
等同于history(1)

screen

获取页面高

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>

    <script>
		console.log("页面宽"+screen.availWidth);
		console.log("页面高"+screen.availHeight);
		
		console.log("pageWidth:" + window.innerWidth);
		console.log("pageHeight" + window.innerHeight);
		
	</script>
    </div>    
</body>
</html>

结果：
请添加图片描述
注意：
请添加图片描述

navigator

userAgent
浏览器等信息

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>js演示</title>
    <style>
	</style>
</head>	
<body>

    <script>
		var explorer = navigator.userAgent;
		alert(explorer);
		
	</script>
    </div>    
</body>
</html>

展示：
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42953201/article/details/120316639
今日推荐
周排行
win7之session理解
如何快速上手 AB Testing ？阿里技术专家秘方公开
数据库自助查询平台
【CCF 2017-12-2】游戏问题
Fire!(BFS)
修复GRUB引导故障
老倪祖膏药分销系统
MySQL慢查询日志-捕获慢SQL
批归一化(Batch Normalization)
ssm整合问题-------一
每日归档
更多
2025-03-02(0)
2025-03-01(0)
2025-02-28(0)
2025-02-27(0)
2025-02-26(0)
2025-02-25(0)
2025-02-24(0)
2025-02-23(0)
2025-02-22(0)
2025-02-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022