javascript day3

今日はJavaScriptを使って正式な仕事をしました.
さらに,先行学習の配列と乱数生成を利用して,よりダイナミックなウェブサイト作成を開始した.

위와 같이 보이는 사이트를 오늘의 과제로 제출했다. 어떻게 만들었을까??? html의 구조는 상대적으로 쉬운편이다.

上記のようにformとその内部label inputbuttonからなるhtml.ここで注意すべき点がある場合は、フォームにinputを入れるとsubmitとリフレッシュが自動的に行われます.これらの機能では,問題はjsを用いて調整できる.

1단계 각 태그들을 변수로 가지고 오기

const myForm = document.querySelector('form');
const getNum = document.querySelector('form .get-box #get-num');
const getGuess = document.querySelector('form .guess-box #get-guess');
const notice = document.querySelector('p');
const myWon = document.querySelector('span.won');
const myLost  = document.querySelector('span.lost');
2단계 form의 기본동작 멈춤 및 값 출력

function stopRefresh(mike) {
	mike.preventDefault();
  	
  	const ranNum = Math.floor(Math.random()*getNum.value);
	const myAnswer = getGuess.value;
  	notice.classList.remove('hidden');
  	notice.innerText = `you chose: ${myAnswer}, the machine chose ${ranNum}`
    	if (ranNum === myAnswer ) {
        	myWon.classList.remove('hidden');
          	myLost.classList.add('hidden');
        } else {
        	myLost.classList.remove('hidden');
          	myWon.classList.add('hidden');
        }
}


myForm.addEventListener('submit', stopRefresh);

上の画像とコードは私が今日やったコードの挑戦の内容です.
次の数値と日付objectを利用して時計を作る.
手順1:setIntervalについて

만약 우리가 어떤 함수를 실행시키고자 하며 해당 함수가 몇초마다 다시 한번 실행되길 원한다면 
어떻게 해야할까????
이러한 요구사항에 대한 해결책이 setInterval(func, delay);이다.

가령 우리가 localstorage에 저장한 값을 지속적으로 console영역에 나타나도록
하고자 한다면 어떻게 해야할까????

const var1 = localstorage.getItem('username');    
function inter() {
	console.log(var1);
}

setInterval(inter, 5000);

위와 같이 하면 된다. 

フェーズ2データオブジェクトの使用.
const date = new Date();
date.getDate()
date.getDay()
date.getHour()
date.getMinutes()
date.getSeconds()
date.getFullyear()
使い始めましょう.もし私たちがどんな時計を作りたいならどうすればいいですか???

function myOwnClock() {
	const myHour = Srting(date.getHour()).padStart(2,'0');
    	const myMin = String(date.getMinutes()).padStart(2,'0');
  	const mySec = String(date.getMinutes()).padstart(2,'0');
  
 	clock.innerText = `${myHour}:${myMin}:${mySec}`
}

setInterval(myOwnClock,1000);

手順3:背景画面の変更htmlを作成する
私たちはたまにあるページにログインすると、あるページが見え、一定の時間間隔でd画像が変わります.どのようにこれらのホームページを実现しますか???

1단계 : 이미지 모음 배열 

const images = ['a.jpeg','b.jpeg','c.jpeg'];

2단계 : html요소 생성

const img1 = document.createElement('img');


const bgimg = images[Math.floor(Math.random()*images.length)];

img1.src = `img/${bgimg}`

document.body.appendchild(img1);