Web前端——JavaScript 的基础总结_js向head中写入<meta charset="utf-8">-CSDN博客

本文链接：https://blog.csdn.net/weixin_43860260/article/details/95307994

一、介绍

JavaScript是最流行的脚本语言，它存在于所有的 web 浏览器中
脚本语言是一种解释型语言，由解释器来运行，用来控制软件应用程序，脚本通常以文本保存，在被调用时进行解释

JavaScript手册下载

二、组成

核心—— ECMAScript
文档对象模型——DOM
浏览器对象模型——BOM

在这里插入图片描述

三、JS的导入方式

1、在 H5 内部使用 JS

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <script>
        alert("Hello JS");
    </script>
</head>

<body>
</body>
</html>

2、在 H5 中引入外部 JS

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
</head>

<body>
</body>
</html>

四、JS 的基本语法

1、声明变量
使用 var 声明；js 的变量是弱类型，不用声明具体的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        var i = 10;
        i = "hello js";
        console.log(i);//在控制台打印
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

2、数据类型
在ECMAScript中，变量可以存在两种数据类型，即原始类型与引用类型

2-1、原始类型

原始类型，就是一个字面值，是不可变的。如：10 “abc”
String 在javascript中字符串字符串字面值，可以使用单引号或双引号声明
Number 在javascript中任何数字都看成是Number类型，它即可以表示32位整数，也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始
Boolean 它有两个值true和false
Undefined:该类型只有一个值undefined.表示的是未初始化的变量
Null 该类型只有一个值null,表示尚未存在的对象。值undefined实际上是从值null派生出来的。因此null==undefined得到的结果是true

2-2、引用类型

引用类型通常叫做类(class),也就是说，遇到引用值，所处理的就是对象

2-3、类型的转换

parseInt：转换成整数
parsetFloat：转换成浮点数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        var s = "123";
        alert(s + 1);//1231
        alert(parseInt(s) + 1);//124
    </script>
</head>
<body>

</body>
</html>

3、等性运算符
ECMAScript提供了两套等性运算符

3-1、等号"==“与非等号”!="用来处理原始值

如果一个运算数是Boolean值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
在比较时，该运算符还遵守下列规则：
值 null 和 undefined 相等。
在检查相等性时，不能把 null 和 undefined 转换成其他值。
如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等
直接判断null,undefined,0,false,""这些值=非真，可以使用这个特性来判断变量为空,除了这些值都是真

3-2、全等号===与非全等号!==

"全等"只有在无需类型转换运算数就相等的情况下，才返回 true
"非全等"只有在无需类型转换运算数不相等的情况下，才返回 true。

4、表达式

在这里插入图片描述

五、js 常用对象

1、String 字符串对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        var str = new String("a-b-cdc-FG");
        //alert(str.length);//10
        //alert(str.charAt(4));//c
        //alert(str.charCodeAt(4));//99
        //alert(str.indexOf("c"));//4
        //alert(str.lastIndexOf("c"));//6
        //var arr = str.split("-");
        /* for(var i=0;i<arr.length;i++){
            alert(arr[i]);
        } */
        //alert(str.substr(2,3));//b-c
        //alert(str.substring(2,3));//b
        //alert(str.toUpperCase());
    </script>
</head>
<body>

</body>
</html>

2、Array 数组对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var arr = new Array(6)
        arr[0] = "George"
        arr[1] = "John"
        arr[2] = "Thomas"
        arr[3] = "James"
        arr[4] = "Adrew"
        arr[5] = "Martin"

        document.write(arr + "<br />")
        arr.splice(2, 1, "William")
        document.write(arr + "<br />")

    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr = [3, "z", 1, "java", 'js', true, 4];
        // alert(arr.splice(3,0, "python", "php")); //删除java
        // alert(arr);
        //alert(arr.length);//7
        // alert(arr.join("-"));//3-7-1-java-js-true-4
        // alert(arr.pop());//4
        // alert(arr.join("-"));//3-7-1-java-js-true
        // alert(arr);//3,7,1,"java",'js',true
        // alert(arr.push("R"));
        // alert(arr);
        //alert(arr.reverse());
        //alert(arr.sort());//按照字符串字典顺序进行排序
    </script>
</head>
<body>

</body>
</html>

3、Date 日期对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var date = new Date();
        // alert(date.toString());
        // alert(date.toLocaleString());
        //  alert("year:"+date.getFullYear());//2019
        // alert("month:"+date.getMonth());//6
        // alert("date:"+date.getDate());//23
        // alert("day:"+date.getDay());//5
        /*
                var time1 = date.getTime();
                var time2 = 3*24*60*60*1000;
                alert(new Date(time1+time2).toLocaleString());
        */

    </script>
