<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 使用vue寫一個計時器

    2021-5-18    前端達人

    **

    首先我們要知道setTimeout和setInterval的區別

    **
    setTimeout只在指定時間后執行一次,代碼如下:

    <script>  
    //定時器 異步運行  
    function hello(){  
    alert("hello");  
    }  
    //使用方法名字執行方法  
    var t1 = window.setTimeout(hello,1000);  
    var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法  
    window.clearTimeout(t1);//去掉定時器  
    </script> 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    setInterval以指定時間為周期循環執行,代碼如下:

    //實時刷新時間單位為毫秒  
    setInterval('refreshQuery()',8000);   
    /* 刷新查詢 */  
    function refreshQuery(){  
       $("#mainTable").datagrid('reload',null);  
    } 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    一般情況下setTimeout用于延遲執行某方法或功能,
    setInterval則一般用于刷新表單,對于一些表單的實時指定時間刷新同步
    **

    計時器

    **
    HTML代碼

    <div class="father">
            <ul>
                <li>{{one}}<span>:</span></li>
                <li>{{two}}<span>:</span></li>
                <li>{{three}}</li>
            </ul>
            <el-button type="primary" @click="startHandler">開始</el-button>
            <el-button type="primary" @click="endHandler">暫停</el-button>
        </div> 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    JAVASCRIPT代碼

    <script>
    export default {
      name: 'HelloWorld',
      data(){
          return {
            flag: null,
            one : '00', // 時
            two : '00', // 分
            three : '00', // 秒
            abc : 0, // 秒的計數
            cde : 0, // 分的計數
            efg : 0, // 時的計數
          }
      },
      props: {
        msg: String
      },
      mounted() {
    
      },
      methods:{
      // 開始計時
        startHandler(){
            this.flag = setInterval(()=>{
                if(this.three === 60 || this.three === '60'){
                    this.three = '00';
                    this.abc = 0;
                    if(this.two === 60 || this.two === '60'){
                        this.two = '00';
                        this.cde = 0;
                        if(this.efg+1 <= 9){
                            this.efg++;
                            this.one = '0' + this.efg;
                        }else{
                            this.efg++;
                            this.one = this.efg;
                        }
                    }else{
                        if(this.cde+1 <= 9){
                            this.cde++;
                            this.two = '0' + this.cde;
                        }else{
                            this.cde++;
                            this.two = this.cde;
                        }
                    }
                }else{
                    if(this.abc+1 <= 9){
                        this.abc++;
                        this.three = '0' + this.abc;
                    }else{
                        this.abc++;
                        this.three=this.abc;
                    }
                }
    
            },100)
        },
        // 暫停計時
        endHandler(){
            this.flag = clearInterval(this.flag)
        }
      }
    }
    </script> 
    
    • 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
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    效果如下:
    在這里插入圖片描述




    藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

    截屏2021-05-13 上午11.41.03.png


    文章來源:csdn     作者:rock_23

    分享此文一切功德,皆悉回向給文章原作者及眾讀者.
    免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

    藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://m.skdbbs.com

    存檔

    主站蜘蛛池模板: 91精品国产91久久| 久久精品国产精品国产精品污| 久久亚洲精品中文字幕三区| 精品人妻系列无码人妻免费视频| 18国产精品白浆在线观看免费| 亚洲国产婷婷综合在线精品| 国产精品 视频一区 二区三区| 99re久久精品国产首页2020| 久久精品国产亚洲一区二区| 一本一本久久aa综合精品| 国産精品久久久久久久| 国产亚洲精品a在线观看| 国产精品三级在线观看无码| 亚洲精品福利视频| 国产综合色在线精品| 亚洲欧美精品午睡沙发| 精品福利一区二区三区免费视频| 2020久久精品国产免费| 日韩精品无码专区免费播放| 欧美精品91欧美日韩操| 国产亚洲午夜高清国产拍精品| 97精品国产97久久久久久免费| 国产精品成人免费福利| 国产精品多人p群无码| 精品无码人妻夜人多侵犯18| 精品国产一区二区三区免费| 国产三级久久久精品麻豆三级| 精品福利一区二区三区免费视频 | 久久久久人妻一区精品性色av| 无码精品第一页| 欧美精品人人做人人爱视频| 久久精品夜色噜噜亚洲A∨| 国产免费久久精品丫丫| 精品欧美| 四虎国产精品成人| 亚洲午夜成人精品电影在线观看| 一夲道无码人妻精品一区二区| 亚洲国产精品无码久久久不卡| 亚洲性日韩精品一区二区三区| 亚洲国产精品无码久久SM| 精品综合久久久久久888蜜芽|