Unit06： 外部对象概述 、 window 对象 、 document 对象　　　　

小代码演示：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    //1.确认框

    function del() {

        var b = confirm("确定要删除此数据吗?");

        console.log(b);

    }

    //2.周期性定时器

    function f1() {

        //启动周期性定时器:

        //告诉浏览器每隔1000ms调用一次函数.

        //返回值是定时器的ID,用来停止定时器.

        var n = 5;

        var id = setInterval(function(){

            console.log(n--);

            if(!n) {

                //停止定时器

                clearInterval(id);

                console.log("DUANG");

            }

        },1000);

        //当前方法f1相当于主线程,

        //启动定时器相当于启动支线程,

        //主线程不等待支线程,启动完成后,

        //立刻执行下一行,即输出了BOOM.

        //支线程在等待1S后才第一次运行.

        console.log("BOOM");

    }

    //3.一次性定时器

    var id;

    function f2() {

        //启动一次性定时器:

        //让浏览器在5000ms后调用函数,

        //并且调用一次后就自动停止定时器.

        id = setTimeout(function(){

            console.log("叮叮叮叮叮叮");

        },5000);

    }

    function f3() {

        clearTimeout(id);

    }

</script>

</head>

<body>

    <input type="button" value="删除"

        onclick="del();"/>

    <input type="button" value="倒计时"

        onclick="f1();"/>

    <input type="button" value="订闹钟"

        onclick="f2();"/>

    <input type="button" value="取消"

        onclick="f3();"/>

</body>

</html>

电子时钟显示小案例：setInterval

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

    #clock {

        border: 1px solid red;

        width: 200px;

        height: 40px;

        line-height: 40px;

        font-size: 20px;

        text-align: center;

    }

</style>

<script>

    //开始

    var id;

    function start1() {

        if(id) {

            //id非空,表示定时器已启动,不必再次启动了

            return;

        }

        //id为空,表示未启动,则启动定时器

        id = setInterval(function(){

            var d = new Date();

            var p = document.getElementById("clock");

            p.innerHTML = d.toLocaleTimeString();

        },1000);

    }

    //停止

    function stop1() {

        clearInterval(id);

        //停止时清空id,以便于下一次启动

        id = null;

    }

</script>

</head>

<body>

    <p>

        <input type="button" value="开始"

            onclick="start1();"/>

        <input type="button" value="停止"

            onclick="stop1();"/>

    </p>

    <p id="clock"></p>

</body>

</html>

Oclock.html

发送消息小案例：setTimeout

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

    #msg {

        border: 1px solid red;

        width: 150px;

        height: 40px;

        line-height: 40px;

        text-align: center;

        font-size: 20px;

    }

</style>

<script>

    //发送

    var id;

    function send1() {

        if(id) {

            //id非空,表示已启动,不要启动第2次

            return;

        }

        //id为空,表示未启动,则启动定时器

        //显示正在发送

        var p = document.getElementById("msg");

        p.innerHTML = "正在发送...";

        //延迟3秒,真正发送

        id = setTimeout(function(){

            p.innerHTML = "已发送";

            id = null;

        },3000);

    }

    //撤销

    function cancel1() {

        if(id) {

            //id非空,表示已启动,此时可以撤销

            var p = document.getElementById("msg");

            p.innerHTML = "已撤销";

            clearTimeout(id);

            id = null;

        }

        //id为空,表示未启动,不必撤销

    }

</script>

</head>

<body>

    <p>

        <input type="button" value="发送"

            onclick="send1();"/>

        <input type="button" value="撤销"

            onclick="cancel1();"/>

    </p>

    <p id="msg"></p>

</body>

</html>

send_msg.html

知识点：

  • 　location
  • 　history
  • 　screen
  • 　navigator
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    //1.location

    function f1() {

        var b = confirm("确定要离开吗?");

        if(b) {

            location.href = "http://www.tmooc.cn";

        }

    }

    function f2() {

        location.reload();

    }

    //2.history

    function f3() {

        history.forward();

    }

    //3.screen

    console.log(screen.width);

    console.log(screen.height);

    console.log(screen.availWidth);

    console.log(screen.availHeight);

    //4.navigator

    console.log(navigator.userAgent);

