Zephon Blog
0%

第八天

发表于 更新于 分类于
本文字数： 9.7k 阅读时长 ≈ 9 分钟

第八天

面向对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象</title>
</head>
<body>
    
    <script>
        // javascript没有类，es6中的class只是一种语法糖(同一种东西的简单写法)
        // 使用function来实现面向对象
        // 对象 实例
        function rect(w,h){
            //该函数相当于构造函数constructor
            // this是指该对象的实例，定义对象的属性一定要使用this
            this.width = w;
            this.height = h;
            // 在方法中使用属性，一定要使用this
            this.c=function(){
                return 2*(this.width+this.height);
            }
            this.s=function(){
                return this.width*this.height;
            }
        }
        var r1 = new rect(100,200);
        console.log(r1.width);
        console.log(r1.c());
        console.log(r1.s());
        console.log(r1 instanceof rect);

        console.log(r1,rect);
        // 不建议在正式代码中使用__proto__
        // prototype 原型
        // 原型链
        // 一个实例的__proto__指向其对象的prototype
        console.log(r1.__proto__==rect.prototype);
        console.log(rect.prototype.constructor==rect);
        console.log(rect.prototype.__proto__== r1.__proto__.__proto__);
        console.log(rect.prototype.__proto__==Object.prototype)
        console.log(Object.prototype);
        // 总结：子类的prototype中的__proto__指向父类的prototype

        Object.prototype.king = "monkey";
        console.log(r1.king);
        rect.prototype.sayname = function(){
            console.log("hello "+this.king);
        }
        r1.sayname();
        console.log(rect.prototype);
    </script>
</body>
</html>

原型链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原型链继承</title>
</head>
<body>
    <script>
        function rect(w,h){
            this.width=w;
            this.height=h;
            this.c = function(){
                return 2*(this.width+this.height);
            }
            this.s = function(){
                return this.width*this.height;
            }
        }
        function square(w){
            this.width = w;
            this.height = w;
        }
        //使square的prototype为rect
        square.prototype = new rect();
        var s1 = new square(5);
        console.log(s1.c(),s1.s());
        //实例的__proto__指向对象的prototype
        //对象的prototype中的__proto__指向其父对象的prototype
        console.log(s1.__proto__==square.prototype);
        console.log(s1.__proto__.__proto__==rect.prototype);
        console.log(s1.__proto__.__proto__.__proto__==Object.prototype);

        rect.prototype.sayHello = function(){
            console.log("hello");
        }

        //判断一个变量是否为square
        console.log(s1 instanceof square);
        // console.log(s1.constructor == rect);//不可以通过构造方法判断
        //第二种继承方法，call或apply继承
        function Square(w){
            this.width = w;
            this.height = w;
            //apply：调用rect函数，rect函数，rect函数内的this为其第一个参数，调用rect函数时rect的参数为其第二个参数
            //call：功能和applay相同，参数形式不同
            //call继承不能继承通过prototype扩展属性的方法
            rect.apply(this,[w,w]);
            // rect.call(this,w,w,);
        }
        // s2.sayHello();call继承不能继承通过prototype扩展属性的方法
        var s2 = new Square(78);
        console.log(s2.c(),s2.s());
    </script>
</body>
</html>

class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>class</title>
</head>
<body>
    <script>
        //es6 class，是一种语法糖，本质没变
        class rect{
            constructor(w,h){
                this.width = w;
                this.height = h;
            }
            c(){
                return 2*(this.width+this.height);
            }
            s(){
                return this.width*this.height;
            }
        }
        var r1 = new rect(10,20);
        console.log(r1.c(),r1.s());

        class square extends rect{//square 是rect的子类
            constructor(w){
                super(w,w);
                this.cname = "正方形" //其它一定要在super后执行
            }
        }
        var s1 = new square(10);
        console.log(s1.c(),s1.s());
        //s1是否有height属性
        console.log(s1.hasOwnProperty("height"));//true
        console.log(s1.__proto__==square.prototype);

        console.log(Object.getPrototypeOf("s1")==square.prototype);
        var s3 = {};
        Object.setPrototypeOf(s3,s1);//相当于s3.__proto__=s1

        console.log(s3.__proto__,s1);
    </script>
