jQuery实现一个简单的数字时钟

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_40969422/article/details/83239383

 <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>动态时钟</title>
  <style>
    p{
    font-family: "楷体";
    font-weight: bold;
    font-size: 30px;
    }
  </style>
 </head>
 <body style="background-color:#FFEFD5">
     <div style="border: 1px #B0C4DE solid;border-radius:10px;width: 500px;">
         <p>您好,欢迎使用网页时钟!</p>
         <p id="clock"></p>
     </div>
 </body>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript"></script>
 <script type="text/javascript">
//代码部分
$(document).ready(function(){
    setInterval(function(){
        $("#clock").html("");
        var date=new Date();
        var month,dates,hours,min,seconds;
        month=(date.getMonth()+1);
        dates=date.getDate();
        hours=date.getHours();
        min=date.getMinutes();
        seconds=date.getSeconds();
        if(month<10){
            month="0"+month;
        }
        if(dates<10){
            dates="0"+dates;
        }
        if(hours<10){
            hours="0"+hours;
        }
        if(min<10){
            min="0"+min;
        }
        if(seconds<10){
            seconds="0"+seconds;
        }
        week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
        var clocks=date.getFullYear()+"年"+month+"月"+dates+"日"+hours+":"+min+":"+seconds+" "+week[date.getDay()];
        $("#clock").append(clocks);
    },1000)
})
  </script>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_40969422/article/details/83239383