【每日一练】306—HTML、CSS和JS实现一款简易风时钟效果-技术圈

作者 | 杨小爱

写在前面

关于时钟的效果，我们前面刚刚写过一期，《【每日一练】304—用 HTML、CSS和JavaScript 实现一款时钟效果》那是一个圆形钟表的效果，今天我们再来写一款，这个风格比较简易，就是纯数字时钟，具体效果如下：

HTML代码：

      
        
          <!DOCTYPE html>
        
      
      
        
          <html>
        
      
      
            <head>
      
      
                <title>【每日一练】第306练开启</title>
      
      
                <link rel="stylesheet" href="306.css">
      
      
            </head>
      
      
            <body>
      
      
                <div class="container">
      
      
                    <div class="clock">
      
      
                        <div id="Date">Monday 26 September 2023</div>
      
      
        
          

      
      
                        <ul>
      
      
                        <li id="hours">05</li>
      
      
                            <li id="point">:</li>
      
      
                            <li id="min">20</li>
      
      
                            <li id="point">:</li>
      
      
                            <li id="sec">30</li>
      
      
                        </ul>
      
      
                    </div>
      
      
                </div>
      
      
                <script src="306.js"></script>
      
      
            </body>
      
      
        
          </html>

CSS代码：

      
         *{
      
      
                        margin: 0;
      
      
                        padding: 0;
      
      
                    }
      
      
                    body{
      
      
                        height: 100vh;
      
      
                        display: flex;
      
      
                        align-items: center;
      
      
                        justify-content: center;
      
      
                        font:bold 12px Arial, Helvetica, sans-serif;
      
      
                        background-color: black;
      
      
                    }
      
      
                    .clock{
      
      
                        border: 1px solid #606060;
      
      
                        color: white;
      
      
                        padding: 40px;
      
      
                        border-radius: 10px;
      
      
                        background-color: #222222;
      
      
                    }
      
      
                    #Date{
      
      
                        font-size: 20px !important;
      
      
                        text-align: center;
      
      
                    }
      
      
                    .clock ul{
      
      
                        list-style: none;
      
      
                        display: flex;
      
      
                        font-size: 90px;
      
      
                        gap: 15px;
      
      
                    }

JS代码：

      
        function clock(){
      
      
      
            var monthNames = [ "January", "February", "March", "April", "May", "June",
      
      
            "July", "August", "September", "October", "November", "December" ]; 
      
      
            var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
      
      
        
          

      
      
            var today = new Date();
      
      
        
          

      
      
            document.getElementById('Date').innerHTML = (dayNames[today.getDay()] + " " + 
      
      
            today.getDate() + ' ' + monthNames[today.getMonth()] + ' ' +today.getFullYear());
      
      
        
          

      
      
      
            var h = today.getHours();
      
      
            var m = today.getMinutes();
      
      
            var s = today.getSeconds();
      
      
            var day = h<11 ? 'AM': 'PM';
      
      
        
          

      
      
            h = h<10? '0'+h: h;
      
      
            m = m<10? '0'+m: m;
      
      
            s = s<10? '0'+s: s;               
      
      
        
          

      
      
            document.getElementById('hours').innerHTML = h;
      
      
            document.getElementById('min').innerHTML = m;
      
      
            document.getElementById('sec').innerHTML = s;
      
      
        
          

      
      
        }var inter = setInterval(clock,400);

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

推荐阅读

【每日一练】01~100练大合集汇总

【每日一练】01~200练大合集汇总

【每日一练】01~300+大合集汇总

学习更多技能

请点击下方公众号