</head>
<body>

</body>
</html>

4、RegExp 正则表达式对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var email = "AAAAA@163.com";
        var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
        alert(reg.test(email));
    </script>
</head>
<body>

</body>
</html>

六、函数和事件

1、函数的基本写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
                function method () {
                    alert("xxx")
                }
                method();
        */

        /*
             var method = function(){
                alert("yyy");
            };
            method();
        */

        /*
            function fn(a,b,c){
                var sum = a+b+c;
                alert(sum);
                //arguments是个数组 会将传递的实参进行封装
                for(var i=0;i<arguments.length;i++){
                    alert(arguments[i]);
                }
            }
            fn(1,2,4,8);
        */

    </script>
</head>
<body>

</body>
</html>

2、变量的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        var v3 = "v3 全局变量";//v3作用域属于window,在js中window是全局对象

        function f1() {
            var v1 = 'f1变量'; //v1作用域属于f1函数
            v4 = "v4 全局变量";//因为没有var声明，所以是全局变量
            console.log(v1);
            console.log(v3);
            console.log(v2);//报错
        }

        function f2() {
            var v2 = "f2变量";//v2作用域属于f2函数
            console.log(v2);
            console.log(v3);
            console.log(v4); //不报错，因为v4属于window
            console.log(v1);//报错
        }

        f1(); //调用函数
        f2();

    </script>
</head>
<body>

</body>
</html>

3、封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数

一般定义函数：

<script>
    function myalert() {
        alert("hello");
    }

    myalert();
</script>

封闭函数

<script>
    (function () {
        alert("hello");
    })();
</script>

封闭函数的好处

封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全

<script>
    var num = 23;

    function myalert() {
        alert("hello");
    }

    (function () {
        var num = 100;

        function myalert() {
            alert("hello javascript");
        }

        alert(num);//100
        myalert();//hello javascript
    })();
    alert(num);//23
    myalert();//hello
</script>

4、常用的事件
在这里插入图片描述

5、阻止默认事件

比如在浏览百度文库时，阻止下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--这是一个鼠标右键事件-->
<div style="background-color: red;" oncontextmenu="fn1(window.event);">div</div>
<a href="demo11.html" onclick="fn(event)">点击我吧</a>
<hr>
<a href="#" onclick="alert('a');">点击我吧</a>
<a href="javascript:void(0);" onclick="alert('a');">点击我吧</a>
<script>
    function fn1(e) {
        e.preventDefault(); //阻止浏览器默认事件
        alert('a');
    }

    function fn(e) {
        //ie：window.event.returnValue = false;
        //w3c：调用e.preventDefault();函数
        if (e && e.preventDefault) {
            alert('w3c标准浏览器,屏蔽浏览器默认事件'); //标准浏览器阻止默认事件
            e.preventDefault();
        } else {
            alert("ie 浏览器");
            window.event.returnValue = false; //ie阻止浏览器事件
        }
    }
</script>

</body>
</html>

6、阻止事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div onclick="fn1()" style="width:100px;height:100px;background-color: green;padding: 50px;">
    <div onclick="fn2(event)" style="width:100px;height:100px;background-color: red;">xxxx</div>
</div>

<script type="text/javascript">
    function fn1() {
        alert("fn1");
    }

    function fn2(e) {
        alert("fn2");
        //阻止事件的传播
        if (e && e.stopPropagation) {
            alert("w3c");
            e.stopPropagation(); //w3c标准浏览器(谷歌，火狐等)
            //IE标签
        } else {
            alert("ie");
            window.event.cancelBubble = true; //IE
        }
    }
</script>
</body>
</html>

7、常见的全局函数

在这里插入图片描述

8、json 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        var json = {
            fn: function () {
                alert("a");
            }, "name": "梅西", "age": 30, team: {name: "巴塞罗那", contry: "西班牙"}
        }; //json
        alert(json.name);
        alert(json.age);
        alert(json.team.contry);
        alert(json.team.name);
        json.fn();
    </script>
</head>
<body>

</body>
</html>

9、eval 函数

计算 JavaScript 字符串，并把它作为脚本代码来执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        var jsonStr = '{fn:function(){ alert("a");}, "name":"梅西", "age": 30, team: {name:"巴塞罗那", contry: "西班牙"}}'; //json
        var json = eval("(" + jsonStr + ")"); //把字符串转换成对象
        alert(json.name);
        alert(json.age);
        alert(json.team.contry);
        alert(json.team.name);
        json.fn();
    </script>
