ビルド独自のデジタル時計

9057 ワード
productivity begginers tutorial javascript テキストリンク

なぜ私はこのミニプロジェクトを試みる必要がありますか？


あなたがウェブサイトにいるか、デジタル自己計数時計でウェブアプリケーションを使用しているならば、それがJavaScriptコードによって供給される大きなチャンスが、あります.これはJavaScriptの時計が良いJavascriptプロジェクトのためだけに作られていないことを意味します.JavaScriptの時計は、JavaScript開発者として行われるような実際の仕事の種類で、あなたに手をつけることができます.

何をしたい


ここでは、すべての機能を私は私のWeb時計をしたいリストを
  • 現在の日付
  • 表示現在時刻

  • それ自身の時間をインクリメントします

  • サイクル別の壁紙を介してサイクルの時間(朝、昼、夜、夜)に基づいて
    • 今、私はすべてのfeautureを実装どのように詳細に行くよ

    0 .ベースデザイン


    HTML構造を作る
    <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width:device-width, initial-scale:1.0">
        <title>DATE AND TIME</title>
        <link rel="stylesheet" href="style/style.css">
    </head>

    <body>
        <img src="" id="wallpaper"> <!-- here we will have the wallpaper change during the different times of the day -->
        <div class="hero">
            <h3 id="print-date"></h3> <!-- spot for printing the date -->
            <h2 id="print-time"></h2> <!-- spot for printing the time -->
        </div>
    </body>

</html>

    ディスプレイの現在時刻


    我々は、プロジェクトフォルダ内のJSフォルダを作成し、我々は時間という名前のファイルを作成します.jsここでは、我々のJSコードから始めます.
    AMとPMを区別できるように、私たちは正午というVarを設定します
    var noon = 12;
    現在の時刻を表示する関数を作成します
    var showCurrentTime = function(){
    var current ( date ()について)参照here )
    var currentTime = new Date();
    date ()から多くの出力を得ることができます.しかし、このスクリプトではこれらを使います.
     var hours = currentTime.getHours();
 var minutes = currentTime.getMinutes();
 var seconds = currentTime.getSeconds();
    子午線( am/pm )の変数を設定します
    var meridian = "AM";
    現在、if変数を使用してAMかPMかどうかを指定します
     if (hours >= noon)
    {
        meridian = "PM";
    }
    そして、それが午後でないならば、時間はこのような12時間のフォーマットに変わる必要があります
    if (hours > noon)
    {
        hours = hours - 12;
    }
    今、私たちはそれを表示するために分を設定する必要がありますので、私たちは12 : 05 : 45ではなく、12 : 5 : 45を表示する必要がありますので、私たちはこのように0
    if (minutes < 10)
    {
        minutes = "0" + minutes;
    }
    また、秒単位で行われます
    今、私たちは、印刷時間で表示される1つの変数で一緒にそれをすべてセットしました
    var clockTime = hours + ':' + minutes + ':' + seconds + ' ' + meridian;
    そして今、私たちは、HTMLの印刷時間クラスでそれを表示します
    document.getElementById("print-time").innerHTML = clockTime;
    ここで関数を閉じる

    2 .それ自身の時間を増やす


    新しい機能を作る
    var updateClock = function() 
{
    内部で前の関数を
    showCurrentTime();
    我々は機能を閉じ、それを呼び出す
    };
updateClock();
    次に、2番目のユニバーサル変数を設定します
    var oneSecond = 1000;
    そして、我々はそれを更新します
    setInterval( updateClock, oneSecond);
    今、あなたのHTMLの本体にスクリプトを追加し、あなたのウェブサイトを再ロードすると、本当に醜い時計を取得しますが、それが動作することを確認してください、それは上記の手順を復活しない場合.

    3 .ディスプレイの現在の日付


    今、日付というJSフォルダ内の別のファイルを作りましょう.符号化開始
    既にdate ()に慣れています.方法別の出力が必要です
    var today = new Date();
var years = today.getFullYear();
var months = today.getMonth();
var days = today.getDate();
var day = today.getDay();
    また、SuperScript序数のために変数を追加します(第nd rd th)ので、我々は2月27日第3の第2の第1と言うことができます
    var endOfDay;
    現在、GetMonthは0から11まで値を返します、そして、我々がこのようにする「行進」のようなストリング変数にそれを翻訳する必要があります
    if (months == 0){months = "January"};
if (months == 1){months = "February"};
if (months == 2){months = "March"};
if (months == 3){months = "April"};
if (months == 4){months = "May"};
if (months == 5){months = "June"};
if (months == 6){months = "July"};
if (months == 7){months = "August"};
if (months == 8){months = "September"};
if (months == 9){months = "October"};
if (months == 10){months = "November"};
if (months == 11){months = "December"};
    GetDayが0から6までの値を返すので、我々は同じことをします、そして、我々は金曜日のようにそれをストリングに変える必要があります
    if (day == 0){day = "Sunday"};
