Vueを使用してタイマー機能を実装する

Vueを使用してタイマー機能を実装する

この記事の例では、タイマー機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

まずsetTimeoutとsetIntervalの違いを知る必要があります

setTimeout は指定された時間後に 1 回だけ実行されます。コードは次のとおりです。

<スクリプト>  
//タイマーは非同期で実行されます function hello(){  
アラート("こんにちは");  
}  
//メソッド名を使用してメソッドを実行します var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//文字列実行メソッドを使用する window.clearTimeout(t1);//タイマーを削除する</script>

setInterval は指定された期間のサイクルで実行されます。コードは次のとおりです。

//リアルタイム更新時間の単位はミリ秒です setInterval('refreshQuery()',8000);   
/* クエリを更新 */  
関数refreshQuery(){  
   $("#mainTable").datagrid('reload',null);  
}

一般的に、setTimeout はメソッドまたは関数の実行を遅らせるために使用されます。
setIntervalは、通常、フォームを更新したり、一部のフォームの指定された時間に同期を更新したりするために使用されます。

タイマー

HTMLコード

<div class="父">
  <ul>
   <li>{{1} }:</span></li>
   <li>{{2} }:</span></li>
   <li>{{3}}</li>
  </ul>
  <el-button type="primary" @click="startHandler">開始</el-button>
  <el-button type="primary" @click="endHandler">一時停止</el-button>
</div>

JAVASCRIPTコード

<スクリプト>
エクスポートデフォルト{
  名前: 'HelloWorld',
  データ(){
   戻る {
  フラグ: null、
  1 : '00', // 時間 2 : '00', // 分 3 : '00', // 秒 abc : 0, // 秒数 cde : 0, // 分数 efg : 0, // 時間数 }
  },
  小道具: {
    メッセージ: 文字列
  },
  マウント() {
   
  },
  方法:{
  // タイミングを開始する 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;
     }それ以外{
      this.efg++;
      this.one = this.efg;
     }
    }それ以外{
     if(this.cde+1 <= 9){
      this.cde++;
      this.two = '0' + this.cde;
     }それ以外{
      this.cde++;
      this.two = this.cde;
     }
    }
   }それ以外{
    もし(this.abc+1 <= 9){
     this.abc++;
     this.three = '0' + this.abc;
    }それ以外{
     this.abc++;
     this.three=this.abc;
    }
   }
   
  },100)
 },
 // 一時停止タイミング endHandler(){
  this.flag = clearInterval(this.flag)
 }
  }
}
</スクリプト>

効果は以下のとおりです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueメソッドに基づくシンプルなタイマーの実装
  • Vue-cliフレームワークはタイマーアプリケーションを実装します
  • Vue.jsはシンプルなタイマー機能を実装します
  • Vueはシンプルなタイマーコンポーネントを実装します
  • Vueタイマーの実装方法
  • Vueタイマーの詳細な使い方
  • Vueコンポーネントが破棄された後もタイマーが実行し続ける問題を解決する
  • タイマーを使用してマーキー効果を実現する Vue サンプルコード
  • vueタイマーコンポーネントの実装コード
  • Vue3 でタイマーコンポーネントをカプセル化する方法

<<:  Django 2.2 を MySQL データベースに接続する方法

>>:  Dockerイメージストレージoverlayfsの使用

推薦する

MySQLインデックスが使用されない状況のまとめ

MySQL のインデックスの種類一般的に、次の 4 つのカテゴリに分類できます。通常のインデックス:...

Net Core実装プロセス分析のDoc​​kerインストールと展開

1. Dockerのインストールと設定 #CentOS をインストールし、Docker パッケージを...

MySQLの一般的なバックアップコマンドとシェルバックアップスクリプトの共有

複数のデータベースをバックアップするには、次のコマンドを使用できます。 mysqldump -uro...

ウェブ標準学習リソースの素晴らしいコレクション

これらの仕様は、下位互換性のあるドキュメントを Web 上で公開し、できるだけ幅広いユーザーがアクセ...

Vueでスケルトンスクリーンを実装する例

目次スケルトンスクリーンの使用Vueアーキテクチャスケルトンスクリーンアイデアの概要抽象コンポーネン...

mysql の追加、削除、変更、クエリの基本ステートメント

文法以下は、MySQL テーブルにデータを挿入するための INSERT INTO コマンドの一般的な...

Vue は Tencent Map を統合して API を実装します (デモ付き)

目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...

CSS コンテンツ属性を使用して、マウスホバープロンプト (ツールチップ) 効果を実現します。

なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...

Mysql の大きな SQL ファイルの高速リカバリ ソリューションの共有

序文MySQL データベースを使用する過程では、データベースのバックアップと復元が必要になることがよ...

mySQLキーワードの実行優先度の説明

以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...

Vue で echarts を使用してコンポーネントを視覚化する方法

echarts コンポーネントの公式ウェブサイト アドレス: https://echarts.apa...

Nginx セッション損失問題の解決策

nginx をリバース プロキシ tomcat として使用する場合、セッション損失が発生する可能性が...

Linux系でよく使われる運用・保守コマンド(まとめ)

目次1. システム監視2. ファイル操作3. ネットワーク通信4. システム管理仕事で必要なLinu...

MySQL 8.0.3 RCがリリースされようとしています。変更点を見てみましょう。

MySQL 8.0.3がリリースされます。新機能を見てみましょうMySQL 8.0.3 は RC ...