</head>
<body>

</body>
</html>

10、编码与解码的函数

编码：把一些特殊字符转成16进制
解码：把16进制的数字，转换成特殊字符

encodeURI()，decodeURI()

<script>
    var test1 = "http://www.w3school.com.cn/My first/";

    document.write(encodeURI(test1) + "<br />");
    document.write(decodeURI(test1));
</script>

在这里插入图片描述

11、isNaN

“is not a number” 的缩写

var a = 'aaa';
window.alert(isNaN(a)); //返回true

浏览器对象模型——BOM

七、window 对象

1、setTimeout

设置超时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./jQuery/jquery-3.3.1.min.js"></script>
    <script src="./javascript/index.js"></script>
    <script>
        var timer;
        var fn = function () {
            alert("hello,world");
            timer = setTimeout(fn, 2000);
        };
        var closer = function () {
            clearTimeout(timer);
        };
        fn();
    </script>
</head>
<body>
<input type="button" value="按钮" onclick="closer()">
</body>
</html>

2、setInterval

设置间隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./jQuery/jquery-3.3.1.min.js"></script>
    <script src="./javascript/index.js"></script>
    <script>
        var timer = setInterval(
            function () {
                alert("hello javascript");
            },
            2000
        );
        var closer = function () {
            clearInterval(timer);
        };
    </script>
</head>
<body>
<input type="button" value="按钮" onclick="closer()">
</body>
</html>

页面自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./javascript/index.js"></script>
    <script>
        var timer = 10;
        var tid = setInterval(function () {
            var o = document.getElementById("second");
            timer--;
            if (timer == 1) {
                clearInterval(tid);
                location.href = 'https://www.baidu.com'; //页面跳转
            }
            o.innerHTML = timer;
        }, 1000);
    </script>
</head>
<body>
恭喜您注册成功，<span id="second" style="color: red;">10</span>秒后跳转到首页，如果不跳转请<a href="#">点击这里</a>
</body>
</html>

3、History

历史

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="location.href ='https://www.baidu.com'">打开</button>
<button onclick="history.go(-1)">back</button>
<button onclick="history.go(1)">forword</button>
</body>
</html>

4、Location

location.href ="..."
location.reload();

文档对象模型——DOM

在这里插入图片描述

八、访问节点

1、getElementById

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./javascript/index.js"></script>
    <script>

    </script>
</head>
<body>
<form name="form1" action="test.html" method="post">
    <input type="text" name="username" value="IT精英培训" id="tid">
    <input type="button" name="ok" value="保存1"/>
</form>
</body>
<script type="text/javascript">
    var inputNode = document.getElementById("tid");
    alert(inputNode.value);
    alert(inputNode.type);
</script>
</html>

2、getElementsByName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./javascript/index.js"></script>
    <script>

    </script>
</head>
<body>
<form name="form1" action="test.html" method="post">
    <input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br>
    <input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br>
    <input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br>
    <input type="button" name="ok" value="保存1"/>
</form>
</body>
<script type="text/javascript">
    //通过元素的name属性获取所有元素的引用
    var inputNodes = document.getElementsByName("tname");
    //为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
    for (var i = 0; i < inputNodes.length; i++) {
        var inputNode = inputNodes[i];
        inputNode.onchange = function () {
            alert(this.value);
        };
    }
</script>
</html>

3、getElementsByTagName

返回带有指定标签名的对象的集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./javascript/index.js"></script>
    <script>

    </script>
</head>
<body>
<form name="form1" action="test.html" method="post">
    <input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br>
    <input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br>
    <input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br>
    <select name="edu" id="edu">
        <option value="博士">博士^^^^^</option>
        <option value="硕士" selected>硕士^^^^^</option>
        <option value="本科">本科^^^^^</option>
        <option value="幼儿园">幼儿园^^^^^</option>
    </select>
    <select name="job" id="job">
        <option value="美容">美容^^^^^</option>
        <option value="IT">IT^^^^^</option>
        <option value="程序员" selected="selected">程序员^^^^^</option>
        <option value="建筑师">建筑师^^^^^</option>
    </select>
    <br/>
    <input type="button" id="btn" value="输出select被选中的值"/>
    <input type="button" name="ok" value="保存1"/>

</form>
</body>
<script type="text/javascript">
    var a = document.getElementsByTagName("select");
    for (var i = 0; i < a.length; i++) {
        alert(a[i].value);
    }
</script>
</html>

4、createElement