if (day == 1){day = "Monday"};
if (day == 2){day = "Tuesday"};
if (day == 3){day = "Wendesday"};
if (day == 4){day = "Thursday"};
if (day == 5){day = "Friday"};
if (day == 6){day = "Saturday"};
    そして、現在、SuperScript序数のために、我々は1 , 21 , 31のために2 , 22 NDのためにSTであるためにセットしなければなりません、そして、残りのTHのために、そして、残りのTHのために、そして、それが21日に見えるように、日変数にそれを追加します
    if (days == 1){endOfDay = "st"};
if (days == 2){endOfDay = "nd"};
if (days == 3){endOfDay = "rd"};
if (days == 21){endOfDay = "st"};
if (days == 22){endOfDay = "nd"};
if (days == 23){endOfDay = "rd"};
if (days == 31){endOfDay = "st"};
if (days > 3 || days < 21 || days > 23){endOfDay = "th"};
days += endOfDay;
    そして最後に、私たちは、私たちが望むように、私たちが望むようなものを印刷する必要があります
    document.getElementById("print-date").innerHTML = day + ", " + months + " " + days + ", " + years;
    HTMLの本体要素にスクリプトを追加するのを忘れないでください、そして、あなたが再ロードするとき、あなたは今日の日付を持ちます.
    それはまだ醜いですが、最初に心配しないでください我々はすべての作業を行う必要があります後にスタイリングが来る.

    別の壁紙を介してサイクル


    今すぐこれを行うには、あなたの時間に移動する必要があります簡単です.UpdateClockのJSファイルを次のように行います.
    その日の時間を見るために変数を追加します
    var time = new Date().getHours();
    では、画像にパスを保持する文字列変数イメージを追加しましょう
    var image = "images/day.jpg";
    現在、それは日にセットされます.しかし、以下のいずれかの文が満たされた後に変更されるので、それは重要ではありません
    if (time > 6 && time < 12)
    {
        image = "images/morning.jpg";
    }
    else if (time > 12 && time < 17)
    {
        image = "images/day.jpg";
    }
    else if (time > 17 && time < 21)
    {
        image = "images/evening.jpg";
    }
    else if (time > 21 && time > 6){
        image = "images/night.jpg";
    }
    今、あなたは朝とフォルダーのイメージを持っていることを確認します.jpg日.イブニング.JPGと夜.JPGとこれは動作します
    その後、HTMLに壁紙IDを割り当てる必要があります
    wallpaper.src = image;
    今、この関数は、すべての2番目の覚えているので、自動的に更新されますか?
    それで、それがどのように見えるかについて見させてください.
    オー..はいすべては私たちは何を待っているCSSを欠落して中断します.

    5 . UI


    今この部分は、私はあなたがそれを好きなようにあなたを奨励する最も簡単ですが、私はちょうど屈折のために私のコードを提供し、正しい方向にいくつかの初期の助けのために.
    この部分は、ウェブサイトをスクロール不能にすると、それは素晴らしいフォントを追加するでしょう、それは英雄のdivを中心にし、背景をきれいに適合させる
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

/* not allow scrolling */
html {
    overflow: hidden;
}

body {
    margin: 0;
    font-family: Roboto;
}

img {
    width: 100%;
    height: 100%;
}

.hero {
    text-align: center;
}
    今、この部分(最終的な部分)は、テキストがinfrontに来るようになります.そして、それが際立っているようにするためにより少しより大きな境界線を若干のぼかしと良い影響を加えさせます.
    .hero h3 {
    padding: 0.6rem;
    font-size: 3rem;
    position: absolute;
    backdrop-filter: blur(3px);
    letter-spacing: 0.1rem;
    color: rgb(250, 245, 245);
    border-radius: 2rem;
    border: 0.15rem solid rgb(184, 182, 182);
    top: 11rem;
    left: 22%;
    right: 22%;
    width: 56%;
}

.hero h2 {
    position: absolute;
    font-size: 3.5rem;
    letter-spacing: 0.1rem;
    color: rgb(243, 235, 235);
    backdrop-filter: blur(30px);
    border: 0.3rem solid rgb(184, 182, 182);
    border-radius: 1rem;
    top: 18rem;
    left: 35%;
    right: 35%;
    width: 30%;
}

    最終製品



    写真とevrythingを使用して全体のプロジェクトはGitHub
    (あなたが気に入ったとしたら、それをスターにしてください.

    読書ありがとう


    どうもありがとう.
    安全です.
    ジョーン
    今日 (2016/07/09)時点でのPHPフレームワークの人気度
    jquery tabsは最も簡略化されたインスタンスを使用する