この記事の例では、タイマー機能を実装するための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 はメソッドまたは関数の実行を遅らせるために使用されます。 タイマー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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Django 2.2 を MySQL データベースに接続する方法
>>: Dockerイメージストレージoverlayfsの使用
MySQL のインデックスの種類一般的に、次の 4 つのカテゴリに分類できます。通常のインデックス:...
1. Dockerのインストールと設定 #CentOS をインストールし、Docker パッケージを...
複数のデータベースをバックアップするには、次のコマンドを使用できます。 mysqldump -uro...
これらの仕様は、下位互換性のあるドキュメントを Web 上で公開し、できるだけ幅広いユーザーがアクセ...
目次スケルトンスクリーンの使用Vueアーキテクチャスケルトンスクリーンアイデアの概要抽象コンポーネン...
文法以下は、MySQL テーブルにデータを挿入するための INSERT INTO コマンドの一般的な...
目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...
なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...
序文MySQL データベースを使用する過程では、データベースのバックアップと復元が必要になることがよ...
以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...
Div 基本レイアウト <div class="main"> <...
echarts コンポーネントの公式ウェブサイト アドレス: https://echarts.apa...
nginx をリバース プロキシ tomcat として使用する場合、セッション損失が発生する可能性が...
目次1. システム監視2. ファイル操作3. ネットワーク通信4. システム管理仕事で必要なLinu...
MySQL 8.0.3がリリースされます。新機能を見てみましょうMySQL 8.0.3 は RC ...