</script>

</head>

<body>

    <input type="button" value="达内"

        onclick="f1();"/>

    <input type="button" value="刷新"

        onclick="f2();"/>

    <input type="button" value="前进"

        onclick="f3();"/>

</body>

</html>

知识点二：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    //onload是页面加载事件,在网页加载完成时

    //自动触发.触发时调用对应的匿名函数.

    window.onload = function(){

        //1.读取节点的名称及类型

        var p1 = document.getElementById("p1");

        console.log(p1.nodeName);

        console.log(p1.nodeType);

        //2.读写节点的内容(双标签中间的文本)

        //2.1 innerHTML(支持标签)

        console.log(p1.innerHTML);

        p1.innerHTML = "DOM操作可以<u>读写</u>节点";

        //2.2 innerText(不支持标签)

        var p2 = document.getElementById("p2");

        console.log(p2.innerText);

        p2.innerText = "DOM操作可以<u>查询</u>节点";

        //3.读写节点的值

        //只有如下表单控件有值:input,textarea,select

        //input.value

        //4.读写节点的属性

        //4.1通过方法读写(麻烦,万能)

        var img = document.getElementById("i1");

        console.log(img.getAttribute("src"));

        img.setAttribute("src","../images/02.jpg");

        img.removeAttribute("src");

        //4.2通过属性名读写(简单,几个)

        //举例:

        //读:span.className

        //写:span.className = "ok"

        //只有class,style,id可以通过这种方式读写,

        //其他的属性是非标准的API,即新版浏览器可以

        //使用,但旧版浏览器不支持(如a.href).

        var a = document.getElementById("a1");

        console.log(a.style.color);

        a.style.color = "blue";

    }

</script>

</head>

<body>

    <p id="p1">DOM操作可以<b>读写</b>节点</p>

    <p id="p2">DOM操作可以<b>查询</b>节点</p>

    <p id="p3">DOM操作可以<b>增删</b>节点</p>

    <p>

        <img src="../images/01.jpg" id="i1"/>

    </p>

    <p>

        <a href="#" style="color:red;" id="a1">顶部</a>

    </p>

</body>

</html>

图片轮播案例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

    div {

        border: 1px solid red;

        width: 218px;

        height: 218px;

    }

    .show {

        display: inline-block;

    }

    .hide {

        display: none;

    }

</style>

<script>

    //页面加载后

    window.onload = function() {

        lunbo();

    }

    var id;

    //轮播次数

    var n = 0;

    function lunbo() {

        //启动定时器,每2S执行一次轮播

        id = setInterval(function(){

            n++;

            //获取所有图片

            var imgs =

                document.getElementsByTagName("img");

            //遍历他们,都隐藏

            for(var i=0;i<imgs.length;i++) {

                imgs[i].className = "hide";

            }

            //将下一张图片显示

            var next = n%imgs.length;

            imgs[next].className = "show";

        },2000);

    }

    function stop1() {

        clearInterval(id);

    }

</script>

</head>

<body>

    <!--

        onmouseover是鼠标悬停事件;

        onmouseout是鼠标离开事件;

        hover不是事件,是伪类选择器!

     -->

    <div onmouseover="stop1();"

        onmouseout="lunbo();">

        <img src="../images/01.jpg"/>

        <img src="../images/02.jpg" class="hide"/>

        <img src="../images/03.jpg" class="hide"/>

        <img src="../images/04.jpg" class="hide"/>

        <img src="../images/05.jpg" class="hide"/>

        <img src="../images/06.jpg" class="hide"/>

    </div>

</body>

</html>

forImg.html

