心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

java第二阶段之JavaScript

发布时间：2022-06-30 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了java第二阶段之JavaScript，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一、JS的组成之ECMAScript

（一）数据类型

        JS中也存在很多的数据类型，总体上可分为基本数据类型和引用数据类型。

        1、基本数据类型：

        （1）Undefined:Undefined类型只有一个值即undefined。当声明的变量未初始化时，该变量的默认值就是undefined。

        （2）Null:只有一个值即null表示空，一个占位符。值undefined实际是从值null派生来的，因此ECMAScript把他们列为等值。

        例如：alert(null == undefined); //true

        虽然两个值相等但是表示的意义不同，null为空值，

        undefined是未定义。

        （3）Boolean:表示真假，只有两个值true和false。

        （4）Number:表示任意数字，在JS中所有值类型统称为数字类型。

        （5）String:字符串类型用单引号或者双引号赋值。

        2、引用类型：

        引用类型通常叫做类（class），JavaScript将引用类型转化为对象进行处理。

        JavaScript是基于对象而非面向对象。对象的默认值是null。

        我们可以通过typeof(变量名)来查看一个变量所属的数据类型。

（二）变量

        命名语法：var 变量名 = 初始值; 或者 var 变量; var 变量1,变量2,变量3;

        代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的变量声明</title>
</head>
<body>
</body>
<script type="text/javascript">
var name = "小老弟";
var age = 18;
var height = 150.5;
var isBoy = false;
var boyFriend = {
"name": "杨宁",
"age": 38
};
var son = null;
var daughter;
var hobby = function() {
console.log("坚持不懈~");
}
console.log(name);
console.log(age);
console.log(height);
console.log(isBoy);
console.log(boyFriend);（六）运算符
console.log(son);
console.log(daughter);
console.log(hobby);
</script>
</html>

效果图：

java第二阶段之JavaScript

 

（三）运算符

        1、一元运算符：++ 、--：符号在前，先自增(自减)，再运算；符号在后，先运算，再自增(自减)

        2、算术运算符:+  -   *  /  %   ++   -- 等。

        3、赋值运算符:=   +=   -=   *=  /=   %= 等。

        4、比较运算符:> 、< 、>= 、<=、==、!=、===(全等)、!==：类型相同直接比较，类型不同先转换再比较。

        5、逻辑运算符:&&(短路与)、||(短路或)、!(非)

        6、条件（三元）运算符:表达式 ? 值1 : 值2 (表达式为true取值1，表达式为false取值2)

        以上所有运算符的使用与java类似。

（四）流程控制

        与java类似，不多叙述

（五）基本对象

        1、Function函数对象

                1、创建方法的语法格式：

                （1）var func = new Function(形式参数列表,方法体);

                （2）function 方法名(形式参数列表){方法体}(推荐使用);

                （3）var 方法名 = function(形式参数列表){方法体};

                2、方法调用的语法格式：

                方法名称(实际参数列表);

                3、js方法的特点：

                （1）方法定义时，形式参数类型不用写，返回值类型也不写

                （2）方法是一个对象，定义相同方法名会被覆盖

                （3）在JS中方法的调用只和方法名有关与方法的参数无关

                4、js方法的属性：length，用于获取实际参数的个数

        代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function demo(){
            console.log("函数声明。。。。");
        }
        function demo(a,b){
            console.log("函数声明"+a+b);
        }
        demo();
        //有参函数
        function demo01(a,b){
            console.log(a+b);
        }
        demo01(1,2);
        function demo02(a,b){
            return a+b;
        }
        console.log(demo02(10,20)); 
        //匿名函数
        var fn = function(){
            console.log("匿名函数");
        }
        fn();
    </script>
</head>
<body>
    
</body>
</html>

        2、Array数组对象

                1、创建数组：

                （1）var arr = new Array(); 空数组

                （2）var arr = new Array(默认长度) 默认长度的数组

                （3）var arr = [元素列表]; 具有初值的数组

                2、js数组的特点：

                （1）在JS中，数组元素的类型可变

                （2）在JS中数组的长度可变

                3、js数组的属性：length 获取数组长度、元素个数

                4、js数组中的常用方法：

                （1）join(字符); 将数组元素通过指定的字符拼接成字符串

                （2）push(); 向数组的末尾添加一个或更多元素，并返回新的长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr = new Array();
        console.log(arr);
        var arr1 = new Array(3);
        console.log(arr1);
        var arr2 = [12,"hello",true];
        console.log(arr2);
        //给数组赋值
        arr[0] = 120;
        console.log(arr); 
        //直接向末尾添加
        arr2.push("你好");
    </script>
