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. Nginx+keepalived 脚本安装主从双机热备自动切换解决方案

    Nginx+keepalived 脚本安装主从双机热备自动切换解决方案 2013-07-02 19:24:13 标签:filesnginx keepalived 原创作品,允许转载,转载时请务必以超链 ...

  2. 12.18 分布式系统下的session

    广义的session: 会话控制,可以理解成为一种保存key-value的机制 从key的方面来看:sessionId和token sessionId: 服务端请求客户端的时候,服务端通过setcoo ...

  3. Git 分布式版本控制的常见命令

    Git 的作用:  (1)方便多人协同开发; (2)方便版本控制 Git 分布式版本控制的主要区域及命令图,下面会详细讲解: 创建项目并将切换至项目目录下 1. 创建本地仓库:  git init  ...

  4. c++多线程在异常环境下的等待

    c++11开始支持多线程编程,相关的类和函数封装在标准库头文件<thread>中,而c++多线程编程很重要的一点就是当用户创建一个std::thread对象,关联了可调用对象后,需要在该t ...

  5. 【剑指offer】栈的压入弹出序列，C++实现（举例）

    原创文章,转载请注明出处! 本题牛客网地址 博客文章索引地址 博客文章中代码的github地址 1.题目 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为第一个序列的出栈序列.注意 ...

  6. CentOS 7.4搭建Kubernetes 1.8.5集群

    环境介绍 角色 操作系统 IP 主机名 Docker版本 master,node CentOS 7.4 192.168.0.210 node210 17.11.0-ce node CentOS 7.4 ...

  7. del语句的总结

    删除属性 del 语句 可以删除对象(实例)的属性 语法: del 对象.实例变量名 del 语句 del 变量名 删除变量 del name del 列表[整数表达式] 删除列表中的元素 del L ...

  8. ios PageControl and UIScrollView

    // //  AlbumViewController.m //  HwangKop08.18 // //  Created by rimi on 15/8/20. //  Copyright (c) ...

  9. JS监听键盘事件(回车键)

    JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(event) { if (event.keyCode == "13& ...

  10. DVD项目

    package sy.com.cn;import java.util.*; public class DvdWorker { public static void main(String[]args) ...