天天看点

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

好记性不如赖笔头…………

提示框: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 = ;
    var setTimeoutDemo = function(){
        alert("第一种定时器执行第:"+(++i)+"次");
        setTimeoutName = setTimeout(setTimeoutDemo,);
    }   
    //关闭定时器
    function clearTimeoutDemo(){
        clearTimeout(setTimeoutName);
        i = ;
        alert("关闭定时器成功");
    }

    //开启第二种定时器,每隔二秒执行一次
    function setIntervalDemo(){
        setTimeoutName = setInterval(function(){
            alert("第二种定时器执行第:"+(++i)+"次");
        },);
    }
    //关闭第二种定时器
    var clearIntervalDemo = function(){
        clearInterval(setTimeoutName);
        i = ; 
        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 = ;
    //创建定时器
    var name = setInterval(
        function(){
            //获取id  timer元素的数据
            var timer = document.getElementById("timer");
            //如果秒数大于0
            if(time > ){
                //将秒数写入到页面并将秒数减一
                timer.innerHTML = time-- ;              
            }else{
                //清除定时任务 
                clearInterval(name);
                //跳转
                location.href="JSDemo1.html";
            }
        }   ,
        //每秒执行一次
        
    );
</script>
</html>