Window对象的常用方法和定时器的开始，停止和暂停

最新推荐文章于 2024-08-20 06:02:17 发布

Evewyf

最新推荐文章于 2024-08-20 06:02:17 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/qq_45393105/article/details/100523741

版权

Window对象的常用方法和定时器的开始，停止和暂停

全局的window对象

JavaScript中的任何一个全局函数或变量都是window的属性。

Window对象的常用方法

alert();——————————-弹出一个提示框.
confirm()—————————-弹出一个确认框
prompt(); —————————输入框
setTimeout();————————定时执行一次就ok了
setInterval();————————-定时循环执行
clearTimeout();———————-清除定时
clearInterval();———————–清除定时
open():——————————-打开一个新窗口
close():——————————-窗口关闭了.

window的子对象

window的主对象主要有如下几个：

JavaScript document 对象
JavaScript frames 对象
JavaScript history 对象
JavaScript location 对象
JavaScript navigator 对象
JavaScript screen 对象

案例：

<head>
<title>history对象</title>

</head>

<body>
<h1 id="hh1">返回上一页</h1>

<script>
//1 获取元素
var hh1 = document.getElementById("hh1");
//2 操作元素
hh1.οnclick=function(){
	history.back();

}

</script>

</body>


</html>

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

语法：

newWIn = window.open("弹出窗口的url", "窗口名称"", "窗口特征")

示例：

var newWin = window.open(
"adv.html",
"广告",
" height=380, width=320, toolbar=0, scrollbars=0, location=0,
status=0,menubar=0, resizable=0 "
);

窗口属性

属性名称	说明
height,width	窗口文档显示区的高度，宽度，以像素计
left,top	窗口的x坐标，y坐标，以像素计
toolbar=yes\no\1\0	是否显示浏览器的工具栏。默认是yes
scrollbars=yes\no\1\0	是否显示滚动条。默认是yes
location=yes\no\1\0	是否显示地址字段。默认是yes
status=yes\no\1\0	是否添加状态栏。默认是yes
menubar=yes\no\1\0	是否是显示菜单栏。默认是yes
resizable=yes\no\1\0	窗口是否调节尺寸。默认是yes
titlebar=yes\no\1\0	是否显示标题栏。默认是yes
fullscreen=yes\no\1\0	是否使用权柄模式显示浏览器。默认是no

close()方法关闭窗口

示例：

//新开一个窗口
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'");
//关闭窗口
myWindow.close();

注意：

1、某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身
2、只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码

定时函数

setInterval( fn，millisec )方法
     可按照指定的周期（以毫秒计）来调用函数或计算表达式，循环执行多次。
setTimeout( fn，millisec )方法
     用于在指定的毫秒数后调用函数或计算表达式，只执示例 行一次

示例：

//开启一个定时函数
var n = 0;
function fn() { document.title = n++; }
var timer = setInterval("fn()",1000);

定时清除函数

clearInterval( timer ) 方法
     可取消由 setInterval() 设置的 timeout
clearTimeout( timer ) 方法
    可取消由 setTimeout() 方法设置的 timeout定时清除

定时函数不同写法

示例：

//函数
var n = 0;
function fn( ) { document.title = n++; }
//方法1：
var timer = window.setInterval( "fn()" , 1000);
//方法2：
var timer = window.setInterval( fn , 1000 );
//方法3：
var timer = window.setInterval( function(){fn()}, 1000);

定时器

<html>
<head>
<title> setTimeout</title>
</head>

<body>
<h1>0</h1>
<input type="button" value="开始" οnclick="start()" />
<input type="button" value="停止" οnclick="stop()" />
<input type="button" value="暂停" οnclick="pause()" />


<script type="text/javascript">
// 3000毫秒后调用内部的匿名函数，注意只执行一次
//setTimeout(function(){
//	alert("aa");
//},3000);

// 每隔2000毫秒后调用一次函数
// setInterval启动的时候 将句柄 赋值给一个变量
//var timer=setInterval(function(){
//	console.log("aa");
//},200);


//function stop(){
//clearInterval(timer);

//}


// 1获取元素
var h=document.getElementsByTagName("h1")[0];
var timer=null;
// 2操作元素
function start(){
	if(timer==null){
		timer=setInterval(function(){
			var t=h.innerHTML;
	
				t++;
				h.innerHTML=t;

		},1);
	}
}

function stop(){
	pause();
	h.innerHTML=0;

}
function pause(){
	if(timer!=null){
		clearInterval(timer);
		timer=null;
	}

}


</script>

</body>

</html>
</html>
## DOM概述
 >- ##### DOM(文档对象模型)提供了添加、移动、改变或移除结构文档的<font color=red>方法和属性
#### 分类
>- ##### Core DOM 一套标准的针对任何结构化文档的对象
>- ##### XML DOM 一套标准的针对 XML 文档的对象
>- ##### <font color=red>HTML DOM</font> 一套标准的针对 HTML 文档的对象
#### DOM的节点
    HTML 文档中的每个成分都是一个节（Node）
    DOM 是这样规定的：
         整个文档是一个文档节点
         每个 HTML 标签是一个元素节点
         包含在 HTML 元素中的文本是文本节点
         每一个 HTML 属性是一个属性节点
         注释属于注释节点
#### 节点间的关系
>- ###### 节点彼此都有等级关系
>- ###### 父节点、子节点、兄弟节点（同级节点）
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190903194001281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzkzMTA1,size_16,color_FFFFFF,t_70)
>- #### 访问节点
>- ###### 使用getElement系列方法来访问指定的节点
>- ###### getElementsByTagName():返回带有指定名称的对象集合
>- ###### getElementsByName():返回带有指定名称的对象集合(注意不是所有标签都有name属性

### String 对象
>- ##### length 属性  字符串对象的长度
##### 示例：
```<html>
var str = "JavaScript";
var strLength = str.length; //长度是10
var str = "this is JavaScript";
var strLength = str.length; //长度是18

字符串对象.方法名（）

方法名称	说明
charAt(index)	返回在指定位置的字符
indexOf(str,index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1,index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1 对应的字符，不包括索引index2对应的字符
split(str)	将字符串分割为字符串数组
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转化为大小写

常用方法

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25Math.floor(-25.5);返回-26
round()	吧数四舍五入为最接近的整数	Math.round(25.5);返回26Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365

Date对象的方法

方法	说明
getDate()	返回Date对象的一个月中的每一天，其值介于1~31之间
getDay()	返回Date对象的星期中的某一天，其值介于0~6之间
getHours()	返回Date对象的小时数，其值介于0~23之间
getMinutes()	返回Date对象的分钟数，其值介于0~59之间
getSeconds()	返回Date对象的秒数，其值介于0~59之间
getMonth()	返回Date对象的月份，其值介于0~11之间
getFullYear()	返回Date对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

使用Date对象的方法显示当前时间的小时、分钟和秒（时钟特效）

//关键代码
var today = new Date(); //获得当前时间
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();

Evewyf

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