</head>
<body>
    
</body>
</html>

        3、Boolean（了解）

                ①跟java一致，true/false

                ②定义boolean类型的变量

                var b = true/false;

        4、Date日期对象

                1、创建日期对象：var now = new Date() 获取当前时间。

                2、日期对象的常用方法：

                （1）toLocaleString()：根据本地时间格式，把 Date 对象转换为字符串。

                （2）getTime()：返回 1970 年 1 月 1 日至今的毫秒数

                （3）getHours()：返回小时数。

                （4）getMinutes()：返回分钟数。

                （5）getSeconds()：返回秒数。

        代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var d = new Date();
        console.log(d);
        //时间格式化
        console.log(d.toLocaleString());
        console.log(d.toLocaleDateString());
        console.log(d.toLocaleTimeString());
        console.log(d.getFullYear);
        console.log(d.getMonth()+1);
        console.log(d.getDate());
        console.log(d.getHours());
    </script>
</head>
<body>
    
</body>
</html>

        5、Math 数学对象

                1、创建：Math对象不用创建直接使用。使用时直接调用方法，

                如：Math.方法名();

                2、常用方法：

                （1）random()：返回 0 ~ 1 之间的随机数

                （2）max(x,y)：返回 x 和 y 中的最大值

                （3）min(x,y)：返回 x 和 y 中的最低值

                （4）ceil(x)：对数进行向上取整

                （5）floor(x)：对数进行向下取整

                （6）round(x)：把数四舍五入为最接近的整数

                （7）abs(x)：返回数的绝对值

                3、属性：PI，圆周率

<!DOCTYPE html>
<html>
 <head>
     <meta charset="UTF-8">
     <title>js中的数学对象Math</title>
 </head>
 <body>
 </body>
     <script type="text/javascript">
         console.log(Math.random());//随机数
         console.log(Math.max(10, 20));//最大值
         console.log(Math.min(10, 20));//最小值
         console.log(Math.ceil(5.5));//向上取整
         console.log(Math.floor(5.5));//向下取整
         console.log(Math.round(5.5));//四舍五入
         console.log(Math.abs(-10));//绝对值
         console.log(Math.PI);//圆周率
 </script>
</html>

        6、Number数字对象

                1、JavaScript只有一种数字类型。数字可以带小数点，也可以不带，表示整数和小数

                2、定义数字类型

                var n = 10;

                var n = 10.34;

        7、String字符串对象

                1、创建：

                （1）var str1 = "abc"; // string  

                （2）var str2 = new String("abc"); // object

                2、常用方法：

                （1）获取字符串的长度 str1.length

                （2）是否以某个字符开头 startsWith()

                （3）是否以某个字符结尾 endsWith()

                （4）截取字符串

                        a、substring(起始下标,结束角标)

                        b、substr(起始下标,截取长度)

                （5）根据某个字符拆分字符串 返回数组 split()

        示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str="Hello World!";
        console.log(str.length);
        console.log(str[2]);
        //常用方法
        console.log(str.startsWith("He"));
        console.log(str.endsWith("!"));
        console.log(str.indexOf("l"));
        console.log(str.lastIndexOf("W"));
        console.log(str.substring(0,6));
        console.log(str.substr(0,6));
        console.log(str.split(" "));
    </script>
</head>
<body>
    
</body>
</html>

        8、RegExp正则表达式对象

                1、单个字符：如 [a]、 [ab] 匹配a或者b 、[a-zA-Z0-9] 匹配字母或者数字[字符]

                2、元字符：d 表示数字

                3、量词符号：

                ?：表示出现0次或1次

                *：表示出现0次或多次

                +：表示出现1次或多次

                {m} 出现m次

                {m,}至少出现m次

                {m,n}：表示m=<数量<=n

                4、开始结束符号:

                ^ 开始

                $ 结束     扩展 [^abc]

                5、创建正则表达式对象：

                （1）var reg = new RegExp("正则表达式");

                （2）var reg = /正则表达式/;

                6、测试正则验证的方法：

                test(参数)：验证指定的字符串是否符合正则定义的规范

        代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var reg = new RegExp("[abc]");
        var reg1=/a/;
        console.log(reg.test("a"));
        var reg3 = /^1[3456789]d{9}$/
        if(reg3.test("12345678998")){
            console.log("手机号");
        }else{
            console.log("不是手机号");
        }
    </script>
