[php学习十]javaScript的基本练习-CSDN博客

本文链接：https://blog.csdn.net/liyanq528/article/details/52034910
<!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>