> 웹 프론트엔드 > JS 튜토리얼 > JS로 시계 만들기

JS로 시계 만들기

不言
풀어 주다: 2018-04-10 11:52:19
원래의
2013명이 탐색했습니다.

이 글은 JS를 사용하여 시계를 만드는 코드를 소개합니다. 필요한 친구들이 참고할 수 있습니다


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="系统CSS初始化.css">
    <style>       ul{           height: 100px;           width: 600px;           margin: 200px auto;
       }        img{            float:left;
        }        span{            font-size: 100px;            float: left;            display: block;            position: relative;            bottom: 20px;
        }
    </style>
    <script>        window.onload=function ()
        {            function setDoub(n) {                if(n<10)
                {
                    n=&#39;0&#39;+n;
                }                else                {
                    n=&#39;&#39;+n;
                }                return n;
            }            var aImg=document.getElementsByTagName("img");            function tick() {                var date=new Date();                var str=setDoub(date.getHours())+setDoub(date.getMinutes())+setDoub(date.getSeconds());                for(var i=0;i<aImg.length;i++)
                {                    aImg[i].src="images/"+str[i]+".png";
                }
            }           tick();            setInterval(tick,1000)
        }
    </script>
</head>
<body>
    <ul id="ul1">
    <img src="images/0.png">
    <img src="images/0.png">
        <span>:</span>
    <img src="images/0.png">
    <img src="images/0.png">
        <span>:</span>
    <img src="images/0.png">
    <img src="images/0.png">
    </ul>

</body>
</html>
로그인 후 복사

위 내용은 JS로 시계 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