Nomad CoderバニラJSを使用してChromeアプリケーションを作成するクロックを表示
Dateクラスを使用して現在の時刻を取得し、画面に時間が変化していることを表示したい場合は、繰り返しではなくinterval関数を使用し、時間出力を指定したい場合はtimeout関数を使用します.
まずhtmlにh 2タグを使って時間を表すことにします.
1. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" />
<title>Momentum</title>
</head>
<body>
<form id="login-form" class="hidden">
<input type="text" placeholder="What is your name?">
<input type="submit" value="Log In">
</form>
<h2 id="clock">00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
</body>
</html>
次に,getHours(),getMinutes()およびgetSeconds()関数を用いて時間を表す.
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clock.innerText=`${hours}:${minutes}:${seconds}`;
padStart(maxLength,number)は、最大桁数と数値桁数を調整する文字のパラメータである数値桁数を調整する関数です.
毎秒1回時間を変更するにはinterval関数を使用します.
setInterval(handler,timehandler)は、繰り返し表示するときに使用する関数として使用して、時間を直接決定できます.(ミリ秒単位受信時間、1000 ms=1 s)
すべての関数を統合し、JavaScriptで関数を作成し、現在のビューを作成します.
2. javascript
const clock = document.querySelector("#clock");
function getClock(){
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
clock.innerText=`${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
Reference
この問題について(Nomad CoderバニラJSを使用してChromeアプリケーションを作成するクロックを表示), 我々は、より多くの情報をここで見つけました https://velog.io/@thgus0426/노마드코더-바닐라-JS로-크롬앱-만들기-시계나타내기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol