仿百度时钟案例

<!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();
              // 获取时分秒
              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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容