午夜成人黄片,青娱乐精品,中文字幕一二三区,一道本久久,后入视频在线观看,精品无码一区二区三区色噜噜,亚洲黄色免费,国产三级日韩

作者 | 楊小愛(ài)

寫(xiě)在前面

關(guān)于時(shí)鐘的效果，我們前面剛剛寫(xiě)過(guò)一期，《【每日一練】304—用 HTML、CSS和JavaScript 實(shí)現(xiàn)一款時(shí)鐘效果》那是一個(gè)圓形鐘表的效果，今天我們?cè)賮?lái)寫(xiě)一款，這個(gè)風(fēng)格比較簡(jiǎn)易，就是純數(shù)字時(shí)鐘，具體效果如下：

HTML代碼：

      
        
          <!DOCTYPE html>
        
      
      
        
          <html>
        
      
      
            <head>
      
      
                <title>【每日一練】第306練開(kāi)啟</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);

寫(xiě)在最后

以上就是每日一練的全部?jī)?nèi)容，希望今天的小練習(xí)對(duì)你有用，如果你覺(jué)得有幫助的話(huà)，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開(kāi)發(fā)的朋友，也許能夠幫助到他。

我是楊小愛(ài)，我們明天見(jiàn)。

推薦閱讀

【每日一練】01~100練大合集匯總

【每日一練】01~200練大合集匯總

【每日一練】01~300+大合集匯總

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)

【每日一練】306—HTML、CSS和JS實(shí)現(xiàn)一款簡(jiǎn)易風(fēng)時(shí)鐘效果

【每日一練】306—HTML、CSS和JS實(shí)現(xiàn)一款簡(jiǎn)易風(fēng)時(shí)鐘效果