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. Ansible 小手册系列 十一（变量）

    变量名约束 变量名称应为字母,数字和下划线. 变量应始终以字母开头. 变量名不应与python属性和方法名冲突. 变量使用 通过命令行传递变量(extra vars) ansible-playbook ...

  2. poj 1258 Agri-Net 最小生成树 prim算法+heap不完全优化 难度:0

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 41230   Accepted: 16810 Descri ...

  3. mysql的搭建

    创建程序用户 root@localhost ~]# groupadd mysql [root@localhost ~]# useradd -s /sbin/nologin -g mysql -M my ...

  4. python之阶乘的小例子

    现在自己写阶乘是这个样子的 def f(x): return x * f(x-1) if x >1 else 1 后来无意中看到耗子的一篇<Python程序员的进化>的文章, 感脚这 ...

  5. selected多次点击不生效

    表单下拉选项使用selected设置选中时,发现第一次默认选中成功,在页面不刷新的情况下操作(比如ajax),虽然selected属性设置了,但是默认选中不生效. 解决办法1 可能是浏览器缓存问题,在 ...

  6. yii2.0 使用不同语言

    1.建立语言目录.文件.项目根目录建立messages文件夹.存放不同语言对应的目录文件. 例如中文和英文 message 下建立两个文件夹 en.zh_CN 里面可以对应着多个翻译文件 2.在mai ...

  7. django2中文界面

    设置了中文语言 zh-hans后,django2默认页面是中文的. 看起来也不错哦. 创建django2超级管理员: createsuperuser 创建管理员后,就可以登录后台了. 注册用户user ...

  8. Linux文件权限总结

    一.用户组和用户 Linux是一个多用户.多任务环境,如下图,GroupA代表一个用户组,GroupB代表一个用户组,root是超级用户. Linux中,任何一个文件都有User.Group和othe ...

  9. Unity内存优化技术测试案例

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...

  10. python之List排序

    sorted() #coding:utf-8 #sorted Ascending 升序 L = [12,23,43,3,65,34,21,3645] print(sorted(L)) >> ...