JS--BOM

文章目录

  • 一、window对象
  • 二、location对象
  • 三、计时器setinterval、clearinterval、setTimeout与clearTimeout
  • 四、其它对象
  • 五、简单实现一个网页计时器

【BOM:browser object model 可理解为浏览器的对象】

一、window对象

  • 最大的BOM对象,JS的顶层对象
  • 使用时可以省略window

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			window.alert("a");
			window.confirm("b");
			window.prompt("c");
			alert("a");
			confirm("b");
			prompt("c");
		script>
	head>
	<body>
	body>
html>

二、location对象

  • (1) location.href发生页面的跳转

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			function f1() {
      
				location.href = "test1.html"
			}
		script>
	head>
	<body>
		<button onclick="f1()">按钮button>
	body>
html>

初始界面:
JS--BOM_第1张图片
点击按钮后的界面:
JS--BOM_第2张图片
href里面写的即为要跳转的路径 。

  • (2)页面刷新
(1)location.reload();
(2)location.href = location.href;

这两句是等价的,都是页面的刷新。

三、计时器setinterval、clearinterval、setTimeout与clearTimeout


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			var m1;
			function f1() {
      
				m1 = setInterval(function() {
      
					console.log(new Date().toLocaleString());
				}, 1000)
			}
			function f2() {
      
				clearInterval(m1);
			}

			var m2;
			function f3() {
      
				m2 = setTimeout(function() {
      
					console.log(new Date().toLocaleString());
				}, 2000)
			}
			function f4(){
      
				clearTimeout(m2);
			}
		script>
	head>
	<body>
		<button onclick="f1()">启动button>
		<button onclick="f2()">停止button>
		<button onclick="f3()">启动1button>
		<button onclick="f4()">停止1button>
	body>
html>

JS--BOM_第3张图片

(1)setinterval是计时器,第一个参数是方法,第二个参数为时间间隔,按毫秒算。意思是每隔一段时间(第二个参数)执行一次方法(第一个参数);
(2)clearinterval时停止计时,执行此方法后setInterval停止执行;
(3)setTimeout是延迟执行,意思是程序启动后经过一段时间后执行一次方法;
(4)clearTimeout和setTimeout对应,在setTimeout执行后的延迟时间内再执行clearTimeout,则setTimeout不会再执行。

四、其它对象

  • window.history,浏览器访问历史信息
  • window.navigator,浏览器本身的信息
  • window.screen,浏览器屏幕信息

五、简单实现一个网页计时器


<html>
	<head>
		<meta charset="utf-8">
		<title>timertitle>
		<script type="text/javascript">
			var f1= function(){
      
				var date = new Date();//获取到当前时间
				var s = date.toLocaleString();//时间转换为字符串
				document.getElementById("1").innerText = s;
			}
			var x = setInterval(f1,1000);
			function stop(){
      
				clearInterval(x);
			}
		script>
	head>
	<body>
		<button onclick="stop()">停止button>
		<div id="1">div>
	body>
html>

效果展示:
JS--BOM_第4张图片

当按下停止按钮时,时间将不再变化。

你可能感兴趣的:(JS,js)