JavaScript-window常用

来源：互联网发布：h5网站源码编辑：程序博客网时间：2024/06/08 11:22

一、计时器

setTimeout()/clearTimeout()
说明：仅仅只执行一次，执行完成后不再继续
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>

二、历史记录

window.history.back()
说明：上一页
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>

三、对话框

alert()
说明：提示消息类的弹窗
confirm()
说明：确定是否操作的弹窗，带有按钮，返回布尔类型
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>

四、获取内容的三种方式

innerHTML
说明：可以是html内容，也可以是文本
innerText
说明：存文本内容
value
说明：form表单的内容

0 0