DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> jquery顯示當前時間詳細信息
jquery顯示當前時間詳細信息
編輯:JQuery常見問題     

啥也別說,先看效果:



接著看源代碼:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<title>當期時間-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<style type="text/css">
.date{height:100px;line-height:100px;margin:0 auto;font-family:Arial, Helvetica, sans-serif;font-size:24px;
border:solid 1px #ccc;box-shadow:0 0 3px rgba(0,0,0,0.3) inset;border-radius:5px;text-shadow:1px 1px 2px rgba(0,0,0,0.3);}
.date strong{padding:0 10px;display:inline-block;height:100px;border-right:solid 1px #ccc;}
</style>
</head>
<body>
<h1>js簡單的獲取當前日期和時間</h1>
<p class="date">
<strong id="Y"></strong>
<strong id="MH"></strong>
<strong id="td_keleyi_com"></strong>
<strong id="D"></strong>
<strong id="H"></strong>
<strong id="M"></strong>
<strong id="S"></strong>
</p>
<script type="text/javascript">
$(document).ready(function(){

setInterval(showTime, 1000);
function timer(obj,txt){
obj.text(txt);
}
function showTime(){
var today = new Date();
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
var y=today.getFullYear()+"年";
var month=today.getMonth()+"月";
var td_keleyi_com=today.getDate()+"日";
var d=weekday[today.getDay()];
var h=today.getHours()+":";
var m=today.getMinutes()+":";
var s=today.getSeconds();
timer($("#Y"),y);
timer($("#MH"),month);
timer($("#td_kel"+"eyi_com"),td_keleyi_com);
timer($("#D"),d);
timer($("#H"),h);
timer($("#M"),m);
timer($("#S"),s);
}
})
</script>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved