js实现时钟效果+年月日

　　实现原理：通过js获取到系统时间，然后分别算出年，月，日，时，分，秒，然后拼接年月日，时分秒，然后通过定时器setInterval每过一秒去获取这些数据，这样就可以实现时钟的效果

<html>

<head>
<title></title>
</head>
    <style>
        
        #div1{
            
            font-size:28px;
            font-weight:bold;
        }
        
    </style>
    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            setInterval(function(){
                var date=new Date();
                var year=date.getFullYear();
                var month=date.getMonth()+1;
                var day=date.getDate();
                
                var hour=date.getHours();
                turnDate(hour);
                var min=date.getMinutes();
                turnDate(min);
                var sec=date.getSeconds();
                sec=turnDate(sec);
                oDiv1.innerHTML=year+"年"+month+"月"+day+"日"
                oDiv2.innerHTML=hour+":"+min+":"+sec
            },1000)
            
            function turnDate(date){
                if(date<10){
                    return date="0"+date
                }else{
                    return date
                }
            }
        }
        
        
    </script>
<body>
    <div id="div1">
        
    </div>
    <div id="div2">
        
    </div>
</body>

</html>

效果图

 

posted @ 2018-10-21 21:34  大C文  阅读(1615)  评论(0)    收藏  举报