day 33js 后续 函数.对象

前情提要:

　　今天学习的是js的函数以及简单的类的使用

　　　一:函数的初识别

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // <!--函数声明不需要加上关键字var-->
        function sayhello (name) {
            document.write("<h1>"+"hello"+name+"</h1>")
        }
        function getname() {
            return "小宝"
        }
        get1name =function (name) {
            return "大宝"
        }
        // 如果函数有参数,调用时需要传入参数
        sayhello("咱三")

        var username =getname()
        document.write(username)
        var username1 =get1name()
        document.write(username1)
    </script>
</head>
<body>

</body>
</html>
View Code

　　　二:全局变量以及局部变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // <!--全局变量,可以被该页面中的所有函数引用-->
        var num =10;
        function test1() {
                        //加上var 浏览器就会在去全局中定义该函数


            num1 =12;
            var num3 =21;
                       // 局部变量只有当前函数中有效
            document.write(num+"<br>");
            document.write(num1+"<br>");
            document.write(num3+"<br>")
        }
        function test2(){
            document.write(num+"<br>");
            document.write(num1+"<br>");
            document.write(num3+"<br>");
        }
        test1();
        test2()
    </script>
</head>
<body>

</body>
</html>
View Code

　　　三:自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // <!--自定义对象-->
        function Person() {

        }
        //使用new 关键字创建对象
        var person =new Person();
        //给person 对象增加name属性
        person.name ="张三";
        //       给person 对象增加age属性

        person.age =18;
        // 给person 对象增加eat 方法
        person.eat  =function () {
            document.write(this.name +"正在吃饭")
        };

        // 调用属性
        document.write(person.name,person.age+"<br>");
        //调用方法
        person.eat()
    </script>

</head>
<body>

</body>
</html>
View Code

　　　四:创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function Person(name,age) {
            this.name =name;
            this.age =age;
            // this.sleep =function () {
            //     alert(this.name+'正在树胶')
            // }
            this.sleep =function () {
                alert(this.name +"正在睡觉")
            }

        }
        // var person =new Person("李四",20);
        // document.write(typeof person)
        document.write(person.name);
        document.write(person.age);

        person.sleep()
    </script>
</head>
<body>

</body>
</html>
View Code

　　　五:使用object 创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var person =new Object();
        person.name ="小钟";
        person.age =25;
        person.code =function (something) {
            document.write(this.name+"正在做"+something)
        };
        person.code("作业")
    </script>
</head>
<body>

</body>
</html>
View Code

　　　六:使用json 创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var person ={
            name :"太白金星",
            age :20,
            run :function () {
                alert(this.name+"正在跑步");
            }
        };
        person.run()

    </script>
</head>
<body>

</body>
</html>
View Code

　　　七:string 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let s1 ="10";
        let s2 =new String("10");
        alert("s1==s2"+(s1==s2))
    </script>
</head>
<body>

</body>
</html>
View Code

　　　八:string的常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var counter ="中国".fontcolor("red");
        document.write(counter.concat("<br>"));
        var str ="Hello World Hello World";
        document.write(str.charAt(6) + "<br/>"); //根据索引查找字符
        document.write(str.charCodeAt(6)+"<br>"); //根据字符查找unideo的编码
        document.write(str.indexOf("World")+"<br>"); //查询字符串中指定字符串的第一次出现的索引值
        document.write(str.substring(12,17)+"<br>"); //提取12到17索引出现的内容
        document.write(str.valueOf())  //返回本身内容

    </script>
</head>
<body>

</body>
</html>
View Code

　　　九:实现字符串的翻转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义一个函数实现字符串的翻转功能
        function reverse(srcStr) {
            var temstr =''
            for (i=srcStr.length -1;i>=0;i--){
                var c =srcStr.charAt(i)
                temstr+=c
            }
            return temstr
        }
        var s =reverse("abcd")
        alert(s)
    </script>
</head>
<body>

</body>
</html>
View Code

