js setInterval sample

<!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

이 문제에 관하여(js setInterval sample), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/toke/articles/bf88a8de75b193

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다