JS的BOM对象之window对象，利用window对象方法实现定时器
作者：互联网
BOM对象
BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
使 JavaScript 有能力与浏览器“对话”。
window对象
'''
window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.
'''
Window 对象方法
''' alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 prompt() 显示可提示用户输入的对话框。 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 close() 关闭浏览器窗口。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 scrollTo() 把内容滚动到指定的坐标。 '''
交互方法：
'''
方法讲解:
//----------alert confirm prompt----------------------------
//alert('aaa');
/* var result = confirm("您确定要删除吗?");
alert(result); */
//prompt 参数1 : 提示信息. 参数2:输入框的默认值. 返回值是用户输入的内容.
// var result = prompt("请输入一个数字!","haha");
// alert(result);
方法讲解:
//open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.
//调用方式1
//open("http://www.baidu.com");
//参数1 什么都不填 就是打开一个新窗口. 参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口
//close方法 将当前文档窗口关闭.
//close();
'''
练习：
var num = Math.round(Math.random()*100);
function acceptInput(){
//2.让用户输入(prompt) 并接受 用户输入结果
var userNum = prompt("请输入一个0~100之间的数字!","0");
//3.将用户输入的值与 随机数进行比较
if(isNaN(+userNum)){
//用户输入的无效(重复2,3步骤)
alert("请输入有效数字!");
acceptInput();
}
else if(userNum > num){
//大了==> 提示用户大了,让用户重新输入(重复2,3步骤)
alert("您输入的大了!");
acceptInput();
}else if(userNum < num){
//小了==> 提示用户小了,让用户重新输入(重复2,3步骤)
alert("您输入的小了!");
acceptInput();
}else{
//答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).
var result = confirm("恭喜您!答对了,是否继续游戏?");
if(result){
//是 ==> 重复123步骤.
num = Math.round(Math.random()*100);
acceptInput();
}else{
//否==> 关闭窗口(close方法).
close();
}
}
setInterval clearInterval
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var clock;
function begin(){
if (clock==undefined){
showTime();
clock=setInterval(showTime,1000);
}
}
function end(){
clearInterval(clock);
clock=undefined;
}
</script>
setTimeout clearTimeout
var ID = setTimeout(abc,2000); // 只调用一次对应函数.
clearTimeout(ID);
function abc() {
alert('aaa');
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
body{
margin: 0;
}
#id1{
width: 200px;
height: 80px;
background-color: lightcoral;
}
button{
margin-left: 80px;
margin-top: 20px;
background-color: red;
}
div{
width: 220px;
height: 110px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<input type="text" id="id1" onclick="begin()"><br>
<!--input标签用来当作文本框，里面显示时间；写一个id方便js查找，onclick属性是点击事件触发运行begin函数-->
<button onclick="end()">停止</button>
<!--button标签，用来点击停止计时器的运行，onclick点击触发end函数-->
</div>
<script>
// alert显示带有文本消息和一个确认按钮的警告框
// window.alert('你好啊！');
// confirm显示带有文本消息以及确认和取消按钮的对话框
// var res=window.confirm('你是否确定删除？');
// console.log(res) // 当选择确定时，res是true；当选择取消时，res是false
// prompt显示可提示用户输入的对话框且可拿到用户输入信息
// var res1=window.prompt('请输入暗号...', 'heihei');
// console.log(res1); // 当输入内容点击确定时，res1等于输入内容；当输入内容为空点击确定时，res1为空；无论是否输入内容点击取消，res1等于null；第二个参数为对话框默认值
// open打开一个新的浏览器窗口或查找一个已命名的窗口/close关闭浏览器窗口
// window.open('https://www.baidu.com');
// window.close();
function showTime() {
var current_time=new Date().toLocaleString();
var ele=document.getElementById('id1');
ele.value=current_time;
};
// showTime函数获取当前时间，找到input标签id，并把获取的当前时间通过value属性默认展示在文本框
var clock1;
function begin() {
if (clock1==undefined) {
showTime();
clock1=setInterval(showTime, 1000);
}; // 当多次点击input框时，会生成多个定时器，只不过之前的定时器没有变量引用而已，所以如果不加if会出现点击多次input框后再点击button按钮时间没有立即停止
};
// begin函数，input标签一有点击即触发此函数，先运行showTime函数，这样就能直接显示当前的时间，然后通过setInterval()方法每过1秒运行一次showTime函数
function end() {
clearInterval(clock1);
clock1=undefined;
// 当点击button按钮，将clock1设为undefined，这样再次点击input框依旧而已继续计时
};
// end()函数，button标签一有点击即触发此函数，取消setInterval()设置的timeout
function f() {
confirm('你确定要试用这个计时器吗？');
}
var c=setTimeout(f, 1500); // 过1500毫秒执行一次f函数，且只执行一次
clearTimeout(c); // 取消由setTimeout()方法设置的 timeout
</script>
</body>
</html>
标签：function,对象,alert,showTime,window,var,JS,输入 来源： https://www.cnblogs.com/xuewei95/p/15016768.html