createElemnt :在文档中创建元素

setAttribute：设置元素的属性

getAttribute：获得属性

appendChild：在元素中添加新元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./javascript/index.js"></script>
    <script>

    </script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
    <li id="bj" value="beijing">北京</li>
    <li id="sh" value="shanghai">上海</li>
    <li id="cq" value="chongqing">重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
    <li id="fk" value="fangkong">反恐</li>
    <li id="ms" value="moshou">魔兽</li>
    <li id="xj" value="xingji">星际争霸</li>
</ul>
<button id="btn">添加</button>

<script>
    document.getElementById("btn").onclick = function () {
        var li = document.createElement("li");
        li.setAttribute("id", "tj");
        li.setAttribute("value", "tianjin");

        //设置Text
        li.innerText = "天津";

        var city = document.getElementById("city");
        city.appendChild(li);
    }
</script>
</body>
</html>

5、innerHTML和innerText

innerHTML：设置内容执行HTML解析

innerText：设置的内容不执行HTML解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./javascript/index.js"></script>
    <script>

    </script>
</head>
<body>
<div id="subject" style="background-color: red;">jquery</div>
</body>
<script language="JavaScript">
    //    document.getElementById("subject").innerText = "<h1>H1标题</h1>";
    document.getElementById("subject").innerHTML = "<h1>H1标题</h1>";
</script>
</html>

九、js 面向对象

1、使用 new Object() 产生对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        var car = new Object();
        car.name = "劳斯莱斯幻影";
        car.color = "雅黑";
        car.use = "买菜用";
        car.user = "我的";
        car.showName = function () {
            document.write(this.name);
        }
        car.showName();
    </script>
</head>
<body>
</body>
</html>

输出：劳斯莱斯幻影

2、字面量赋值方式创建对象(JSON)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        var car = {
            name: "劳斯莱斯幻影",
            color: "雅黑",
            use: "买菜用",
            user: "我的",
            showName: function () {
                document.write(this.name + "的颜色是：" + this.color + "，我准备" + this.use);
            }
        }
        car.showName();
    </script>
</head>
<body>
</body>
</html>

3、通过构造函数产生对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }

        var Lemon = new Person("猛哥", "38", "男");
        alert(Lemon.name + Lemon.age + Lemon.sex);
    </script>
</head>
<body>
</body>
</html>

4、js 原型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        function Flower() {
            this.showArea = function () {
                alert(this.area);
            };
        }

        Flower.prototype.name = "曼陀罗花";
        Flower.prototype.genera = "茄科 曼陀罗属";
        Flower.prototype.area = "印度、中国北部";
        Flower.prototype.uses = "观赏或药用";
        Flower.prototype.showName = function () {
            alert(this.name);
        }

        var flower1 = new Flower();
        //flower1.showName(); //曼陀罗花
        var flower2 = new Flower();

        flower2.__proto__.name = '玫瑰花';

        flower2.showName(); //玫瑰花
        flower1.showName(); //玫瑰花
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述
执行flower1.showName方法时,首先查找flower1对象中有没有showName方法,如果没有,则去去Flower.prototype中查找showName方法

十、js 继承

1、对象冒充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        function ClassFuther(name) {
            //父类的构造函数
            this.name = name;
            this.sayName = function () {
                alert(this.name);
            }
        }

        //对象冒充
        function ClassChild(name, sex) {
            this.newMethod = ClassFuther;//函数名指针指向ClassParent;
            this.newMethod(name);//调用该方法。
            delete this.newMethod;//删除对ClassParent的引用，这样以后就不能再调用它了。
            this.sex = sex;
            this.saySex = function () {
                alert(this.sex);
            }
        }

        var obj = new ClassChild("张三", "男");
        obj.saySex();
        obj.sayName();
    </script>
</head>
<body>
</body>
</html>

2、使用 call 方法
call函数:调用函数，同时改变函数中this指针指向的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        function ClassParent(name) {
            this.name = name;
            this.sayName = function () {
                alert(this.name);
            }
        }

        function ClassChild2(name, sex) {
            ClassParent.call(this, name);
            this.sex = sex;
            this.saySex = function () {
                alert(this.sex);
            }
        }

        var obj2 = new ClassChild2("苍井空", "女");

        obj2.sayName();
        obj2.saySex();
    </script>
</head>
<body>
</body>
</html>

