[php学习十]javaScript的基本练习

冷不防 2022-09-24 05:20 152阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
        <script></script>
        <style>
            .Mydiv:hover p{background-color: #FFA500}
            .Mydiv p{background-color: cadetblue}
            body p{background-color: beige; height: 30px; align-content: center;
                text-align: center; padding-top: 5px}
        </style>
    </head>
    <body>
    <div class="Mydiv">
        <p><small>利用了CSS的Hover实现了颜色切换</small></p>
    </div>
    <p>各个类型的构造方法函数:只火狐支持constructor.toString()写法</p>
    <div id="AllTypeConstructor"></div>
    <p>检查数组和函数类型的结果:</p>
    <div id="TypeResult"></div>
    <p>显示星期</p>
    <div id="Today"></div>
    <p>对象Person的信息</p>
    <div id="PersonInfo"></div>
    <p>变量作用域</p>
    <div id="VarArea"></div>
    <script>
        /*注意点1:只有火狐能显示constructor.toString(),其他都不能;但constructor都能直接显示.~*/
        document.getElementById("AllTypeConstructor").innerHTML =
                "bool类型构造方法:" + false.constructor + "<br>"+
                "字符串类型构造方法:" + "Hello".constructor + "<br>" +
                "对象类型构造方法:" + {name:"Hello",age:28}.constructor + "<br>" +
                "日期类型构造方法:" + new Date().constructor+"<br>" +
                "数字类型构造方法:" + 3.0.constructor + "<br>"+
                "函数类型构造方法:" + function(){}.constructor+ "<br>" +
                "数组类型构造方法:" + [1,2,3,4,5].constructor;
        /*注意点2:JS的函数都应该以小写字母开始,否则有警告,但不知道和IDE有关系么~~!*/
        function isArray(paramArray){
            return  paramArray.constructor.toString().indexOf("function Array()") > -1;
        }
        /*注意点3:判断类型的时候,注意大小写,如Array不能写成array~*/
        function isFun(paramFun){
            return  paramFun.constructor.toString().indexOf("function Function()") > -1;
        }
        /*注意点4:"[1,2,3,4,5]" + isArray([1,2,3,4,5])?"是":"不是" +  "数组类型" 这样写居然不行?还挺矫情~~!*/
        var isArrType = isArray([1,2,3,4,5])?"是":"不是";
        var isFunType = isFun(function(){return false;})?"是":"不是";
        document.getElementById("TypeResult").innerHTML = "[1,2,3,4,5]" + isArrType +  "数组类型" + "<br>" +
                "function(){return false;}" + isFunType + "函数类型";
    
            function showWeek() {
                var today = new Date().getDay();
                switch (today) {
                    case 0:
                        return "星期日";
                    case 1:
                        return "星期一";
                    case 2:
                        return "星期二";
                    default:
                        return "默认" + today;
                }
            }
            document.getElementById("Today").innerHTML = "今天是:" + showWeek();
    
        var person = {
            firstName: "John",
            lastName : "Doe",
            fullName : function()
            {
                return this.firstName + " " + this.lastName;
            }
        };
        document.getElementById("PersonInfo").innerHTML = "person.firstName:" + person.firstName +"<br>" +
                        "person.lastName:" + person.lastName + "<br>" +
                        "person.fullname:" + person.fullName + "<br>" +
                        "person.fullname():" + person.fullName() + "<br>" +
                        "person.constructor:" + person.constructor;
        showPublicVar();
        document.getElementById("VarArea").innerHTML = "不带Var修饰:" + window.VarPublic1 + ";带Var修饰:" + window.VarPublic2;
        function showPublicVar(){
            /*不带的话,即使在函数里面声明,也是全局变量,能用WINDOW来获取.~*/
            VarPublic1 = "hello";
            var VarPublic2 = "world";
        }
    </script>
    <div id="ConstructorArr"></div>
    
    
    </body>
    </html>