您的位置：首页 > Web前端 > JavaScript

JS的多种提示框、定时器、定时任务

2017-06-01 14:47 411 查看
好记性不如赖笔头…………

提示框：alert(“恭喜你，注册成功”);

确认框：confirm(“是否删除？”);

确认框会返回一个boolean值，如果点击的是确定，返回true，如果点击的是取消，返回false

var returnValue = confirm(“是否删除？”);

alert(“您点击返回的值为:”+returnValue);

输入框：prompt(“请输入密码”);

输入框会返回用户输入的值，如果用户没有输入任何数据，会返回空，否则，会返回用户输入的数据，如果用户点击了取消，会返回null

var returnValue = pormpt(“请输入密码”);

alert(“您输入的值为：”+returnValue);

打开一个新的页面：open(“http://www.baidu.com“);

open(“连接地址”);

全写为window.open(“链接地址”);

定时器1：setTimeout(“alert(‘hi’);”,1000);

setTimeout(方法体,毫秒数);

注意：在执行时，会先把方法体加载，然后在1000毫秒后再执行

var name = setTimeout(“alert(‘Hi JS’);”,1000);

关闭定时器1：clearTimeout(定时器名称);

clearTimeout(name);

定时器2：setInterval(“alert(‘HI JS’);”,100);

var name = setInterval(“alert(‘HI JS’);”，1000);

setInterval(方法体，毫秒数);

关闭定时器2：clearInterval(name);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的BOM---window对象</title>
</head>
<body>
<button onclick="alertDemo();" >提示框</button><br/>
<button onclick="confirmDemo();" >确认框</button><br/>
<button onclick="promptDemo();" >输入框</button><br/>
<button onclick="openDemo();" >打开一个新的页面</button><br/>
<button onclick="setTimeoutDemo();" >打开定时器</button><br/>
<button onclick="clearTimeoutDemo();" >关闭定时器</button><br/>
<button onclick="setIntervalDemo();" >打开定时器2</button><br/>
<button onclick="clearIntervalDemo();" >关闭定时器2</button><br/>
</body>
<script type="text/javascript">
//提示框
function alertDemo(){
alert("我是个提示框");
}
//确认框
function confirmDemo(){
var cf = confirm("是否确认？");
alert("如果你点击了确认，返回值 为true，如果你点击了取消，返回值 为false；本次的返回值 为："+cf);
}
//输入框
function promptDemo(){
var name = prompt("请输入您的用户名：");
alert("您输入的用户名为："+name);
}
//打开一个新的页面
function openDemo(){
open("JSDemo1.html");
}

//开启第一种定时器，每隔三秒执行一次
var setTimeoutName ;
var i = 0;
var setTimeoutDemo = function(){
alert("第一种定时器执行第："+(++i)+"次");
setTimeoutName = setTimeout(setTimeoutDemo,2000);
}
//关闭定时器
function clearTimeoutDemo(){
clearTimeout(setTimeoutName);
i = 0;
alert("关闭定时器成功");
}

//开启第二种定时器，每隔二秒执行一次
function setIntervalDemo(){
setTimeoutName = setInterval(function(){
alert("第二种定时器执行第："+(++i)+"次");
},2000);
}
//关闭第二种定时器
var clearIntervalDemo = function(){
clearInterval(setTimeoutName);
i = 0;
alert("关闭定时器成功");
}
</script>
</html>


定时任务DEMO

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时跳转DEMO</title>
</head>
<body>
恭喜你注册成功，本页面将在<span id="timer">5</span>秒后跳转到个人中心页面，如果没有跳转，请<a href="JSDemo1.html">点击这里</a>跳转。
</body>
<script type="text/javascript">
//定义显示的时间，因为定时任务是先把要执行的方法加载后，在1秒后再执行，所以可以比页面上的秒数少一秒，这一点须要根据须要高速
var time = 4;
//创建定时器
var name = setInterval(
function(){
//获取id  timer元素的数据
var timer = document.getElementById("timer");
//如果秒数大于0
if(time > 0){
//将秒数写入到页面并将秒数减一
timer.innerHTML = time-- ;
}else{
//清除定时任务
clearInterval(name);
//跳转
location.href="JSDemo1.html";
}
}   ,
//每秒执行一次
1000
);
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js定时器 JS倒计时 JS自动跳转 JS输入框 JS确认框
相关文章推荐
新的分享
章节导航