JavaScript-window常用

一、计时器

  1. setTimeout()/clearTimeout()
    说明:仅仅只执行一次,执行完成后不再继续

  2. setInterval()/clearInterval()
    说明:重复执行,直到clearInterval()

实例

<!DOCTYPE HTML>
<html>
    <head>
        <title>计时器</title>
        <style type="text/css">
            #num {
                font-size:50px;
                color:red;
            }
        </style>
        <script type="text/javascript">
            window.onload = init();
            function init(){
                setInterval("setTime();",1000);/*重复,间隔1s*/
                setTimeout("getCount();",5000);/*单次,等待5s后执行*/
            }
            function setTime(){
                var num = document.getElementById("num");
                var time = num.innerHTML;
                if(time > 0){
                    num.innerHTML = time - 1;
                }
            }
            function getCount(){
                var count = document.getElementById("count");
                count.innerHTML = 1 + count.innerHTML;
            }
        </script>
    </head>
    <body>
        <div>
            <lable>时间还剩下</lable>
            <lable id="num">20</lable>
            <lable>秒----setInterval()</lable>
        </div>
        <div>
            <lable id="count">----setTimeout()</lable>
        </div>
    </body>
</html>

二、历史记录

  1. window.history.back()
    说明:上一页

  2. window.history.next()
    说明:下一页

实例

第一页

<!DOCTYPE HTML>
<html>
    <head>
        <title>历史记录-第一页</title>
        <style type="text/css">
            a {
                text-decoration:none;
                background-color:green;
            }
        </style>
        <script type="text/javascript">
            function toForward(){
                window.history.back();/*前一页*/
            }
            function toNext(){
                window.history.forward();/*后一页*/
            }
        </script>
    </head>
    <body>
        <a href="history-2.html">第二页</a><br/>
        <input type="button" onclick="toForward();" value="上一页"></input>
        <input type="button" onclick="toNext();" value="下一页"></input>
    </body>
</html>

第二页

<!DOCTYPE HTML>
<html>
    <head>
        <title>历史记录-第二页</title>
        <style type="text/css">
            a {
                text-decoration:none;
                background-color:red;
            }
        </style>
        <script type="text/javascript">
            function toForward(){
                window.history.back();/*前一页*/
            }
            function toNext(){
                window.history.forward();/*后一页*/
            }
        </script>
    </head>
    <body>
        <a href="history-1.html">第一页</a><br/>
        <input type="button" onclick="toForward();" value="上一页"></input>
        <input type="button" onclick="javascript:toNext();" value="下一页"></input>
    </body>
</html>

三、对话框

  1. alert()
    说明:提示消息类的弹窗

  2. confirm()
    说明:确定是否操作的弹窗,带有按钮,返回布尔类型

  3. prompt()
    说明:可以接收用户输入的消息的弹窗,带有文本框,返回String

实例

<!DOCTYPE HTML>
<html>
    <head>
        <title>对话框</title>
        <script type="text/javascript">
            function testConfirm(){
                var a = confirm();
                var b = document.getElementById("confirm_value");
                b.innerHTML = a;
            }
            function testPrompt(){
                var a = prompt("请输入内容:");
                var b = document.getElementById("prompt_value");
                b.innerHTML = a;
                var c = document.getElementById("prompt_type");
                c.innerHTML = typeof(a);
            }
        </script>
    </head>
    <body>
        <div>
            <lable>alert对话框</lable><br/>
            <input type="button" onclick="alert('alert对话框');" value="alert对话框"></input>
        </div>
        <hr/>
        <div>
            <lable>confirm对话框</lable><br/>
            <input type="button" onclick="testConfirm();" value="confirm对话框"></input><br/>
            <lable>接收到的值:</lable>
            <lable id="confirm_value"></lable>
        </div>
        <hr/>
        <div>
            <lable>prompt对话框</lable><br/>
            <input type="button" onclick="testPrompt();" value="prompt对话框"></input><br/>
            <lable>接收到的值:</lable>
            <lable id="prompt_value"></lable><br/>
            <lable>接收到的类型:</lable>
            <lable id="prompt_type"></lable>
        </div>
    </body>
</html>

四、获取内容的三种方式

  1. innerHTML
    说明:可以是html内容,也可以是文本

  2. innerText
    说明:存文本内容

  3. value
    说明:form表单的内容

发布了38 篇原创文章 · 获赞 1 · 访问量 9436
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章