3、使用 prototype 原型链继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        function People(name, age) {
            this.name = name;
            this.age = age;

        }

        People.prototype = {
            getName: function () {
                return this.name;
            },
            getAge: function () {
                return this.age;
            }
        };

        function Boy(name, age, shape) {
            People.call(this, name, age);
            this.shape = shape;
        }

        Boy.prototype = People.prototype;
        Boy.prototype.getShape = function () {
            return this.shape;
        };

        var boy = new Boy('kitty', 6, "fat");
        console.log(boy.getName());
        console.log(boy.getShape());
    </script>
</head>
<body>
</body>
</html>

原型链继承原理
在这里插入图片描述

十一、js 案例

1、轮播图自动播放

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        var index = 0;

        function changeImg() {

            //1. 获得要切换图片的那个元素
            var img = document.getElementById("img1");

            //计算出当前要切换到第几张图片
            var curIndex = index % 3 + 1;  //0,1,2
            img.src = "../img/" + curIndex + ".jpg";  //1,2,3
            //每切换完,索引加1
            index = index + 1;
        }

        function init() {

            setInterval("changeImg()", 1000);
        }

        // window.onload = function() {
        //     init();
        // }

    </script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>

2、定时弹出广告

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <script>

        function init() {
            setTimeout("showAD()", 3000);
        }

        function showAD() {
            //首先要获取要操作的img
            var img = document.getElementById("img1");
            //显示广告
            img.style.display = "block";

            //再开启定时器,关闭广告
            setTimeout("hideAD()", 3000);
        }

        function hideAD() {
            //首先要获取要操作的img
            var img = document.getElementById("img1");
            //隐藏广告
            img.style.display = "none";
        }
    </script>
</head>
<body onload="init()">
<img id="img1" src="../img/tp.jpg" width="100%" style="display: none;"/>
</body>
</html>

3、显示和隐藏图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        //文档加载顺序
        //			var img = document.getElementById("img1");

        function hideImg() {
            var img = document.getElementById("img1");
            img.style.display = "none";
        }

        function showImg() {
            var img = document.getElementById("img1");
            img.style.display = "block";
        }
    </script>
</head>
<body>
<input type="button" value="显示" onclick="showImg()"/>
<input type="button" value="隐藏" onclick="hideImg()"/><br/>

<img src="../img/1-161104143944.gif" id="img1"/>
</body>
</html>

4、JS 表单校验

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        /*
            1. 确定事件 : onfocus
            2. 事件要驱动函数
            3. 函数要干一些事情: 修改span的内容
        */
        function showTips(spanID, msg) {
            //首先要获得要操作元素 span
            var span = document.getElementById(spanID);
            span.innerHTML = msg;
        }

        /*
            校验用户名:
            1.事件: onblur  失去焦点
            2.函数: checkUsername()
            3.函数去显示校验结果
        */
        function checkUsername() {
            //获取用户输入的内容
            var uValue = document.getElementById("username").value;
            //对输入的内容进行校验
            //获得要显示结果的span
            var span = document.getElementById("span_username");
            var r = /^\w{6,}$/;

            if (!r.test(uValue)) {
                //显示校验结果
                span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                return false;
            } else {
                span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                return true;
            }
        }

        /*
         密码校验
         */
        function checkPassword() {
            //获取密码输入
            var uPass = document.getElementById("password").value;

            var span = document.getElementById("span_password");

            //对密码输入进行校验
            if (uPass.length < 6) {
                span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                return false;
            } else {
                span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
                return true;
            }
        }

        /*
         确认密码校验
         * */
        function checkRePassword() {
            //获取密码输入
            var uPass = document.getElementById("password").value;

            //获取确认密码输入
            var uRePass = document.getElementById("repassword").value;
            var span = document.getElementById("span_repassword");

            //对密码输入进行校验
            if (uPass != uRePass) {
                span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
                return false;
            } else {
                span.innerHTML = "";
                return true;
            }
        }

        /*
         校验邮箱
         * */
        function checkMail() {
            var umail = document.getElementById("email").value;
            var flag = checkEmail(umail);
            var span = document.getElementById("span_email");
            //对邮箱输入进行校验
            if (flag) {
                span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                return true;
            } else {
                span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
                return false;
            }
        }

        function checkForm() {
            var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
            return flag;
        }
    </script>
</head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()">
    用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')"
               onblur="checkUsername()"/><span id="span_username"></span><br/>
    密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()"
              onkeyup="checkPassword()"/><span id="span_password"></span><br/>
    确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')"
                onblur="checkRePassword()" onkeyup="checkRePassword()"/><span id="span_repassword"></span><br/>
    邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()"/><span
        id="span_email"></span><br/>
    手机号:<input type="text" id="text"/><br/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>