</body>
</html>

定时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>timer</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        #ad {
            height: 300px;
            background-color: #c00;
        }
    </style>
</head>

<body>
    <div id="ad">

    </div>
    <script>
        // 定时器
        // setTimeout()  -> 经过多久后执行
        // setInterval() -> 每过多久执行一次
        window.setTimeout(close, 3000); //close 函数的引用，而非函数的执行
        var ad = document.querySelector("#ad");
        var h = ad.offsetHeight;

        function close() {
            // ad.style.display = "none";
            var timer = setInterval(function () {
                ad.style.height = h-- + "px";
                console.log(h);
                if (h <= 0) {
                    clearInterval(timer); //关闭定时器
                }
            }, 1);
        }
    </script>
</body>

</html>

搜索框动态变长效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>search</title>
    <style>
        /* css 搜索框动态变长 */
        .search {
            margin-left: 300px;
            width: 100px;
            color: #000;
            font-size: 14px;
            transition: all 0.4s;
        }
        .search:focus{
            width: 250px;
            margin-left: 150;
        }
    </style>
</head>

<body>
    <div id="search"><input class="search" type="search"></div>
</body>
</html>

手机触屏事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mobile-touch</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        html,body,#main{
            height: 100%;
        }
        #main{
            background-color: #c00;
            color: #fff;
            font-size: 30px;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="main">
        
    </div>
    <script>
        // hammer:移动事件库
        var main = document.getElementById("main");
        main.addEventListener("touchmove",function(e){
            //e.touches[0]手机上的所有手指
            main.innerText=e.targetTouches[0].offSetX+" "+e.targetTouches[0].pageX+
            " "+e.targetTouches[0].screenX+" "+e.targetTouches[0].clientX+" "+e.touches[0].clientX;//main上的所有手指
        });
        var x;
        var endX;
        main.ontouchstart = function(e){
            x = e.targetTouches[0].pageX;
        }
        main.ontouchend = function(e){
            endX = e.changedTouches[0].pageX;
            if(endX-x>10){
                main.innerText="右滑";
            }else if(endX-x<10){
                main.innerText = "左滑";
            }
        }
    </script>
</body>
</html>

正则表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>正则表达式</title>
</head>
<body>
    <script>
        var str = "abcd";
        //test:参数中是否包含符合该正则表达式的值
        //bcd里是事包含a或b或c或d
        console.log(/[abc]/.test("bcd"));
        //参数里包含不是abc的值则为true
        console.log(/[^abc]/.test("abcd"));
        console.log(/[0-9]/.test("abc1"));
        console.log(/\d\w/.test("a0000"));
        console.log(/[ab]?c/.test("aaaaaabc"));
        // * 出现0或n次 + 出现1或n次 ？出现0次或1次
        // 电话号码
        console.log(/\d{3,4}-\d{7,8}/.test("1234-1234567"))
        console.log(/\￥\d+\.?\d*/.test("￥22.3"));
        console.log(/^\dA$/.test("1A"));//以数字开始，以字母结束
        console.log(/abc/i.test("aBC"));//i 忽略大小写

        var str = "my name is xiao ,Xiao likes js";
        var first = str.search(/[abxX]iao/);
        var newstr = str.replace(/xiao/ig,"xiaoming");
        console.log(newstr);
    </script>
</body>
</html>

滚动时固定效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>scroll</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        #header{
            height: 100px;
            background-color: #f00;
        }
        #fixed{
            left: 0;   
            top: 0;
            height: 80px;
            background-color: #0f0;
            z-index: 2;
            width: 100%;
        }
        #main{
            height: 4000px;
            background:linear-gradient(#000,#ccc);
        }

    </style>
</head>
<body>
    <div id="header"></div>
    <div id="fixed"></div>
    <div id="main"></div>
    <script>
        var hd = document.getElementById("header");
        var fixed = document.getElementById("fixed");
        window.onscroll = function(){
            var st = document.body.scrollTop||document.documentElement.scrollTop;
            console.log(st);
            if(st>100){
                fixed.style.position = "fixed";
            }else{
                fixed.style.position = "relative";
            }
        }
    </script>
</body>
</html>