<body>
<a href="https://www.youtube.com/watch?v=IhjrtGdtaxI" target="_blank">
<img src="./cat.png" alt="">
</a>
<input type="button" class="start" value="cat_start" onclick="
start();">
<input type="button" class="stop" value="cat_stop" onclick="
stop();">
</body> var target = document.querySelector('body')
function start () {
timer = setInterval (
function () {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
target.style.backgroundColor = "#"+randomColor;
} ,1000);
}
function stop () {
clearInterval(timer);
target.style.backgroundColor = 'white';
}generate a random hex color:
var randomColor = Math.floor(Math.random()*16777215).toSpring(16);
0부터 16777215사이의 랜덤 넘버를 생성하고,
toString method는 이 랜덤 넘버를 hex(16진수)로 바꾼다.
컬러 코드 형식을 #ffffff로 쓸 것이기 때문에 hex가 필요.
toString() 은 문자열을 반환하는 object의 대표적인 방법
Math.floor() : 소수점 이하를 버림한다.
Math.ceil() : 소수점 이하를 올림한다.
Math.round() : 소수점 이하를 반올림한다.
Math.random() : 구간에서 근사적으로 균일한 부동소숫점 의사난수(정의된 범위내에서 무작위로 추출된 수)를 반환.
document.body.style.backgroundColor = "#"+randomColor;
배경색을 랜덤 색으로 바꿔줄 코드
setInterval(), clearInterval()
setInterval(function, milliseconds);
메소드는 지정된 시간 간격마다 지정된 기능을 반복하고자 할 때 사용, 특정 코드나 주어진 함수를 지정된 간격으로 호출.
1 second = 1000 milliseconds
clearInterval(intervalID)
출처: 링크텍스트
input {
background-color: black;
color: white;
}
img {
position: fixed;
top: 100px;
left: 470px;
}
.start {
position: fixed;
top: 520px;
left: 580px;
}
.stop {
position: fixed;
top: 520px;
left: 700px;
}고양이img와 button의 위치 배정 fixed해서 옮기는 거 말고 다른 방법도 고려해보기
개미J