</head>
<body>
    
</body>
</html>

        9、Global全局对象

                1、Global封装的方法不需要对象可以直接调用。方法名();

                2、常用方法：

                （1）encodeURI()：把字符串编码为 URI

                （2）decodeURI()：解码某个编码的 URI

                （3）encodeURIComponent()：把字符串编码为 URI 组件

                （4）decodeURIComponent()：解码一个编码的 URI 组件

                （5）parseInt()：解析一个字符串并返回一个整数。逐一判断每一个字符是否是数字，直到不是数字为止。将前面的数字转为number

                （6）isNaN()：检查某个值是否是数字,返回false是数字，true不是数字

                （7）eval()：计算 JavaScript 字符串，并把它作为脚本代码来执行

        代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Global全局对象</title>
</head>
<body>
</body>
</html>
<script>
    var uri ="http://xue.ujiuye.com/foreuser/login/login_url/http%3A%2F%2Fxue.ujiuye.com%2F/";
    //把字符串编码为 URI
    var encodeUri = encodeURI(uri);
    console.log(encodeUri);
    //解码某个编码的 URI
    var decodeUri = decodeURI(encodeUri);
    console.log(decodeUri);
    //把字符串编码为 URI 组件
    var enUriCom = encodeURIComponent(uri);
    console.log(enUriCom);
    //解码一个编码的 URI 组件
    var deUriCom = decodeURIComponent(enUriCom);
    console.log(deUriCom);
    var str = "10";
    //将str转成int
    var i = parseInt(str);
    console.log(i);//10
    //检测i是否是非数字类型
    console.log(isNaN(i));//false
    //求i的平方
    console.log(eval(i * i));//100
</script>

二、DOM对象

（一）DOM简介

        1、文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。通过 HTMLDOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

        2、当网页被加载时，浏览器会创建页面的文档对象模型

        （Document Object Model）。

           dom原理：将文档及其文档中所有的标签都看作为对象，那么标签中的属性就是对象的属性属性,因此我们在获取或者设置标签属性的时候可以这么用  

            对象.属性名 （获取某个标签的对应属性值） 或者对象.属性名=xxx(给标签的属性设置值或者修改值)，如果修改或者获取标签的内容可以通过innerHTML，innerText,value等属性实现对象.innerHTML (获取标签内容,包含标签内部的标签及样式)对象.innerText (获取标签内的纯文本,不包含标签内部的标签及样式)

        当获取封闭标签内容的时候，使用以上两个属性

        ---------------------------

        对象.value (获取标签的值,表单标签)

        当获取单标签内容或者值的时候来使用

（二）获取页面元素对象

        1、查找页面元素的方法：

        （1）document.getElementById(id)：通过id号来查找元素。返回单个对象

        （2）document.getElementsByTagName(name)：通过标签名来查找元素。返回数组对象

        （3）document.getElementsByClassName(name)：通过类名来查找元素。返回数组对象

        （4）document.getElementsByName(name)：通过name属性名来查找元素。返回数组对象

        2、以上四种方法中，由于页面中元素的id号是唯一的，所以通过id获取的元素个数也是唯一的；而其他三种方式获取的元素个数不唯一，所以使用时需要像数组一样去获取指定的元素。

        代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        #d{

        }
    </style>
</head>
<body>
    <div id="d" class="c">抓鸭子，抓几只
        <a href="">开始抓</a>
    </div>
    <p class="c">嘎嘎嘎嘎嘎嘎嘎嘎</p>
</body>
<script>
    //获取id属性为d的标签对象
    var obj = document.getElementById("d");
    console.log(obj);
    //获取标签内容
    console.log(obj.innerHTML);
    console.log(obj.innerText);
    console.log("=============================");
    var objArray = document.getElementsByClassName("c");
    //遍历数组
    for(var i = 0;i<objArray.length;i++){
        console.log(objArray[i].innerHTML);
    }
</script>
</html>

