仿百度時(shí)鐘案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .time-box{
            width:400px;
            height:120px;
            background: linear-gradient(#0268C0, #6CAAE1);
            color:#fff;
        }
        .time{
            float:left;
            padding:0 20px;
            font-size:50px;
            line-height:120px;
        }
        .time span{
            font-size:30px;
        }
        .date{
            float:right;
            line-height: 30px;
            padding:30px 30px;
        }
        .date_week{
            font-size:25px;
        }
        .date_day{
            font-size:18px;
        }
    </style>
</head>
<body>
    <div class="time-box">
        <div class="time" id="time">
            13:15 <span>10</span>
        </div>
        <div class="date">
            <div class="date_week" id="date_week">星期二</div>
            <div class="date_day" id="date_day">2017年5月10日</div>
        </div>
    </div>
</body>
    
        <script>        
           function nowTime(){
              var date=new Date();
              // 獲取時(shí)分秒
              var h=date.getHours();
              var m=date.getMinutes();
              var s=date.getSeconds();

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

              var timeS=`${h}:${m}<span> ${s}</span>`;
              document.getElementById('time').innerHTML=timeS;

              // 獲取星期幾
              var week=date.getDay();
              switch(week){
                case 0:var xinqi="日";break;
                case 1:var xinqi="一";break;
                case 2:var xinqi="二";break;
                case 3:var xinqi="三";break;
                case 4:var xinqi="四";break;
                case 5:var xinqi="五";break;
                case 6:var xinqi="六";break;
              }
             document.getElementById('date_week').innerHTML="星期"+xinqi;
              // 獲取年月日
              var  year=date.getFullYear();
              var  month=date.getMonth()+1;
              var  day=date.getDate();
              var  dateS=`${year}年${month}月${day}日`;
              document.getElementById('date_day').innerHTML=dateS;
           }
            nowTime()
            setInterval(nowTime,1000);
     </script>


</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容