js显示动态时间实现代码
发布时间：2015-06-21 编辑：jiaochengji.com
本文介绍了js显示动态时间的几个例子，有关js在页面上显示动态时间与星期等内容的方法，有需要的朋友参考下。
例子，js显示动态时间。
代码：
复制代码 代码示例:
<input id="showtime" readonly="readonly"/>
<script type="text/javascript">
function getnowtime() {
var now = new date();
document.getelementbyid("showtime").value = now.getfullyear() + "-"
+ (now.getmonth() + 1) + "-" + now.getdate();
document.getelementbyid("showtime").value += " " + now.gethours() + ":"
+ now.getminutes() + ":" + now.getseconds();
}
window.setinterval("getnowtime()", 1000);
</script>
<script type="text/javascript">
function getnowtime() {
var now = new date();
document.getelementbyid("showtime").value = now.getfullyear() + "-"
+ (now.getmonth() + 1) + "-" + now.getdate();
document.getelementbyid("showtime").value += " " + now.gethours() + ":"
+ now.getminutes() + ":" + now.getseconds();
}
window.setinterval("getnowtime()", 1000);
</script>
使用时间cookie
复制代码 代码示例:
<script type="text/javascript">
//定义变量
var connlabel="";
var connhour,connminute,connsecond;
//查找cookie
var conncookie=getcookie("conntime");//查找cookie
//解析cookie
conncookie=conncookie.replace(/[,'"]/g,"");//过滤双引号
connhour=conncookie.split(":")[0];
connminute=conncookie.split(":")[1];
connsecond=conncookie.split(":")[2];
//设置connlabel
if(connhour<10) connlabel="0"+connhour; else connlabel=connhour;
if(connminute<10) connlabel+=":0"+connminute; else connlabel+=":"+connminute;
if(connsecond<10) connlabel+=":0"+connsecond; else connlabel+=":"+connsecond;
timedcount();//调用函数
function timedcount() {
var use = new date();//连接计时
var uselabel="";
var hours=use.gethours()-connhour;
if(hours<0) hours=(24-connhour)+use.gethours() ; //22:58:21 00:01:01
if(use.getminutes()-connminute<0) hours-- ;
if(hours<10) uselabel="0"+hours;
else uselabel=hours;
var minutes=use.getminutes()-connminute;
if(minutes<0) minutes=(60-connminute)+use.getminutes();
if(use.getseconds()-connsecond<0) minutes--;
if(minutes<10) uselabel+=":0"+minutes;
else uselabel+=":"+minutes;
var seconds=use.getseconds()-connsecond;
if(seconds<0) seconds=(60-connsecond)+use.getseconds();
if(seconds<10) uselabel+=":0"+seconds;
else uselabel+=":"+seconds;
document.getelementbyid("usetime").innerhtml=uselabel;
settimeout("timedcount()",1000);
}
</script>
//定义变量
var connlabel="";
var connhour,connminute,connsecond;
//查找cookie
var conncookie=getcookie("conntime");//查找cookie
//解析cookie
conncookie=conncookie.replace(/[,'"]/g,"");//过滤双引号
connhour=conncookie.split(":")[0];
connminute=conncookie.split(":")[1];
connsecond=conncookie.split(":")[2];
//设置connlabel
if(connhour<10) connlabel="0"+connhour; else connlabel=connhour;
if(connminute<10) connlabel+=":0"+connminute; else connlabel+=":"+connminute;
if(connsecond<10) connlabel+=":0"+connsecond; else connlabel+=":"+connsecond;
timedcount();//调用函数
function timedcount() {
var use = new date();//连接计时
var uselabel="";
var hours=use.gethours()-connhour;
if(hours<0) hours=(24-connhour)+use.gethours() ; //22:58:21 00:01:01
if(use.getminutes()-connminute<0) hours-- ;
if(hours<10) uselabel="0"+hours;
else uselabel=hours;
var minutes=use.getminutes()-connminute;
if(minutes<0) minutes=(60-connminute)+use.getminutes();
if(use.getseconds()-connsecond<0) minutes--;
if(minutes<10) uselabel+=":0"+minutes;
else uselabel+=":"+minutes;
var seconds=use.getseconds()-connsecond;
if(seconds<0) seconds=(60-connsecond)+use.getseconds();
if(seconds<10) uselabel+=":0"+seconds;
else uselabel+=":"+seconds;
document.getelementbyid("usetime").innerhtml=uselabel;
settimeout("timedcount()",1000);
}
</script>
js动态显示当前日期，时间和星期。
代码：
当前时间：<div id="time"></div>
复制代码 代码示例:
function showtime() //显示时间的方法
{
document.getelementbyid('time').innerhtml=new date().tolocalestring()+' 星期'+'日一二三四五六'.charat(new date().getday());//显示服务器时间
}
setinterval("showtime()", "1000"); （教程集 www.jiaochengji.com 编辑整理）
{
document.getelementbyid('time').innerhtml=new date().tolocalestring()+' 星期'+'日一二三四五六'.charat(new date().getday());//显示服务器时间
}
setinterval("showtime()", "1000"); （教程集 www.jiaochengji.com 编辑整理）
如果你想改变显示时间字体的颜色可以这么做,以红色为例 ：
把：<div id="time">
修改为
<div id="time" style="color:red;">
<div id="time" style="display:inline; "></div>当然你还可以换为其它颜色，或其它样式都是可以的。
<div id="time" style="display:inline; "></div>当然你还可以换为其它颜色，或其它样式都是可以的。
名称：服务器 时钟（一次读取，实时显示）
功能 ：在客户端浏览器 上显示服务器端的时间 。
原理：
1，获取 服务端的日期时间。
2，根据客户端浏览器的时间可以得到服务器和客户端的时间差。
3，服务器的时钟 = 客户端的时钟（变化值）+ 时间差（固定值）
复制代码 代码示例:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>js动态显示时间</title>
</head>
<body>
当前时间：<div id="time"></div>
<script>
var xmlhttp = new activexobject("microsoft.xmlhttp");//创建xmlhttp对象
xmlhttp.open("head","http://www.beijing-time.org",false); //从哪个服务器上获取时间
xmlhttp.send(); //连接服务器
var offset = date.parse(xmlhttp.getresponseheader("date"));//获取标头中的时间
offset -= (new date).gettime(); //获取本地时间与服务器时间的间隔
function showtime() //显示时间的方法
{
var d = new date; //获取当前时间
d.settime(d.gettime()+offset); //通过服务器和本地的时间间隔获取当前服务器时间
document.getelementbyid('time').innerhtml=d.tolocalestring();//显示服务器时间
}
setinterval("showtime()", "1000");
</script>
</body>
</html>
<head>
<title>js动态显示时间</title>
</head>
<body>
当前时间：<div id="time"></div>
<script>
var xmlhttp = new activexobject("microsoft.xmlhttp");//创建xmlhttp对象
xmlhttp.open("head","http://www.beijing-time.org",false); //从哪个服务器上获取时间
xmlhttp.send(); //连接服务器
var offset = date.parse(xmlhttp.getresponseheader("date"));//获取标头中的时间
offset -= (new date).gettime(); //获取本地时间与服务器时间的间隔
function showtime() //显示时间的方法
{
var d = new date; //获取当前时间
d.settime(d.gettime()+offset); //通过服务器和本地的时间间隔获取当前服务器时间
document.getelementbyid('time').innerhtml=d.tolocalestring();//显示服务器时间
}
setinterval("showtime()", "1000");
</script>
</body>
</html>
js获取的是用户客户端时间，只要改变本地时间，相应的也将改变。
这点不符合时间操作。
正确做法：获取服务器端时间，这样无论怎么改变本地时间，其不会变。
复制代码 代码示例:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk"/>
<title>js显示动态时间_www.jiaochengji.com</title>
<script type="text/javascript">
get=function (id){return document.getelementbyid(id)}
if(document.all){
window.xmlhttprequest=function(){
var get=['microsoft.xmlhttp','msxml2.xmlhttp'];
for(var i=0;i<get.length;i++){try{return new activexobject(get[i])}catch(e){}};
};
}
webdate=function(fn){
var htime=new xmlhttprequest();
htime.onreadystatechange=function(){htime.readystate==4&&(fn(new date(htime.getresponseheader('date'))))};
htime.open('head', '/?_='+(-new date));
htime.send(null);
}
window.time=new date();
targettime=new date();
time2string=function (t){
with(t)return [getfullyear(),'年'
,('0'+(getmonth()+1)).slice(-2),'月'
,('0'+getdate()).slice(-2),'日 '
,('0'+gethours()).slice(-2),': '
,('0'+getminutes()).slice(-2),': '
,('0'+getseconds()).slice(-2)].join('')
}
int2time=function (m){
m-=(d=parseint(m/86400000))*86400000;
m-=(h=parseint(m/3600000))*3600000;
s=parseint((m-=(m=parseint(m/60000))*60000)/1000);
return d+'天'+h+'小时'+m+'分'+s+'秒'
}
setinterval(function (){ （教程集 www.jiaochengji.com 编辑整理）
webdate(function (webtime){
get('web').innerhtml=time2string(time=webtime);
})
get('locale').innerhtml=time2string(new date);
get('time').innerhtml=int2time(targettime-time);
if ((targettime-time)<0) {
get('time').innerhtml = 'game over';
}
},1000)
</script>
</head>
<body>
设定时间：2012年12月31日0时0分0秒<br>
服务器时间:<span id='web'>loading...</span><br>
本地时间:<span id="locale">loading...</span><br>
倒计时时间:<span id="time">loading...</span>
<script type="text/javascript" charset="utf-8">
targettime=new date(2012,12,31,00,00,00);
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk"/>
<title>js显示动态时间_www.jiaochengji.com</title>
<script type="text/javascript">
get=function (id){return document.getelementbyid(id)}
if(document.all){
window.xmlhttprequest=function(){
var get=['microsoft.xmlhttp','msxml2.xmlhttp'];
for(var i=0;i<get.length;i++){try{return new activexobject(get[i])}catch(e){}};
};
}
webdate=function(fn){
var htime=new xmlhttprequest();
htime.onreadystatechange=function(){htime.readystate==4&&(fn(new date(htime.getresponseheader('date'))))};
htime.open('head', '/?_='+(-new date));
htime.send(null);
}
window.time=new date();
targettime=new date();
time2string=function (t){
with(t)return [getfullyear(),'年'
,('0'+(getmonth()+1)).slice(-2),'月'
,('0'+getdate()).slice(-2),'日 '
,('0'+gethours()).slice(-2),': '
,('0'+getminutes()).slice(-2),': '
,('0'+getseconds()).slice(-2)].join('')
}
int2time=function (m){
m-=(d=parseint(m/86400000))*86400000;
m-=(h=parseint(m/3600000))*3600000;
s=parseint((m-=(m=parseint(m/60000))*60000)/1000);
return d+'天'+h+'小时'+m+'分'+s+'秒'
}
setinterval(function (){ （教程集 www.jiaochengji.com 编辑整理）
webdate(function (webtime){
get('web').innerhtml=time2string(time=webtime);
})
get('locale').innerhtml=time2string(new date);
get('time').innerhtml=int2time(targettime-time);
if ((targettime-time)<0) {
get('time').innerhtml = 'game over';
}
},1000)
</script>
</head>
<body>
设定时间：2012年12月31日0时0分0秒<br>
服务器时间:<span id='web'>loading...</span><br>
本地时间:<span id="locale">loading...</span><br>
倒计时时间:<span id="time">loading...</span>
<script type="text/javascript" charset="utf-8">
targettime=new date(2012,12,31,00,00,00);
</script>
</body>
</html>
您可能感兴趣的文章：
javascript页面上动态时间显示实例
JS动态显示当前时间(12/24小时制)的代码
js动态时间显示实例二则
JS 动态显示时间 精确到秒 显示第几周的代码
获取服务器时间并动态显示在页面中的php与js代码
js动态显示时间(改进版)
Js页面时间实时更新的实现代码
js动态显示与隐藏层的简单例子
javascript实现MD5加密
js状态栏打字机效果
上一篇：javascript页面上动态时间显示实例
下一篇：js动态时间显示实例二则
[关闭]