JavaScriptのストップウォッチを作成する初心者の試み.

10490 ワード
100daysofcode codenewbie sideprojects javascript テキストリンク

免責事項


私はまだ技術に非常に新しいので、私は何か間違って取得する場合親切に私を修正し、私を改善することがありますリソースを共有してください.
私は、私が私のブートキャンプの1週からワークショップのうちの1つを改正するのを手伝った側プロジェクトに取り組むことに決めました.

テックスタック

  • ジャバスクリプト
  • CSS
  • HTML
  • ギタブ
  • ネットリファイ

    • デザインと概念創造


    ストップウォッチが欲しいものをデザインし始めたFigma , 私は次のワイヤーフレーム/デザインを作成しました.

    ボイラプレート


    私が目的を達成した後に、私は私の基本的なボイラー板を作成することから始めました:
  • インデックス.HTML
  • 日付.JS(私はストップウォッチJSに改名)
  • ストップウォッチ.CSS
  • createElement .js
    • 私はmain-container , header and timer-container セクション.
    タイマーとしてストップウォッチを参照してください.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"
      rel="stylesheet"
    />
    <title>Stop Timer</title>
    <link rel="stylesheet" href="stopwatch.css" />
    <script defer type="module" src="stopwatch.js"></script>
  </head>
  <body>
    <section class="main-container">
      <header id="heading"></header>
      <div id="timer-container"></div>
    </section>
  </body>
</html>

    抽象化。createElement ()


    それから、create element関数を作成しh HTML用.
    次のワークショップでこの方法を行うことができます.
    https://github.com/oliverjam/learn-dom-rendering
    h ()関数を作成した後、stopwatch.js h ()関数を使用してDOMに追加し、タイマーコンテナ部に追加します.
    エクスポートデフォルトを使用してストップウォッチにh ()関数をエクスポートしました.jsscript tagにモジュールに等しい型を与えることを忘れないでください.type=module ) JavaScriptは、コードを接続するモジュールを作成して使用していることを知っています.
    私は、私がものをつくるためにより長いルートをとっているように見えるかもしれないと理解します、しかし、私が上でリンクされるワークショップで教えられる仕事を実行しようとしているという考慮を考慮に入れてください.

    要素の生成とレンダリング


    それから私はstopwatch() ファンクションstopwatch.js h ()関数をcreateElement.js 3 .それから個々の要素を保持する変数を作成し、それらの要素をtimerContainer ( 23行目)変数を使用し、必要なタイマコンテナに追加してレンダリングしました.querySelector 6 .

    これらの要素をレンダリングした後、私のストップウォッチは以下のようになりました.

    アクセシビリティとスペーシング


    私は、私がどこでどのくらい遠くにコンテナが広がるかを視覚的に決定することができるように、私のスペーシングを理解するために、境界線を使います.
    私も、少しの緑の色を少しずつ⇒ #灯台が対照を旗をつけたので、6 D 9 B 4 Dはサイトをよりアクセス可能にするために.あなたはクロムdevのツールで灯台にアクセスすることができますし、どのように“アクセス可能な”あなたのサイトは、レポートを提供します.色が十分なコントラストを持つまで、スタイルセクションのdevツールのコントラストを変更することもできます.
    検査する⇒ 元素⇒ スタイル⇒ * コントラスト比が正しいとなるまで、検査したい色を変更する要素をクリックします

    Image Source
    私は完全にボタンを忘れてしまったので、両方のボタンとページの見出しを作成し、レンダリングに戻った.


    ボタンを作成した後、私のストップウォッチはこのように見えた

    だから今私のアプリはかなり機能的ではなかった.
    私の次のステップは、私がガイダンスのためにYouTubeチュートリアルを使用した時間を交互にする機能を作成することでした.

    時間変数


    我々が必要とする関数を作成する前に、秒、分、時間(秒、分、HR)の変数を作成し、それらをゼロに設定する必要があります.

    starttime ()関数


    私は増加秒、分、時間を可能にする関数を作成することから始めました.秒と分のif文の条件は、それが59未満だった場合、指定されたカウンタをインクリメントしますが、より多くの場合、そのカウントは0に設定され、より高い時間カウントがインクリメントされます.
    それで、それが59秒(00 : 00 : 59)であるならば、それは1分後にあります、そして、minカウンタが0に戻る間、秒カウンタは0に戻ります.時間の条件は、それが24未満だった場合は増加しますが、時間が24時間を超えると、それは0にリセットする必要があります.
    if文のコードブロックでは、“00”が選択され、それらのテキスト内容が印刷機能で変更されました.

    print ()関数


    print関数は引数として値( val )をとります.値が9以下であるならば、値が指定された値「0」を返すという条件でif文を持ちます.それで、値がそうであるならば.3 secs then print ()は"03 "を返します.

    start () , reset ()およびpauses ()関数


    スタート・アンド・ポーズ機能についてgetElementById() そして、ボタンを開始するために無効になっていた(繰り返しクリックを防ぐために)またはアクティブなときにストップウォッチは、再起動することができます一時停止した.

    start ()


    開始関数では1000 ms＝1 sで1000 msに設定した.私は好奇心旺盛だったsetInterval() 実際にうまく動作する、よく私は主に設定された時間について興味があった.答え?名前の通りです)
    setInterval引数としてコールバック関数を受け取り、設定間隔の後にその関数を実行します.それで、あなたが1000 msを入力するならば、それは毎秒その機能を走らせます.
    我々の場合では、設定された時間変数を増やして、それらの値を我々の「00」要素に印刷して欲しいです.

    引数()関数


    pause ()関数ではclearInterval() setinterval変数t 議論として.

    reset ()関数


    リセット機能では、間隔をクリアし、時間変数(秒、min、hr)を0にリセットし、“00”H 2要素のテキスト内容を置き換える.

    これらの機能を完了した後、私はDomからボタンを選択する必要がありましたquerySelector() ) そして、start ()、put ()、reset ()関数を引数として「イベント」リスナーを作成します.


    いくつかのプログラマのエラーを修正した後、私は機能と同様にきれいだった作業ストップウォッチを持っていた.

    結果


    Click here to view my stopwatch.

    何かを逃したので、知らせてください.
    あなたは私のソースコードを見ることができますhere .
    Nexus 5X + Android N で「表示サイズ」設定を変更したときの画面解像度
    ubuntuグラフィックスの再起動が無効になりました