通过使用js,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在javaScript中使用计时事件是很容易的,两个关键方法是:
setInterval ( ) -- 间隔指定的毫秒数不停地执行指定的代码
setTimeout ( ) -- 在指定的毫秒数后执行指定代码
注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
setInterval()方法
setInterval()间隔指定的毫秒数不停地执行指定的代码
语法:window.setInterval("Javascript function" , milliseconds);
windows.setInterval()方法可以不使用window前缀,直接使用函数setInterval()。
setInterval()第一个参数是函数(function)
第二个参数是间隔的毫秒数
注:1000毫秒是1秒
<p>单击按钮每3秒出现一个“Hello”警告框。</p>
<p>再次点击警告框,经过3秒出现新的警告框,这将一直执行 ...</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
//每三秒弹出"hello"
</script>
上述代码展示了如何使用setInterval()方法,但是每三秒弹出一次对用户体验并不好。
以下实例将显示当前时间。setInterval()方法设置为每秒钟执行一次代码
<body>
<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
这样就能做到每秒一次刷新当前显示的时间
如何停止执行
clearInterval()方法用于停止setInterval()方法执行的函数代码。
window.clearInterval(intervalVariable)
window.clearInterval()方法可以不使用window前缀,直接使用函数clearInterval()
要使用clearInterval()方法,在创建计时方法时你必须使用全局变量:
myVar = setInterval(“javascript function”,milliseconds);
<p>页面上显示时钟:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>
setTimeout()方法
myVar = window.setTimeout(“javascript function”,milliseconds);
setTimeout()方法会返回某个值。在上面的语句中,值被储存在名为myVar的变量中。加入你希望取消这个setTimeout(),你可以使用这个变量名来指定它。
setTimeout()的第一个参数时含有javaScript语句的字符串。这个语句可能诸如"alert(‘5 seconds!’)",或者对函数的调用,诸如alertMsg.
第二个参数指示从当前其多少毫秒后执行第一个参数
setTimeout(function(){alert(“Hello”)},3000);
<p>点击按钮,在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
如何停止执行?
clearTimeout()方法用于停止执行setTimeout()方法的函数代码。
语法
window.clearTimeout(timeoutVariable) 可以不使用window前缀
要使用clearTimeout()方法,你必须在创建超时方法中(setTimeout)使用全局变量:
myVar=setTimeout(“javascript function”,milliseconds);
如果函数还未被执行,你可以使用clearTimeout()方法来停止执行函数代码。
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}
javaScript弹窗
可以在javaScript中创建三种消息框:警告框,确认框,提示框
警告框:
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
window.alert(“sometext”);
window.alert() 方法可以不带上window对象,直接使用alert()方法。
<script>
function myFunction(){
alert("你好,我是一个警告框!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="显示警告框" />
确认框
确认框通常用于验证是否接受用户操作。
当确认卡弹出时,用户可以点击“确认”或者取消来确定用户操作。
当你点击“确认”,确认框返回true,如果点击 “取消”, 确认框返回 false。
window.confirrm(“sometext”);
window.confirm()方法可以不带上window对象,直接使用confirm()方法。
<p>点击按钮,显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
提示框
提示框经常用于提示用户在进入页面前输入某个值
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为null。
window.prompt(“sometext”,“defaultvalue”);
window.prompt() 方法可以不带上window对象,直接使用prompt()方法。
<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
换行
弹窗使用 反斜杠 + “n”(\n) 来设置换行。
实例
alert(“Hello\nHow are you?”);