（三）操作页面元素对象

        1、创建dom对象

        document.createElement("标签名");

        2、添加dom对象

        （1）A.appendChild(B) 将B添加到A内部的最后面

        （2）A.insertBefore(B, C) 将B添加到A内部C的前面

        3、删除dom对象

        （1）A.remove() 将A删除

        （2）A.remove(B) 将A内部的B删除

        4、替换dom对象

        A.replaceChild(B, C) 用B替换A内部的C

        代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function demo(){
            var aObj = document.createElement("a");
            //添加a标签器对象herf属性
            aObj.href = "";
            //添加内容
            aObj.innerHTML="百度一下";
            //获取ul对象
            var ulObj = document.getElementsByTagName("ul")[0];
            ulObj.appendChild(aObj);

        }
        function demo1(){
            var iObj = document.createElement("img");
            iObj.src="1.jpg";
            iObj.width="500";
            var ulObj = document.getElementsByTagName("ul")[0];
            var liObj = document.getElementsByTagName("li")[1];
            ulObj.insertBefore(iObj,liObj);
        }
        //将第一个li标签删除
        function demo2(){
            var liObj = document.getElementsByTagName("li")[0];
            liObj.remove();
        }
        function demo3(){
            var liObj = document.getElementsByTagName("li")[0];
            var ulObj = document.getElementsByTagName("ul")[0];
            ulObj.removeChild(liObj);
        }
        function demo4(){
            var aObj = document.createElement("a");
            //添加a标签器对象herf属性
            aObj.href = "";
            //添加内容
            aObj.innerHTML="百度一下";
            var liObj = document.getElementsByTagName("li")[1];
            var ulObj = document.getElementsByTagName("ul")[0];
            ulObj.replaceChild(aObj,liObj);
        }
    </script>
</head>
<body>
    <ul>
        <li>第一个列表项</li>
        <li>第二个列表项</li>
        <li>第三个列表项</li>
    </ul>
    <input type="button" value="添加" onclick="demo()">
    <input type="button" value="外部添加" onclick="demo1()">
    <input type="button" value="自删" onclick="demo2()">
    <input type="button" value="他删" onclick="demo3()">
    <input type="button" value="替换" onclick="demo4()">
</body>
</html>

（四）操作元素属性

        1、页面元素.属性名 = “值” 2、设置：标签对象.setAttribute("属性名","属性值");

        3、获取：标签对象.getAttribute("属性名");

        4、删除：标签对象.removeAttribute("属性名");

        代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .c{
        border: 1px solid red;
        height: 200px;
        width: 200px;
        border-radius: 50%;
        background-color: blue;
    }
</style>
<script>
    function demo(){
        var divObj = document.getElementsByTagName("div")[0];
        divObj.setAttribute("class","c");
        divObj.setAttribute("style","background-image:url(1.jpg)");
        var imgObj = document.getElementsByTagName("img")[0];
        imgObj.setAttribute("title","蜘蛛侠");
    }
    //获取img标签对象src属性
    function demo1(){
        var imgObj = document.getElementsByTagName("img")[0];
        console.log(imgObj.getAttribute("src"));
    }
    //给div删除背景图片
    function demo2(){
        var divObj = document.getElementsByTagName("div")[0];
        divObj.removeAttribute("style");
    }
</script>
</head>
<body>
    <div></div>
    <img src="1.jpg" width="300px" alt="">
    <input type="button" value="按钮" onclick="demo()">
    <input type="button" value="get属性" onclick="demo1()">
    <input type="button" value="删除" onclick="demo2()">
</body>
</html>

（五）操作元素样式

        1、直接操作

        页面元素.style.css样式名称 = “值”

        2、间接操作:通过类名进行操作

        页面元素.setAttribute(“class”, “类名1 类名2”)

        先将css样式定义在类中，通过行间属性class，为其设置类

        代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
    </style>
    <script>
        function demo(){
            var divObj = document.getElementsByTagName("div")[0];
            divObj.style.backgroundColor="red";
            divObj.style.color="green";
        }
    </script>
</head>
<body>
    <div>
        这是一个盒子
    </div>
    <input type="button" value="添加样式" onclick="demo()">
</body>
</html>

（六）操作元素的内容

        1、标签对象.innerHTML 获取或者设置内容 可以包含标签

        2、标签对象.innerText 获取或者设置内容 只包含文本

        3、input标签对象.value 获取或者设置input框中的内容

        4、innerText和innerHTML语法:

        获取:标签对象.innerHTML

        修改:标签对象.innerHTML=要修改的值

        代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function demo(){
            var inObj = document.getElementsByName("username")[0];
            var t = inObj.value;
            var reg = /^[a-zA-z0-9_$]{5,10}$/
            var spanObj = document.getElementById("nameMsg");
            if(reg.test(t)){
                spanObj.innerHTML="<font color='green'>用户名正确</font>";
            }else{
                spanObj.innerHTML="<font color='red'>用户名不正确</font>";
            }
        }
    </script>
