码迷,mamicode.com
首页 > 编程语言 > 详细

03JavaScriptBOM(window)19

时间:2018-02-25 19:05:33      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:计算   格式   meta   inter   def   block   一个   访问   方便   

day19


JavaScript BOM

BOM(browser object model)浏览器对象模型

BOM对象有:
  window
  navigator
  screen
  history
  location
  document
  event

window
  widnow是浏览器的一个实例,在浏览器中,window兑现有上冲角色,
  它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定
  的Global对象。

全局变量:
  window声明 window.变量名=值
  关键字声明 var 变量名=值

全局函数:
  window声明 window.函数名=function(){}
  关键字声明 function 函数名(){}
  
所有的全局变量和全局方法都被归在window上

语法:window.alert("content")
功能:显示带有一段消息和一个确认按钮的警告框

语法:window。confirm("message")
功能:显示一个带有指定消息和OK取消按钮的对话框
返回值:如果用户点击确定按钮,则confirm()返回true
如果用户点击取消按钮,则confirm()返回false

语法:window.prompt("text","defaultText")
参数说明:
text:要在对话框中显示的纯文本(而不是HTML格式的文本)
defaultText:默认的输入文本
返回值:如果用户单击提示框的取消按钮,则返回null
如果用户点击确定按钮,额返回输入字段当前显示的文本

语法:window.open(pageURL,name,parameters) window.close()
功能:打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明:
  pageURL:子窗口路径
  name:子窗口句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
  paramters:窗口参数(个参数用逗号分隔)

超时调用
语法:setTimeout(code,millisec)
功能:在指定的毫秒数后调用函数或计算表达式
参数说明:
  1,code:要调用的函数或要执行的JavaScript代码串
  2,millisec:在执行代码前需等待的毫秒数

setTimeout方法返回一个ID值通过它取消超时调用

清除超时调用
语法:clearTImeout(id_of_settimeout)
功能:取消由setTimeout()方法设置的timeout
参数说明:
  1,id_of_setttimeout:由setTimeout()返回的ID值,该值表示要取消
  的延迟执行代码块

间歇调用
语法:setInterval(code,millisec)
功能:每隔指定的时间执行一次代码
参数说明:
  1,code:要调用的函数或要执行的代码串
  2,millisec:周期性执行或调用code之间的时间间隔,以毫秒计算

清除间歇调用
语法:clearInterval(id_of_setinterval)
功能:取消由setInterval()方法设置的interval
参数说明:
  1,id_of_setinterval:由setInterval()返回的ID值

window01.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // var age = 12;
        window.age = 12;
        function SayAge() {
            alert(""+age);
        }
        
        window.username = "shink";
        window.SayUser = function () {
            alert("user:"+this.username);
        }

        SayAge();
        window.SayUser();
    </script>
</body>
</html>

 

window02.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .name{
            display: none;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        法式小面包
        <input type="button" value=‘删除‘ id="btn">
    </div>
    <div class="name" id="n"></div>
    <script>
        var btn = document.getElementById(btn);
        btn.onclick = function () {
        /*    document.getElementById("box").style.display = "none";*/
            var result = confirm("确定要删除吗?");
            if (result) {
                document.getElementById(box).style.display = "none";
            }
        }
        var message = prompt("请输入您的名字:");
        if (message != null) {
            var n = document.getElementById(n);
            n.innerHTML = "您的名字是:"+message;
            console.log(n.innerHTML)
            n.style.display = "block";
        }
    </script>
</body>
</html>

 

window03.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" id="quit" value="退出">
    <script>
        window.open("newwindow.html","newwindow","width=400,height=200,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,localtion=no,status=no");
        var quit = document.getElementById(quit);
        quit.onclick = function () {
            window.close();
        }
    </script>
</body>
</html>

 

window04.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        setTimeout(function () {
            alert(hello);
        },3000);

        var say = function say() {
            alert(say);
        }

        var id_timeout = setTimeout(say,2000);
        clearTimeout(id_timeout);
    </script>
</body>
</html>

 

window05.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        /*var id_interval = setInterval(function () {
            console.log("hello");
        },1000);

        setTimeout(function () {
            clearInterval(id_interval)
        },10000);*/
        var num = 1;
        var max = 10;
        var timer = null;
        //实现控制台输出1-10
        //用超时调用实现
        /*var a =function () {
            console.log(num);
            num++
            if (num<=max) {
                setTimeout(a,1000);
            } else {
                clearTimeout(timer);
            }
        }

        timer = setTimeout(a,1000);*/

        //用间歇调用实现
        timer = setInterval(function () {
            console.log(num++);
            if (num>max) {
                clearInterval(timer);
            }
        },1000);

    </script>
</body>
</html>

 

03JavaScriptBOM(window)19

标签:计算   格式   meta   inter   def   block   一个   访问   方便   

原文地址:https://www.cnblogs.com/shink1117/p/8469688.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!