JS的BOM:提示框,打开关闭窗口,时间函数,history,location

最新推荐文章于 2022-08-25 18:22:08 发布

Snaker.wang

最新推荐文章于 2022-08-25 18:22:08 发布

阅读量250

点赞数

分类专栏： javaweb 文章标签： java

本文链接：https://blog.csdn.net/wdd199801140310/article/details/103159255

版权

javaweb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

BOM(浏览器对象模型)代表的就是浏览器的窗口

(1）消息框:alert，常用。
           alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
           （2）输入框:prompt，返回提示框中的值。
           prompt() 方法用于显示可提示用户进行输入的对话框。
              参数（可选）：
              第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。
           （3）确认框:confirm，返回 true/false.
           confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

	<script type="text/javascript">
		// 消息框:alert
		alert("消息框");
		window.alert("消息框");   //window可以省略,就是上面一种情况
		//输入框:prompt，返回提示框中的值。
		var uname = window.prompt("请输入姓名:",'');
		console.log(uname);
		// 确认框:confirm，返回 true/false.
		var flag = window.confirm("您确认要删除吗？");
		if (flag) {
			alert("删除成功！");
		} else {
			alert("没事别瞎点！");
		}
	</script>

打开和关闭窗口

基本上open偶尔用用,close基本不用,close关闭的一般是open方法的,新打开的窗口

	<body>
		<!--
			2）打开窗口
				window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口
			3）关闭窗口
				window.close()：关闭窗口。
		-->
		<button onclick="openWindow()">打开窗口</button>
		<button onclick="closeWindow()">关闭窗口</button>
	</body>
	
	<script type="text/javascript">
		/**
		 * 打开窗口
		 */
		function openWindow(){
			// 打开空白窗口
			window.open();
			// 打开指定窗口
			window.open("http://www.baidu.com");
			// 打开指定窗口并指定打开模式
			window.open("http://www.baidu.com","_self");
			
			window.open("index.html");
		}
		/**
		 * 关闭窗口
		 */
		function closeWindow(){
			window.close();
		}
	</script>

时间函数

setTimeout()
延时指定毫秒后执行函数（单位：毫秒）
var id = setTimeout(function,times);
clearTimeout(id)
清除指定时间函数
setInterval()
每隔指定秒数执行函数一次

setTimeout(function(){
	console.log("不好意思，久等了...");
},3000);
		
setInterval(function(){
	console.log("hahahah...");
	},1000);

给标签赋值（例如给h2标签）
标签对象.innerHTML = "xxx";

输出当前时间在页面上,设置开始和结束按钮,当秒数为整十的时候就为红色,每秒会自动增加1

	<body>
		<button onclick="startDate()">开始</button>
		<button onclick="stopDate()">结束</button>	
		<h2 id="currentDate"></h2>    //用来显示时间
	</body>
	<script type="text/javascript">	
		setTimeout(function(){
			console.log("不好意思，久等了...");
		},5000);
		var id; // setTimeout方法每次调用时，返回的唯一标识
		//开始
		function startDate() {
			init();
		}		
		//结束
		function stopDate(){
			clearTimeout(id);
		}
		// 第一次调用，显示初始时间
		// init();	
		/**
		 * 初始化时间
		 */
		function init() {
			// 得到格式化后的时间字符串
			var mydate = formatDate(new Date());	
			//获取数据源
			var h2 = document.getElementById("currentDate");        //让body中的标签的id为"currentDate"
			if ((new Date()).getSeconds() == 0) {
				// 给h2标签赋值 ,如果秒数为0，则字体变红
				h2.innerHTML = "<span style='color:red'>"+mydate+"</span>";
			} else {
				// 给h2标签赋值
				h2.innerHTML = mydate;
			}

			// 1秒钟后调用init方法
			id = setTimeout(init,1000);
		}		
		/**
		 * 格式化时间
		 * 2018年05月13日  12:23:34
		 * @param {Object} date
		 */
		function formatDate(date) {
			// 获取时间的年份
			var year = date.getFullYear();
			// 获取月份 （0~11）
			var month = date.getMonth() + 1;
			// 如果月份小于10，则在其前面拼接"0"
			if (month < 10) {
				month = "0" + month;
			}
			// 获取天
			var day = date.getDate();
			// 如果天数小于10，则在其前面拼接"0"
			if (day < 10) {
				day = "0" + day;
			}
			// 获取时
			var hour = date.getHours();
			if (hour < 10) {
				hour = "0" + hour;
			}
			// 获取分
			var minute = date.getMinutes();
			if (minute < 10) {
				minute = "0" + minute;
			}	
			// 获取秒
			var second = date.getSeconds();
			if (second < 10) {
				second = "0" + second;
			}
			var mydate = year+"年"+month+"月"+day+"日" + " " +hour+":"+minute+":"+second;
			return mydate;
		}	
	</script>

setInterval(function(){},毫秒数); 能够更加简单的实现上述代码的功能.

history

history对象的属性：
               length，返回浏览器历史列表中的 URL 数量。
           history对象的方法：
               back()：加载 history 列表中的前一个 URL。
               forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。
               go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的 go(-1|2),go正数前进,负数表后退哦

<body>
	<h3>第二个页面</h3>
	<a href="04-history对象-2.html">跳转至第二个页面</a>
	<button onclick="window.history.forward();">前进</button>
	<button onclick="window.history.back();">后退</button>
</body>
<script type="text/javascript">
	console.log(history.length);
</script>

location

location 对象的属性href：
               设置或返回完整的 URL
           location 对象的方法:
               reload()：重新加载当前文档。
               replace()：用新的文档替换当前文档。 //不能回退

//获取当前访问的地址
    var url1 = window.location.href;
    console.log(url1);
//设置当前访问地址 （跳转到指定页面）    不会有历史记录
    window.location.href = "http://www.baidu.com";

window.location.reload();

Snaker.wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS的BOM:提示框,打开关闭窗口,时间函数,history,location

BOM(浏览器对象模型)代表的就是浏览器的窗口 (1）消息框:alert，常用。 alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。（2）输入框:prompt，返回提示框中的值。 prompt() 方法用于显示可提示用户进行输入的对话框。 ...
复制链接

扫一扫