</head>
<body>
    用户名：
    <input type="text" name="username" id="">
    
    <span id="nameMsg"></span><br><br>    
    <input type="button" value="点击" onclick="demo()">
</body>
</html>

（七）事件

        1、元素被执行某种操作，触发某些代码

        2、如何为页面元素对象绑定事件

        （1）在标签中指定事件的属性：<button id="btn"οnclick="func01()">点我啊</button>

需要在脚本中，先行定义好func01这个方法~

        （2）获取标签元素绑定事件：

        document.getElementById("btn").onclick =function(){}

        第二种绑定事件用到的是匿名函数，直接书写方法体代码即可

        3、常见事件

java第二阶段之JavaScript

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function demo(){
            console.log("获取焦点");
        }
        function demo1(){
            console.log("失去焦点");
        }
        function demo2(){
            console.log("鼠标移入");
        }
        function demo3(){
            console.log("鼠标移出");
        }
        function demo4(){
            console.log("键盘按下");
        }
        function demo5(){
            console.log("键盘松开");
        }
        function demo6(){
            console.log("双击事件");
        }
    </script>
</head>
<body>
    <div>div区域</div>
    <select name="" id="d1"></select>
    <input type="text" name="" onfocus="demo()" onblur="demo1()" onkeydown="demo4()" onkeyup="demo5()" id="">
    <div style="border: 1px solid red;height: 300px;width: 300px;" onmouseover="demo2()" onmouseout="demo3()"></div>
    <input type="button" value="双击事件" ondblclick="demo6()">
</body>
</html>

 

三、BOM对象

（一）BOM简介

        1、Bom(browser object model)：浏览器对象模型。在浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。

        2、Bom有一个核心的对象window，window对象包含了6个核心模块

                1、document对象:文档对象

                2、Frames对象:html的自框架

                3、History对象:页面的浏览记录

                4、Location对象:当前页面的地址

                5、Navigator对象:包含了浏览器相关信息

                6、Screen对象:显示屏幕相关信息

（二）Window

        ① 介绍

        1、所有的浏览器都支持window对象。它表示浏览器窗口，调用函数时window可以省略。所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。

        2、全局变量是window对象的属性。

        3、全局函数时window对象的方法。

        4、比如说html dom的document也是window对象的属性之一。

        Window.document.getElementById(),window可以省略

        ② 创建

        直接使用window对象

        ③ 方法

        1. 弹窗方法

                1. alert(); 显示带有一段消息和一个确认按钮的警告框  演示

                2. confirm(); 显示带有一段消息以及确认按钮和取消按钮的对话框  演示

                3. prompt(); 显示可提示用户输入的对话框 演示

        2 打开关闭方法

                (1) open(”打开窗口的路径“); 打开一个新的浏览器窗口或查找一个已命名的窗口

                (2) close(); 关闭浏览器窗口

        3、定时器方法

        JS中的定时器函数有两种：

                1、周期定时器：按照指定的周期来调用函数或代码串，执行多次。

                var timeid=Window.setInterval(code,millisec);

                window.clearInterval(timeid);清除定时器，使定时器停止执行函数或代码串。

                参数说明：

                code:要调用的函数或要执行的代码串。

                millisec:周期性执行或调用 code 之间的时间

                间隔，以毫秒为单位。

                2、超时定时器：在指定的毫秒数后调用函数或代码串，只执行一次。

                var timeid=Window.setTimeout(code,millisec);

                window.clearTimeout(timeid);清除定时器,

                可以阻止定时器的执行。

                参数说明：

                code:要调用的函数或要执行的代码串。

（六）Location

        1、window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面

        2、window.location 对象在编写时可不使用 window 这个前缀。

        3、创建:window.location/location

        4、方法:reload():刷新当前页面

        5、属性href:获取请求的URL/跳转指定的URL地址中

        6、案例：3秒跳转页面

        代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3秒跳转页面</title>
</head>
<body>
    <span id="s1" style="font-size:40px;">3</span>
</body>
</html>
    <script>
        var c;
        //页面加载完成事件
        window.onload = function() {
        //周期定时器
            c = window.setInterval(forward,1000);
        }
        var i = 3;
        function forward() {
            i--;
            document.getElementById("s1").innerText =
            i;
            if(i == 0) {
            //跳转到百度
            window.location.href="http://www.baidu.com";
            //清除定时器
            window.clearInterval(c);
            }
        }
</script>

脚本宝典总结

以上是脚本宝典为你收集整理的java第二阶段之JavaScript全部内容，希望文章能够帮你解决java第二阶段之JavaScript所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程