<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

    存檔

    主站蜘蛛池模板: 在线人成精品免费视频| 毛片a精品**国产| 精品久久久久久国产三级| 国产精品亚洲а∨无码播放| 国产午夜亚洲精品国产成人小说| 69SEX久久精品国产麻豆| 亚洲精品麻豆av| 国内精品国语自产拍在线观看| 精品视频在线免费观看| 精品亚洲A∨无码一区二区三区| 日韩视频中文字幕精品偷拍| 国产精品v欧美精品v日本精 | 国产a∨精品一区二区三区不卡| 最新国产精品无码| 久久久久国产精品三级网| 99久久亚洲综合精品网站| 精品久久一区二区三区| 国产久热精品无码激情| 日韩精品无码一区二区三区不卡| 老司机精品影院91| 精品国产91久久久久久久a | 久久久精品国产sm调教网站| 亚洲国产精品视频| 日本国产精品久久| 久久精品二区| 久久久精品日本一区二区三区| 国产专区日韩精品欧美色| 国产亚洲精品AA片在线观看不加载| 中文精品久久久久国产网址| 日本精品久久久中文字幕| 精品一区二区三区中文字幕| 国产精品电影在线观看| 国产福利视精品永久免费| 99精品视频免费| 国内精品久久久久久野外| 99久久久精品| 国产精品麻豆高清在线观看| 国产精品一久久香蕉产线看| 亚洲欧美日韩精品久久| 国产成人亚洲精品影院| 国产亚州精品女人久久久久久|