時計表示、タイミング、一時停止、リセット、および他のいくつかの機能を含むデスクトップの時計VUE、と簡単なページを実装します。
図の効果はちょうどタイマーに1つのクロック、クロックに表示される時刻、実際の現在の時間の分、秒、タイマーボタンをクリックし、ページでの時間に来て、タイマーのリセットボタンが2で中断されたページを、次のあなたが戻っクロックへのクロックインターフェイスをボタンスイッチをクリックした場合の代替のボタンは、それぞれ、一時停止し、タイマーをリセットします。
コードは以下の通りであります：
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字セット= "UTF-8">
<タイトル>时钟</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
.clock {
幅：400ピクセル;
高さ：180ピクセル;
行 - 高さ：180ピクセル;
ボーダー：10pxの固体#aaa。
国境 - 半径：10pxの;
マージン：120ピクセルのオート;
背景：ピンク;
テキスト - 揃える：センター;
位置：相対;
ボックス -shadow：0PX 5pxの20ピクセルのRGBA（0,0,0、0.6 ）;
.clock。
フォントサイズ：70ピクセル;
フォント - 重さ：太字;
色：RGBA（ 0,0,0、0.7 ）。
}
.clockの.btn {
位置：絶対。
/ * トップ：-66px; * /
下：- 66px;
国境：なし;
概要：なし。
幅：80px;
高さ：36px;
国境 - 半径：4PX。
フォント - サイズ：16pxに;
背景：#aaa。
カーソル：ポインタ;
ボックス -shadow：0PX 5pxの20ピクセルのRGBA（0,0,0、0.6）;
}
.clock .btn：ホバー{
不透明： 0.8 。
}
.clock .btn - クロック{
左：110px;
}
.clock .btn -clock.to- {左
左：60PX。
}
.clock .btn - タイマー{
右：110px;
}
.clock .btn - サスペンド{
右：160ピクセル。
}
.clock .btn - リセット{
右：60PX。
}
</スタイル>
<SCRIPT SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ SCRIPT>
</ head>
<body>
<DIV ID = "アプリケーション">
<DIV CLASS = "時計">
<スパンクラス= "テキスト" V- なら = "インデックス== 0">
{{時間}}：{{分}}：{{秒}}
</スパン>
<スパンクラス= "テキスト" V- 他 >
{{分}}：{{秒}}：{{ミリ秒}}
</ span>の
クラス= "{ 'から左：<ボタンクラスは= "BTN BTN-クロック" @ = "selectClock"をクリックしてください「：インデックス= 0} ">时钟</ボタン>！
<ボタンクラス="BTN BTN-タイマーselectTimer "V-」@ =クリック" の場合 = "インデックス== 0">
<span>を计时器</ span>のを
</ button>の
<ボタンクラス= "BTN BTN-サスペンド" @ = "suspendTimer" V-をクリックしてください場合 = "インデックス> 0">
<スパンV- 場合 = "インデックス== 1">暂停</ span>の
<スパンV- 場合 = "インデックス== 2">开始</ span>を
</ button>の
<ボタンクラス= "BTN BTN-リセット" @ = "resetTimer" V-をクリックしてください場合 = "インデックス== 1 ||インデックス== 2 ">
<span>を重置</ span>を
</ボタン>
</ div>
</ div>
<スクリプトタイプ="テキスト/ javascriptの">したアプリ= 新しいヴュー（{
：エル '#app'は、
データ{
インデックス： 0、 // 0は、タイマー1が表すタイマ2の状態を一時停止し、状態を示し、ページクロックを示し
「00」、：時間を // 表示される値は、ページ
分：「00」、
秒：「00」、
ミリ秒： '00' 、
H： 0、 // 値を一時的に記憶されている
M：0 、
S： 0 、
MS： 0 、
タイマ：ヌル、
DATE：NULL
}
// 監視
時計：{
インデックス（newValueに、OLDVALUE）{
てclearInterval（この.timer）;
この .timerは= ヌル;
この .date = ヌル;
// ページからクロックタイマーアップ、またはページのクリッククリックから来る
IF（OLDVALUE = newValueに== 0 || = 0）{ // インデックスが第二のデータ保持に等しい
この .hour = '00' ;
この .min = '00' ;
この .SEC = '00' ;
これ・秒= '00' ;
この・H = 0 。
この .M = 0;
これは = 0を.S 。
これは = 0を.MS 。
}
この.autoMove（）。
}
}、
メソッド：{
// 自动计时
autoMove（）{
場合（この .INDEX == 0 ）{
この .timer =たsetInterval（RES => {
この .date = 新しい日付（）;
この .H =この.date.getHours（）;
この .M = この.date.getMinutes（）。
これは、 = .S 本）（.date.getSecondsします。
この .hour = この .H> 9？この .H： '0' + この.H。
この .min = この .M> 9？ この .M： '0' + この.M。
この .SECは= これは > 9 .S？これは '0'を+：.S これは.S。
}、 1000年）。
}そう であれば（この .INDEX == 1 ）{
この .timer =たsetInterval（RES =>は、{
これは。MS ++ ;
場合（これは == 100。MS ）{
これは ++ .S ;
これは = 0。MS 。
}
場合（これは == 60 .S {）
この .Mを++;
この = 0 .S。
}
この .msecは= これは > 9。MS？これは .MS： '0' + この.MSを。
この .min = この .M> 9？ この .M： '0' + この.M。
この .SECは= これは > 9 .S？これは '0'を+：.S これは.S。
}、 10 ）;
}
}
// 选择时钟
selectClock（）{
この .INDEX = 0 。
}
// 選択タイマ
selectTimer（）{
この .INDEX = 1 ;
}
// 、起動タイマポーズ
{）（suspendTimerを
IF（この == .INDEX 1。）{
この = 2 .INDEX ;
} そう IF（この .INDEX == 2 ）{
この .INDEX = 1 ;
}
}
// 重置计时器
resetTimer（）{
この.INDEX = 0 。
setTimeout（RES => {
この .INDEX = 1 ;
}、 1 ）;
}
}、
（）{ 搭載
この.autoMove（）。
}
}）
</ SCRIPT>
</ body>
</ HTML>