JavaScript-window常用

    xiaoxiao2021-03-25  81

    一、计时器

    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表单的内容

    转载请注明原文地址: https://ju.6miu.com/read-38887.html

    最新回复(0)