第三阶段学习心得总结

这应该是我在进入培训后发的第一个总结。说总结，也谈不上，更像是一些吐槽或者说心里话。

这个阶段主要学习的是移动互联网应用和微信小程序的内容。不得不说网课是真的难上，被隔离的日子仿佛就是在坐牢，下楼做核酸就是出门放风。前面的内容都没有听完整。到微信小程序还好一点，因为自己一直跟着操作，不懂的时候还可以问一下，不过也并不算完全听得懂，实际操作还是要看老师的代码。期待新班级快开起来，好从头梳理一遍。

今天登录这个号才发现它已经建立将近一个月了，原来我已经在班里学习一个月，有这么快吗？这两天回看蒋老师的笔记，看到这些内容，回想起以前学校的老师，上面所有的内容，他都提起过，只不过是当时忙着“游戏”，并未正真听懂罢了，辜负了他的一番心意。还好蒋老师和陆老师没有旧的我的问题“白痴”，无论是培训班的老师还是学校的老师，都很好。（一时找不到表情，此处应该搭配掩面哭泣）

最后留一个代码结束吧。

 class Clock {

        // 属性

        // 该始终对象所挂载的页面节点

        #root

        #h = 0

        #m = 0

        #s = 0

        // 计时器

        #timer

        // 构造函数

        constructor(root, h = 0, m = 0, s = 0) {

            this.#root = root

            this.setTime(h, m, s)

        }

        // 行为

        // 开始运行

        start() {

            this.stop()

            this.#timer = setInterval(() => {

                this.run()

                this.render()

                console.log(this.toString());

            }, 1000)

            // 渲染第一帧

            this.render()

        }

        // 停止运行

        stop() {

            clearInterval(this.#timer)

        }

        // 运行

        run() {

            this.#s++

            if (this.#s >= 60) {

                this.#m++

                this.#s = 0

                if (this.#m >= 60) {

                    this.#h++

                    this.#m = 0

                    if (this.#h >= 24) {

                        this.#h = 0

                    }

                }

            }

        }

        // 设置时间

        setTime(h, m, s) {

            this.#h = h

            this.#m = m

            this.#s = s

        }

        toString() {

            return `${this.#h < 10 ? '0' + this.#h : this.#h}:${this.#m < 10 ? '0' + this.#m : this.#m}:${this.#s < 10 ? '0' + this.#s : this.#s}`

        }

        // 渲染函数

        // 渲染函数的目的是将该对象的html展示出来

        render() {

            let html = `

            <div class="clock">

                <span class="h">${this.#h < 10 ? '0' + this.#h : this.#h}</span>:<span class="m">${this.#m < 10 ? '0' + this.#m : this.#m}</span>:<span class="s">${this.#s < 10 ? '0' + this.#s : this.#s}</span>

            </div>

            `

            this.#root.innerHTML = html

        }

    }

    class A {

        // 井号开头的属性或行为 将变成私有属性或方法

        // 私有属性或方法只能在类内部访问

        #name

        constructor(name) {

            this.#name = name

        }

        sayName() {

            console.log(this.#name);

        }

    }

    let a = new A('张三')

 

    let clock = new Clock(document.querySelector('.clock1'), 23, 59, 48)

    clock.start()

    let clock2 = new Clock(document.querySelector('.clock2'), 14, 44, 57)

    clock2.start()

    let clock3 = new Clock(document.querySelector('.clock3'), 08, 14, 24)

    clock3.start()

</script>