JavaScript에서 setInterval 연습 사용하기
javascript의 setInterval과 jQuery를 사용하여 60초 타이머 프로그램 만들기
배경과 텍스트 색상을 10초 간격으로 변경합니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>real time</title>
<style>
body{
margin: 100px auto;
line-height: 180px;
font-size: 18px;
font-weight: bold;
background-color:black;
}
</style>
</head>
<body>
<div id="count"></div>
<script>
function foo(x) {
return (x < 10) ? '0' + x : x; }
function clock(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
var t = foo(s);
if(s>=0 && s<=9){
document.querySelector("div").style.backgroundColor = "red";
document.querySelector("div").style.color = "white";
}else if(s>=9 && s<=19){
document.querySelector("div").style.backgroundColor = "yellow";
document.querySelector("div").style.color = "blue";
}else if(s>=19 && s<=29){
document.querySelector("div").style.backgroundColor = "green";
document.querySelector("div").style.color = "white";
}else if(s>=29 && s<=39){
document.querySelector("div").style.backgroundColor = "white";
document.querySelector("div").style.color = "black";
}else if(s>=39 && s<=49){
document.querySelector("div").style.backgroundColor = "darkorchid";
document.querySelector("div").style.color = "yellow";
}else if(s>=49 && s<=59){
document.querySelector("div").style.backgroundColor = "blue";
document.querySelector("div").style.color = "orange";
}else{
document.querySelector("div").style.backgroundColor = "black";
document.querySelector("div").style.color = "orange";
document.querySelector("div").fontSize = "100px";
}
document.querySelector("div").innerHTML = t;
document.querySelector("div").style.fontSize = "150px";
document.querySelector("div").style.textAlign = "center";
document.querySelector("div").style.padding = "150px";
}
setInterval(clock, 1000);
</script>
</body>
</html>
Reference
이 문제에 관하여(JavaScript에서 setInterval 연습 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ko8@github/items/ae5cfff109f2e234493a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