Unit06： 外部对象概述 、 window 对象 、 document 对象的更多相关文章

  1. javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

  2. Window及document对象的区别

    一.Window对象 -------------------------------------------------- ------------------- 对象属性 window //窗户自身 ...

  3. JavaScript常用内置对象（window、document、form对象）

    由于刚开始学习B/S编程,下面对各种脚本语言有一个宏观的简单认识. 脚本语言(JavaScript,Vbscript,JScript等)介于HTML和C,C++,Java,C#等编程语言之间.它的优势 ...

  4. Window及document对象

    注:页面上元素name属性以及JavaScript引用的名称必须一致包括大小写 否则会提示你1个错误信息 "引用的元素为空或者不是对象" 一.Window对象 ---------- ...

  5. 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、

    location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...

  6. js对象之window和document区别

    window是整个页面的全局环境,而document可以理解为整个页面这个最大的元素(整个dom树) window: 可以看到window下面有很多变量 document: 可见document是整个 ...

  7. nuxt.js实战之window和document对象的使用

    在开发nuxt项目的时候,我们难免会使用到document来获取dom元素.如果直接在文件中使用就会报错.这是因为document是浏览器端的东西服务端并没有. 解决方法: 我们只需要在使用的地方通过 ...

  8. Freezable 对象概述 | Microsoft Docs

    原文:Freezable 对象概述 | Microsoft Docs Freezable 对象概述Freezable Objects Overview 2017/03/30 本文内容 什么是可冻结的? ...

  9. nuxt Window 或 Document未定义解决方案

    概述 在用nuxt开发服务端渲染项目并引入第三方库的时候,经常会遇到window或document未定义的情况,原因是这个第三方库里面用到了window或者document,然后在服务端打包的时候,n ...

随机推荐

  1. jquery中ajax跨域的写法

    由于JS同源策略的影响,因此js只能访问同域名下的文档.因此要实现跨域,一般有以下几个方法: 一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2 ...

  2. Python中注释的添加

    1.Python中注释,有助于我们对程序的理解:但注释不需要每行都写,可以在方法前面注释该方法的功能 或重要的一行进行注释. 2.单行注释,使用#号: 3.多行注释,使用""&qu ...

  3. 如何利用$_SERVER["PHP_SELF"]变量植入script代码？

    假如我们是黑客,可以诱骗用户访问如下链接, 相当于用户会在浏览器地址栏中输入以下地址: http://www.xxx.com/test_form.php/%22%3E%3Cscript%3Ealert ...

  4. Kotlin Reference (一) Basic Syntax

    什么是Kotlin Kotlin翻译成中文叫"靠他灵",它是由JetBrains公司发明的一种基于JVM的编程语言,目前Google宣布kotlin为Android开发的官方语言. ...

  5. React-Native进阶_3.触摸高亮显示TouchableHighlight

    在安卓原生ListView  点击 其中一个子视图时,会有高亮效果,这个效果在ReactNative 中通过TouchableHighlight 实现,具体使用如下 4.触摸高亮显示 Touchabl ...

  6. Android性能优化系列之电量优化

    电量消耗的计算与统计是一件麻烦而且矛盾的事情,记录电量消耗本身也是一个费电量的事情,随着Android开的性能要求越来越高,电量的优化,也显得格外重要,一个耗电的应用,用户肯定会毫不犹豫的进行卸载,所 ...

  7. [Linux] 虚拟环境的配置和使用 virtualenv

    1.安装 sudo apt-get install python-virtualenv 2.使用 创建虚拟环境: virtualenv [虚拟环境名称] 例如: virtualenv env_test ...

  8. iOS-----使用AVAudioPlayer播放音乐

    使用AVAudioPlayer播放音乐 AVAudioPlayer是一个属于AVFoundation.framework的类.它作用类似于一个功能强大的播放器.AVAudioPlayer支持广泛的音频 ...

  9. AspectJ语法

    AspectJ语法 看了很多AOP的文章了,AOP这两年发展的很慢,没有什么新意,现在到处都是SOA,SCA了,不过研究了一下,觉得还是很有帮助的.尤其是增加系统的契约性和模块的独立性来说,很有帮助. ...

  10. Unity Obstacle分析

    NavMeshObstacle Normal 通过设置半径和高度来设定障碍物,配合NavMesh使用. 优点: 简单易用,效率高 动态生成 缺点: 可能会被主角穿过,但目前没发现 形状固定为圆柱 Na ...