java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgen ...

原作者: [db:作者] 来自: [db:来源] 收藏邀请

1.open，setTimeout，setInterval，clearInterval，clearTimeout

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
        
            // BOM：浏览器对象，broswer object model
            // window对象:窗口默认自带的对象，也就是js默认的对象
            function test() {
                // 最常用的
                window.open("http://www.baidu.com","百度","500px");// 打开一个页面
                //window.close();// 关闭一个页面
            }
            
            function test2() {
            // 在setTimeout中默认有一个参数，如果有两个参数的话，第一个test参数就代表test()函数，一定不能带括号(test())
            // 第二个参数就是延迟的时间，以毫秒为单位
                timeout = window.setTimeout(test, 3000);// 延迟加载，定时器
            }
            
            function test3() {
                interval = setInterval(function(){// 周期函数：实现周期性的执行
                    alert("我是恶意弹窗");
                }, 5000);// 每次执行间隔的时间，单位是毫秒数
            }
            
            function test4() {
                clearInterval(interval);// 清除周期函数
            }
            
            function test5() {
                clearTimeout(timeout);
            }
            function go1() {
                window.history.go(1);
            }    
            
        
        </script>
    </head>
    
    <body>

        <input type="button" value="测试" onclick="test2();" />
        <input type="button" value="测试Interval" onclick="test3();" />
        <input type="button" value="测试Interval" onclick="test4();" />
        <input type="button" value="测试timeout" onclick="test5();" />
        <input type="button" value="前进" onclick="go1();" />
        <a href="20170711_js_2.html">跳转</a>
    </body>

</html>

2.前进后退：

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            // history
            function go1() {
                window.history.go(1);
            }    
            function go2() {
                window.history.go(-1);
            }                
        
        </script>
    </head>
    
    <body>
        <input type="button" value="前进" onclick="go1();" />
        <input type="button" value="后退" onclick="go2();" />
    </body>

</html>

3.navigator.userAgent：

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            function test() {
                // navigator
                // userAgent是在http中存放，存放的是用户(操作系统登录的用户)信息
                var broswer = window.navigator.userAgent.toLowerCase();
                if(broswer.indexOf("msie") > 0) {// IE浏览器
                    alert("IE");
                } else if(broswer.indexOf("firefox") > 0) {
                    alert("火狐");
                } else if(broswer.indexOf("google") > 0) {
                    alert("谷歌");
                } else {
                    alert("没有浏览器");
                }
            }
        
        </script>
    </head>
    
    <body>
        <input type="button" value="测试" onclick="test();" />
    </body>

</html>

4.location.href，top.location.href:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            function test() {
                // location
                //window.open();// 重新打开一个页面
                //****************
                //window.location.href = "http://www.baidu.com";// 在本页面上实现了一个页面跳转
                window.top.location.href = "http://www.baidu.com";// 必须输全url，重新加载页面
            }
        </script>
    </head>
    
    <body>
        
        <input type="button" value="测试" onclick="test();" />
    
    </body>

</html>

5.五种方法获取标签的属性：

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script>
            // 需求：需要在div中写上一个字:我是div
            // 第一步：选中这个div标签
            // 第一种：通过form来选中，document.forms<----是一个form的数组，不属于form表单的标签无法被选中
            
            function test() {
                var div1 = document.forms[0].ins;
                alert(div1);
            }
            
            // ****第二种：通过document对象:通过id选中document.getElementById("");
            function test2() {
                var div1 = document.getElementById("span1");//JS中前面没有#
                alert(div1);
            }
            
            // ****第三种：通过document对象：通过class样式选中document.getElementsByClassName("");---如果有多个，返回的是一个集合
            function test3() {
                var classes = document.getElementsByClassName("div2"); //此处获得一个数组
                alert(classes);
            }
            
            // ****第四种：通过document对象:通过标签选中document.getElementsByTagName("");---如果有多个，返回的是一个集合
            function test4() {
                var div2 = document.getElementsByTagName("div"); //此处获得一个数组
                alert(div2);
            }
            
            // 第五种：通过document对象:通过name属性来选中
            function test5() {
                var span1 = document.getElementsByName("span1");//此处获得一个数组
                alert(span1[0].innerHTML);
            }
            
        </script>
        
    </head>
    
        
        <body>
            <form class="div2" action="">
                <!-- 因为div并不属于form -->
                <div class="div2" id="div1" name="div1" style="width:200px; height:200px; background:red;" onclick="test5();"></div>
                <!-- 因为span标签并不属于form表单 -->
                <span class="div2" id="span1" name="span1">我是span</span>
                <input class="div2" name="ins" type="text" />
　　　　　　　　　　<input type="button" value="测试" onclick="test5();"/>

                <div></div>
            </form>
            
            <form action="">
                <div style="width:200px; height:200px; background:red;"></div>
            </form>
        
        </body>
    

</html>

6.setAttribute:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        
        <script>
            function test1() {
            // 1.0
                // 选中span标签
                var span1 = document.getElementById("span1");
                // 需求：需要给文字换一个颜色
                // 使用setAttribute设置一个属性：有两个参数：第一个参数：需要设置的属性名；第二个参数：设置的值
                // 设置的属性，该标签必须支持
                var a1 = document.getElementsByTagName("a")[0];// 通过下标获取选中的集合元素
                a1.setAttribute("href","http://www.baidu.com");
                //span1.setAttribute("style", "color:red");
                // 使用getAttribute获得某个标签的属性值
                // alert(span1.getAttribute("style"));
            }
            function test2() {
                // 2.0
                // 需求：需要span标签更换字体颜色
                var span1Style = document.getElementById("span1").style;
                span1Style.color = "red";
                
            }
            
            function test3() {
                // 终极版
                var span1 = document.getElementById("span1");
                span1.style.color = "red";
            }
            
            function test4() {
                // jiuji版
                document.getElementById("span1").style.color = "red";
            }
            
        </script>
        
    </head>
    
        
        <body>
            <a>我是a标签</a>
            <span id="span1">我是span标签</span><br />
            <input id="ins1" type="text" />
            <input type="button" value="测试" onclick="test1();" />
            <input type="button" value="测试2" onclick="test2();" />
            <input type="button" value="测试3" onclick="test3();" />
            <input type="button" value="测试4" onclick="test4();" />
        </body>
    

</html>

7.innerHTML:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script>
            <!-- document对象操作文字/html页面 -->
            function test1() {
                // 获取到了span标签
                var span1 = document.getElementsByClassName("span1")[0];
                // span1.innerHTML = "我是span标签";
                // 如果innerHTML传入的是一个文本，就会把文本显示到选中的标签中
                // 如果传入的html标签，首先把html标签转化，只是把文本显示出来
                span1.innerHTML = "<a href='http://www.baidu.com'><i>我是span标签</i></a>";
            }
        </script>
        
    </head>
    
        
        <body onclick="test1();">