js实现时钟效果+年月日

最新推荐文章于 2022-02-27 14:41:48 发布

dongciqiu0026

最新推荐文章于 2022-02-27 14:41:48 发布

阅读量493

点赞数

原文链接：http://www.cnblogs.com/superCwen/p/9827043.html

版权

　　实现原理：通过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>

效果图

转载于:https://www.cnblogs.com/superCwen/p/9827043.html

dongciqiu0026

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现时钟效果+年月日

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

扫一扫