JavaScript 3.0～3.3

50877 ワード
テキストリンク
3.0
htmlとjavascriptにクラス名を書き込む方法
cssとjavascriptで同じ名前を使用する場合は、
「css-clock」「js-clock」これでいい!
現在の時間を空にする
html
<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>
    <script src="clock.js"></script>
  </body>
</html>
javascript
const clockContainer = document.querySelector(".js-clock"),
  clockTitle = clockContainer.querySelector("h1");

function getTime() {
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  const seconds = date.getSeconds();
  clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}

function init() {
  getTime();
}

init();
結果

現在の時刻が表示されますが、問題は更新を続行する必要があることです(時間が更新されていません)
私たちが望んでいるのはそうではありません.
=>次のレッスンではsetlntervalが表示されます
3.1
setlnterval()は、2つのパラメータ値(パラメータ)を受け入れ、最初のパラメータは関数です.
2番目のパラメータの実行間隔
const clockContainer = document.querySelector(".js-clock"),
  clockTitle = clockContainer.querySelector("h1");

function getTime() {
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  const seconds = date.getSeconds();
  clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}

function init() {
  getTime();
  setInterval(getTime, 1000);
}

init();
結果

よく動いている様子.
しかし問題は.
画像を挿入
ろうそくはこのように現れたのではなく1.2のように現れたのですみっともない
//10초 이하일때 앞 조건에맞으면(?) 0을 포함해서 초를 세고, 아니면(:) 그냥 초를 세라.
clockTitle.innerText = `${hours}:${minutes}:${
    seconds < 10 ? `0${seconds}` : seconds
  }`;
条件文真実の時の結果:虚偽の時の結果
点,分,秒はいずれも01,02のように適用される.

  clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${
    seconds < 10 ? `0${seconds}` : seconds
  }`;
結果
画像を挿入
localstorage:ユーザーのパソコンに小さな情報を保存する方法
html
<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>
    <form class="js-form form">
      <input type="text" placeholder="what is your name?" />
    </form>
    <h4 class="js-greetings gretting"></h4>
    <script src="clock.js"></script>
    <script src="gretting.js"></script>
  </body>
</html>
css
body {
  font-family: sans-serif;
}

.form,
.grettings {
  display: none;
}

.showing {
  display: block;
}
javascript
const form = document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser",
    SHOWING_CN = "showing";

function paintGreeting(text) {
    form.classList.remove(SHOWING_CN);
    greeting.classList.add();
    greeting.innerText = `Hello ${text}`;
}
function loadName(){
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null){
        //유저가 없는 경우

    } else {
        //유저가 있는 경우
        paintGreeting(currentUser);

    }

}


function init(){
    loadName();
}

init();
結果

3.3
<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>
    <form class="js-form form">
      <input type="text" placeholder="what is your name?" />
    </form>
    <h4 class="js-greetings gretting"></h4>
    <script src="clock.js"></script>
    <script src="gretting.js"></script>
  </body>
</html>

その状態で、値を入力した後、enterを押して最初の画面に戻るのを止めたいです.
const form = document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser",
    SHOWING_CN = "showing";


//입력하고 엔터누르면 새로고침(입력값 저장x)되는거 막아주기
function handleSubmit(event){
    event.preventDefault();
}

function askForName(){
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit",handleSubmit);
}

function paintGreeting(text) {
    form.classList.remove(SHOWING_CN);
    greeting.classList.add();
    greeting.innerText = `Hello ${text}`;
}
function loadName(){
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null){
        //유저가 없는 경우
        askForName();

    } else {
        //유저가 있는 경우
        paintGreeting(currentUser);

    }

}


function init(){
    loadName();
}

init();
結果
Enterキーを押していますが、価格が見えます.
function handleSubmit(event){
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
}

問題はリフレッシュすると私のことを覚えていないことです.(hello入力内容)が消えます.保存されていないからです.
名前をロードするためにプログラミングされており、コードを編集して保存したことはありません.
function saveName(text){
    localStorage.setItem(USER_LS, text);
}


//입력하고 엔터누르면 새로고침(입력값 저장x)되는거 막아주기
function handleSubmit(event){
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
    saveName(currentValue);
}
結果

最終JavaScript
const form = document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser",
    SHOWING_CN = "showing";

function saveName(text){
    localStorage.setItem(USER_LS, text);
}


//입력하고 엔터누르면 새로고침(입력값 저장x)되는거 막아주기
function handleSubmit(event){
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
    saveName(currentValue);
}

function askForName(){
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit",handleSubmit);
}

function paintGreeting(text) {
    form.classList.remove(SHOWING_CN);
    greeting.classList.add();
    greeting.innerText = `Hello ${text}`;
}
function loadName(){
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null){
        //유저가 없는 경우
        askForName();

    } else {
        //유저가 있는 경우
        paintGreeting(currentUser);

    }

}


function init(){
    loadName();
}

init();
ブートセットの作成|パリティジェネレータ
自己常用sql整理バックアップ