日付を使用してデジタル時計
16242 ワード
この記事では、HTML CSSとJavaScriptプログラミングコードを使用してデジタル時計を作成する方法を学びます.以前より多くの種類の時計設計を示しました.基本的に2種類の時計、1つのアナログと他のデジタルがあります.
このデジタル時計がどのように働くかについて見るために、Watch the live demo.デジタル時計ははるかに美しく、はるかに簡単です.あなたが基本的なHTML CSSとJavaScriptプログラミング・コードを知っているならば、あなたは簡単にデジタル・クロックを構築することができます.
基本的に私はJavaScriptプログラミングコードに基づいてこの時計を作りました.ほとんどのHTMLとCSSのコードが使用されている.このデジタル時計では、日付から時間までのすべてが表示されます.まず第一にAM/PMのオプションをここで時間が表示されます.
このデジタル時計を作成するには、まずHTMLファイルを作成する必要があります.この場合、ほとんどのCSSプログラミングコードを使用していません.この場合、別のCSSファイルを作成しなくても.
以下のプログラムコードは、この腕時計の基本的なHTMLとCSS構造です.
あなたがデモを見たならば、あなたはこのケースで、長方形の箱を使用して、その箱のまわりで境界(
基本的にこの時計、タイムビュー、AM/PMと日付表示の3種類のオプションがあります.次のHTMLとCSSのプログラミングコードを作成し、これらの3つのオプションを設計してきた.
この場合、私はそれぞれ
これまで、我々はこのデジタル腕時計を設計しました、現在、我々はこのデジタル腕時計を実行します.基本的なJavaScriptプログラミングコードを知っている必要があります.私は、それで誰の最初の
あなたが基本的なJavaScriptを知っているならば、あなたは確かに以下のコードを理解することができます.
上記のJavaScriptコードを追加しました.今回は、上記のデモで見た日付を実装します.この場合、日付、月などを追加しました.
あなたがこのチュートリアルから学んだことを願って、私はこのデジタル腕時計を作りました.あなたは理解の任意の難しさがある場合は、もちろんコメントすることができます.私はmade many more designs like thisをしたい場合は、デザインに従うことができます.
あなたは、このようなより多くのチュートリアルのために私のブログを訪問することができます.
https://www.foolishdeveloper.com/
このデジタル時計がどのように働くかについて見るために、Watch the live demo.デジタル時計ははるかに美しく、はるかに簡単です.あなたが基本的なHTML CSSとJavaScriptプログラミング・コードを知っているならば、あなたは簡単にデジタル・クロックを構築することができます.
基本的に私はJavaScriptプログラミングコードに基づいてこの時計を作りました.ほとんどのHTMLとCSSのコードが使用されている.このデジタル時計では、日付から時間までのすべてが表示されます.まず第一にAM/PMのオプションをここで時間が表示されます.
このデジタル時計を作成するには、まずHTMLファイルを作成する必要があります.この場合、ほとんどのCSSプログラミングコードを使用していません.この場合、別のCSSファイルを作成しなくても.
ステップ1:デジタル時計の基本構造を作成する
以下のプログラムコードは、この腕時計の基本的なHTMLとCSS構造です.
あなたがデモを見たならば、あなたはこのケースで、長方形の箱を使用して、その箱のまわりで境界(
border: 7px solid rgb(255, 252, 252);
)を置いたということを理解します.時刻と日付はその箱で見ることができます.ボックス・シャドウ(box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
)がこの箱のまわりで使われました. <div class="time">
</div>
body {
font-family: "Work Sans", sans-serif;
margin-top: 150px;
background: #bbbcbd;
margin-left: 70px;
}
.time {
background: rgb(12, 12, 12);
color: #fff;
text-align: center;
width: 500px;
border: 7px solid rgb(255, 252, 252);
padding: 8px;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0
rgba(0,0,0,0.12);
}
ステップ2:時間を追加する
基本的にこの時計、タイムビュー、AM/PMと日付表示の3種類のオプションがあります.次のHTMLとCSSのプログラミングコードを作成し、これらの3つのオプションを設計してきた.
この場合、私はそれぞれ
specific front size
を設定しました.必要に応じて、あなたの好みに合わせてサイズを変更することができます.<span class="hms"></span>
<span class="ampm"></span>
<br>
<span class="date"></span>
.hms {
font-size: 68pt;
font-weight: 200;
}
.ampm {
font-size: 22pt;
}
.date {
font-size: 15pt;
}
ステップ3 : JavaScriptコードを有効にする
これまで、我々はこのデジタル腕時計を設計しました、現在、我々はこのデジタル腕時計を実行します.基本的なJavaScriptプログラミングコードを知っている必要があります.私は、それで誰の最初の
time and add AM / PM
オプションを見るために準備をします.あなたが基本的なJavaScriptを知っているならば、あなたは確かに以下のコードを理解することができます.
function updateTime() {
var dateInfo = new Date();
/* time */
var hr,
_min = (dateInfo.getMinutes() < 10) ? "0" + dateInfo.getMinutes() : dateInfo.getMinutes(),
sec = (dateInfo.getSeconds() < 10) ? "0" + dateInfo.getSeconds() : dateInfo.getSeconds(),
ampm = (dateInfo.getHours() >= 12) ? "PM" : "AM";
// replace 0 with 12 at midnight, subtract 12 from hour if 13–23
if (dateInfo.getHours() == 0) {
hr = 12;
} else if (dateInfo.getHours() > 12) {
hr = dateInfo.getHours() - 12;
} else {
hr = dateInfo.getHours();
}
// Add to time format
var currentTime = hr + ":" + _min + ":" + sec;
// AM/ PM options
document.getElementsByClassName("hms")[0].innerHTML = currentTime;
document.getElementsByClassName("ampm")[0].innerHTML = ampm;
/* Add Date options */
// print time and date once, then update them every second
updateTime();
setInterval(function() {
updateTime()
}, 1000);
ステップ4:デジタル時計の日付オプションをアクティブにします
上記のJavaScriptコードを追加しました.今回は、上記のデモで見た日付を実装します.この場合、日付、月などを追加しました.
/* date */
var dow = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
month = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
day = dateInfo.getDate();
// store date
var currentDate = dow[dateInfo.getDay()] + ", " + month[dateInfo.getMonth()] + " " + day;
document.getElementsByClassName("date")[0].innerHTML = currentDate;
};
あなたがこのチュートリアルから学んだことを願って、私はこのデジタル腕時計を作りました.あなたは理解の任意の難しさがある場合は、もちろんコメントすることができます.私はmade many more designs like thisをしたい場合は、デザインに従うことができます.
You must let us know how you like this design by commenting
.あなたは、このようなより多くのチュートリアルのために私のブログを訪問することができます.
https://www.foolishdeveloper.com/
Reference
この問題について(日付を使用してデジタル時計), 我々は、より多くの情報をここで見つけました https://dev.to/code_mystery/digital-clock-with-date-using-javascript-html-css-3epaテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol