【每日一练】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+大合集汇总

学习更多技能

请点击下方公众号