14-JavaScript 常用内置对象

1、document
document.getElementById() //通过id获取元素
document.getElementsByTagName //通过标签名获取元素。注意element多了个s
document.referrer //获取上一个跳转页面的地址(需要服务器环境)
这个的应用场景：未登录用户点击一个链接，需要跳转到登陆页面，登陆后需要再跳转回刚才那个链接，那么可以用referrer先存一下那个地址，登陆后返回referrer存的那个地址。

点击a标签可以跳转到一个地址，同样我们可以使用程序跳转到一个地址。就是下方的window.location.href。

2、location
window.location.href //获取或者重定URL地址:window.location.href = "http://www.sina.com"
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值

window.location.href演示document.referrer存储上一个地址，然后程序返回到那个地址，需要服务器环境：

    <script>
        window.onload = function(){
            //存储上一个页面的地址：
            var sUrl = document.referrer;

            var oBtn = document.getElementById("goto");

            oBtn.onclick = function(){
                // window.location.href = "http://www.baidu.com"
                window.location.href = sUrl;
            }
        }
    </script>

window.location.search 演示在网页地址后面加参数改变网页背景色：

在地址后面加：？xx=1,xx是参数名，可随便，后面是参数，通过split获得，例如：file:///.....html?aa=1,背景变gold，....html?aa=2,背景变green。

<script>
        window.onload = function(){
            var oBody = document.getElementById('body01');
            var sDate = window.location.search;
            
            if(sDate!="")
            {
                var aRr = sDate.split("=")[1];
                alert(aRr)
                if(aRr==1)
                {
                    oBody.style.backgroundColor="gold";
                }
                else if(aRr==2)
                {
                    oBody.style.backgroundColor="green"
                }
            }
        }
    </script>

或者用标签选择元素：

<script>
        window.onload = function(){
            var oBody = document.getElementsByTagName('body')[0];
            var sDate = window.location.search;
            alert(oBody)
            
            if(sDate!="")
            {
                var aRr = sDate.split("=")[1];
                alert(aRr)
                if(aRr==1)
                {
                    oBody.style.backgroundColor="gold";
                }
                else if(aRr==2)
                {
                    oBody.style.backgroundColor="green"
                }
            }
        }
    </script>

一般用在这样的场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBody = document.getElementsByTagName('body')[0];
            var sDate = window.location.search;
            alert(oBody)
            
            if(sDate!="")
            {
                var aRr = sDate.split("=")[1];
                alert(aRr)
                if(aRr==1)
                {
                    oBody.style.backgroundColor="gold";
                }
                else if(aRr==2)
                {
                    oBody.style.backgroundColor="green"
                }
            }
        }
    </script>
</head>
<body id="body01">
    <a href="?a=1">goto>></a>
    <br>
    <a href="?a=2">goto>></a>
</body>
</html>

window.location.hash跟search一样可以传参数，不过search是？，hash是#：

<script>
        window.onload = function(){
            var oBody = document.getElementsByTagName('body')[0];
            var sDate = window.location.search;
            
            var sHash = window.location.hash;

            // 地址栏后：xxx.html?a=1#12：
            alert(sHash)//弹出：#12

            
            if(sDate!="")
            {
                var aRr = sDate.split("=")[1];
         
                if(aRr==1)
                {
                    oBody.style.backgroundColor="gold";
                }
                else if(aRr==2)
                {
                    oBody.style.backgroundColor="green"
                }
            }
        }
    </script>

Math对象
一个集成了许多数学方法的对象，可以在chrome右键-检查-console中输入：Math 查看它的属性

Math.random 获取0～1之间到随机数，不包括0和1

Math.floor 向下取整：Math.floor(5.6)--5,跟四舍五入没有关系，向下取整就是直接去掉小数部分
Math.ceil 向上取整: Math.ceil(5.2)--6，向上就是直接去掉小数部分，然后+1

 <script>
        
        //Math的PI属性
        var iPi = Math.PI;

        alert(iPi);//弹出圆周率

        //Math的random方法，只能返回从0到1之间到随机数，不包括1：
        var iNum = Math.random();
        alert(iNum)//返回一个随机数

        //随机生成20个随机数
        var arr = [];
        for(var i=0;i<20;i++)
        {
            var iN = Math.random();
            arr.push(iN);
        }
        //alert，调试信息直接在浏览器中弹出
        // alert(arr)
        //console.log，调试信息会在console中打印出
        console.log(arr)


        alert(Math.floor(5.6));//向下取整，弹出5
        alert(Math.ceil(5.2));//向上取整，弹出6


        //10～20之间到随机数
        var iN01 = 10;
        var iN02 = 20;
        var arr2 = []
        //得到一个0～10的数字
        // (iN02 - iN01)*Math.random()
        
        for(var i=0;i<30;i++)
        {
            var iN00 = Math.floor((iN02 - iN01 + 1)*Math.random()) + iN01;

            arr2.push(iN00)
        }

        alert(arr2)
       

    </script>

posted @ 2019-03-20 23:47 greenfan 阅读(103) 评论(0) 收藏举报

刷新页面返回顶部

greenfan

14-JavaScript 常用内置对象

公告