在网页中动态显示时间，需要先获取时间，然后更新时间，因此需要使用以下两个函数
网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了襄城免费建站欢迎大家使用！
获取时间
var myDate=new Date(); // Date 对象用于处理日期和时间
利用定时器更新时间
setTimeout(code,millisec); // 在指定的毫秒数后调用函数
实例演示如下
创建Html元素
div class="box"
span利用javascript定时器显示时间/spanbr
div class="content"
span id="clock"/span
/div
/div
设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
编写jquery代码
// 定义获取和更新时间的函数
function showTime() {
var curTime = new Date();
$("#clock").html(curTime.toLocaleString());
setTimeout("showTime()", 1000);
}
// 页面加载完成后执行上面的自定义函数
$(function(){
showTime()
})
观察效果
某一个时刻的截图
过几秒后的截图
在层上面建立个class或name或其他字段。其中的值就为时间。
让后点击的时候
function showTime(obj){
t=$(obj).attr("class");
$("#date").val(t);
}
在输入框中加入单击事件
input id="date" onclick='showTime(this)' type="text" /
这样就可以了。
div id="nowTime"/div
script type="text/javascript" src="jquery.js"/script
script type="text/javascript"
function current(){
var d=new Date(),str='';
str +=d.getFullYear()+'年'; //获取当前年份
str +=d.getMonth()+1+'月'; //获取当前月份（0——11）
//str +=d.getDate()+'日';
//str +=d.getHours()+'时';
//str +=d.getMinutes()+'分';
//str +=d.getSeconds()+'秒';
return str;
}
setInterval(function(){
$("#nowTime").html(current)
},1000); //显示时分秒，并且秒数可以跳动
//$("#nowTime").html(current);
/script
function nowTime(ev,type){
/*
* ev:显示时间的元素
* type:时间显示模式.若传入12则为12小时制,不传入则为24小时制
*/
//年月日时分秒
var Y,M,D,W,H,I,S;
//月日时分秒为单位时前面补零
function fillZero(v){
if(v10){v=0+v;}
return v;
}
(function(){
var d=new Date();
var Week=[星期天,星期一,星期二,星期三,星期四,星期五,星期六];
Y=d.getFullYear();
M=fillZero(d.getMonth()+1);
D=fillZero(d.getDate());
W=Week[d.getDay()];
H=fillZero(d.getHours());
I=fillZero(d.getMinutes());
S=fillZero(d.getSeconds());
//12小时制显示模式
if(type type==12){
//若要显示更多时间类型诸如中午凌晨可在下面添加判断
if(H=12){
H=上午 +H;
}else if(H12 H24){
H-=12;
H=下午 +fillZero(H);
}else if(H==24){
H=下午 00;
}
}
ev.innerHTML=Y+年+M+月+D+日 + +W+ +H+:+I+:+S;
//每秒更新时间
setTimeout(arguments.callee,1000);
})();
}
如下：
一、引入jquery
二、HTML代码
三、js代码
1）引入js代码
2）下面是完整的js代码
