1218_JS对象、定时器 第35课

1、js对象

<script type="text/javascript">
        // js对象 （数组是一种特殊的对象）
        var obj = new Object();
        obj.name = '五竹'; // 属性定义
        obj.age = 118;
        obj.skill = '打架';
        obj.character = '镭射眼';
        console.log( obj );
        obj.speak = function(){ // 方法定义，一般类里叫方法，单独叫函数，叫法不同而已
            console.log('我从不废话');
        }
        obj.speak();
        // js对象 第二种定义方式
        var obj1 = {
            name: "年哥",
            age: 36,
            speak: function (str) { //传参与否看需要
                console.log('我' + str);
            },
            spaek2:function () {
                console.log('啦啦啦啦啦');
            }
        };
        obj1.skill = '逃跑';
        obj1.character = '小财迷';
        console.log( obj1 );
        obj1.speak('巧舌如簧');
</script>

2、js对象内部的方法调用

<script type="text/javascript">
        var obj2 = {
            name: "speak2",
            speak: function( str ){
                console.log('对天一声吼');
                console.log('原来是' + str + '在调用我');
            },
            speak2: function () {
                // obj2.speak(obj2.name);
                this.speak(this.name);
            }
        }
        obj2.speak2();
</script>

3、定时器

1 示例一

<script type="text/javascript">
        setTimeout( myfun ,3000);
        // myfun是将函数myfun的地址/指针返回给setTimeout的第一个参数，3秒后再执行都一个参数
        setTimeout( myfun() ,3000);
        // myfun()是将函数myfun的结果直接返回给setTimeout的第一个参数，3秒就没用了
        function myfun() {
            console.log('I am showing');
        }
</script>

1 示例二

<script type="text/javascript">
        // 等效setTimeout函数
        var mytiomeout = setInterval(function () {
            console.log('I am a new timeout method');
            clearInterval(mytiomeout);
        },3000);
</script>

ps:
1）setInterval是每隔3s执行，多次循环，setTimeout是3s后执行，仅一次
2）setInterval每3s执行一次，但第一次执行后，就clearInterval了，所以后面不会再执行了，达到setTimeout的效果

1 示例三

<script type="text/javascript">
    <button onclick="send()" id="btn">发送验证码</button>
    <script type="text/javascript">
        function send() {
            flag = 10;
            var txt = document.getElementById('btn').textContent;
            var timer = setInterval(function () {
                document.getElementById('btn').textContent = flag + '秒后重试';
                flag--;
                if( flag==-1 ){
                    document.getElementById('btn').textContent = txt;
                    clearInterval(timer);
                }
            },1000);
        }
    </script>
</script>

ps: 模拟短信验证码上的倒计时