　　　十:number 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var s =10;
        var s1 =new Number(10)
        var s2 ="11"
        var s3 =new Number("a11")
        /*
            执行parseInt函数的时候，默认它只会把字符串第一个非数字（包含空格）前面字符进行转换。
            如果第一个字符是非数字（不包含空格），那么转换结果为NaN。
        */
        var num =parseInt(s3)
        document.write(typeof s)
        document.write(typeof s1)
        document.write(typeof s2)
        document.write(typeof s3)
        document.write(s3)
        document.write(num)

    </script>
</head>
<body>

</body>
</html>
View Code

    　　十一:math 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        document.write("绝对值"+Math.abs(-10)+"<br>")
        document.write("向上取整"+Math.ceil(3.14)+"<br>")
        document.write("向下取整"+Math.floor(3.14)+"<br>")
        document.write("四舍五入"+Math.round(3.6)+"<br>")
        document.write("求最大值"+Math.max(3,5)+"<br>")
        document.write("求最小值"+Math.min(3,5)+"<br>")
        document.write("生成随机数"+Math.random(1,5)+"<br>")


    </script>
</head>
<body>

</body>
</html>
View Code

　　　十二:生成4位数验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var num ='';
        for (i=1 ;i<5;i++){
           var s1 =Math.floor(Math.random()*10)
            num =s1+num
        }
        document.write(num)

    </script>
</head>
<body>

</body>
</html>
View Code

　　　十三:date 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getdate(d) {
            var dd = d.getDate() //获取日
            var mm =d.getMonth()+1  //获取月
            var yy =d.getFullYear() //获取年
            var hh =d.getHours() //获取小时
            var min =d.getMinutes()  //获取分
            var sec =d.getSeconds() //获取秒
            return yy +"年" +mm +"月"+dd+"日"+hh+"时"+min+"分"+sec+"秒"
        }
        var dd =new Date()
        document.write(dd+"<br>")
        var time1 =dd.getDate()
        document.write(time1+"<br>")
        var times1 =getdate(dd);
        document.write(times1)

    </script>
</head>
<body>

</body>
</html>
View Code

　　　十四:array 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr4 =[10,20,30]
        var arr5 =[11,22,33]
        arr4 =arr4.concat(arr5,99,100)
        document.write(arr4+"<br>")
        document.write(arr4[0]+"<br>")
        document.write(arr4[1]+"<br>")
        for (i=1;i<arr4.length;i++){
            document.write(arr4[i]+"<br>")
        }
    </script>
</head>
<body>

</body>
</html>
View Code

　　　十五:对象的常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function join(arr,sep) {
            var arrstr=''
            for (var i=0;i<arr.length;i++){
                arrstr =arrstr+arr[i] +sep

            }
            return arrstr.substring(0,arrstr.length-1)
            
        }
        var arr =["java","python","go"]
        var str =arr.join('-')
        document.write(str)
    </script>
</head>
<body>

</body>
</html>
View Code

　　　十六:扩展对象功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // function search(arr,key) {
        //     for(i =0;i<arr.length;i++){
        //         if (arr[i]==key){
        //             return i
        //         }
        //         else {
        //             return -1
        //         }
        //
        //     }
        //
        // }
        // var arr =[1,2,3,4,5]
        // var i =search(arr,1)
        // alert(i)
        // seach1 =function (arr,key) {
        //      for(i =0;i<arr.length;i++){
        //         if (arr[i]==key){
        //             return i
        //         }
        //         else {
        //             return -1
        //         }
        //
        //     }
        // }
        // var arr =[6,7,8,9,10]
        // var i =seach1(arr,6)
        // alert(i)
        //
        Array.prototype.search =function (key) {
            for (i =0;i<this.length;i++){
                if (this[i]==key){
                    return i
                }
            }
            return -1;
        }
          var arr =[6,7,8,9,10]
        var ss=    arr.search(6)
            document.write(ss)
    </script>
</head>
<body>

</body>
</html>
View Code

　　　十七:push 和pop 方法

　　　十八:resreve 

　　　十九:slice

　　　二十:splice

　　　二十一:sort

　　　二十二:tofixed

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/baili-luoyun/p/10434449.html