首页 >>  正文

html显示时间, 求真正能用的

来源:www.zuowenzhai.com    作者:编辑   日期:2024-06-16
html如何显示时间

在网页中动态的显示日期时间,一般都是使用js来实现
网页中动态的显示系统日期时间 function startTime() { var today=new Date();//定义日期对象 var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年 var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年 var dd = today.getDate();//通过日期对象的getDate()方法返回年 var hh=today.getHours();//通过日期对象的getHours方法返回小时 var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟 var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒 // 如果分钟或小时的值小于10,则在其值前加0,比如如果时间是下午3点20分9秒的话,则显示15:20:09 MM=checkTime(MM); dd=checkTime(dd); mm=checkTime(mm); ss=checkTime(ss); var day; //用于保存星期(getDay()方法得到星期编号) if(today.getDay()==0) day = "星期日 " if(today.getDay()==1) day = "星期一 " if(today.getDay()==2) day = "星期二 " if(today.getDay()==3) day = "星期三 " if(today.getDay()==4) day = "星期四 " if(today.getDay()==5) day = "星期五 " if(today.getDay()==6) day = "星期六 " document.getElementById('nowDateTimeSpan').innerHTML=yyyy+"-"+MM +"-"+ dd +" " + hh+":"+mm+":"+ss+" " + day; setTimeout('startTime()',1000);//每一秒中重新加载startTime()方法 } function checkTime(i) { if (i 当前时间: 附上“倒计时”功能代码:
距离2013/01/01年还剩000天0000时0000分0000秒 function setTimer(){ var targetDate = document.getElementById("target").value; var taget = new Date(targetDate); var now = new Date(); var plus = taget.getTime() - now.getTime(); var day = parseInt(plus/1000/60/60/24); var hour = parseInt(plus/1000/60/60) - day * 24; var minute = parseInt(plus/1000/60) - parseInt(plus/1000/60/60)*60; var second = parseInt(plus/1000) - parseInt(plus/1000/60)*60; document.getElementById("p").innerHTML = "距离"+targetDate+"还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒"; } setInterval(setTimer,1000);

本程序根本提问者要求(利用函数)所设计,并且调试成功!
有什么不明白可以给我留言,请求加分!!


显示当前日期及时间



/*本段函数控制小时、分钟、秒数的双位表示*/
function checkTime(i) {
if (i<10)
{i="0"+i}
return i
}


var d = new Date() //新建一个Date对象
var year = d.getFullYear() //获取年份
var month = d.getMonth()+1 //获取月份
var day = d.getDate() //获取日期
var hour = d.getHours() //获取小时
var min = d.getMinutes() //获取分钟
var sec = d.getSeconds() //获取秒数
document.write(year+"-"+month+"-"+day+" "+checkTime(hour)+":"+checkTime(min)+":"+checkTime(sec))


我刚好教别人做了一个,有多种效果,最后面那个还能动态改CSS样式。

需要简单版本的,吱一声啊。记得采纳。


改了一下,给你共享吧,最上面那个就是你想要的效果吧:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#timeDiv0{
font-size:50px;
color: blue;
border: 1px solid red;
text-align: center;
}
#timeDiv4{
font-size: 100px;
color: red;
border: 2px solid blue;
width: 8em;
text-align: center;
}
#secondsEle, #hoursEle, #minutesEle{
opacity: 0;
transition: all .2s ease-in;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div id="timeDiv0"></div>
<div id="timeDiv"></div>
<div id="timeDiv2"></div>
<div id="timeDiv3"></div>
<div id="timeDiv4">
<span id="hoursEle"></span>:
<span id="minutesEle"></span>:
<span id="secondsEle"></span>
</div>
<script>
function setTimeDiv0(){
var timeDiv=document.getElementById("timeDiv0");
var curTime=new Date();
var hours=curTime.getHours().toString().length>1?curTime.getHours():"0"+curTime.getHours();
var minutes=curTime.getMinutes().toString().length>1?curTime.getMinutes():"0"+curTime.getMinutes();
var seconds=curTime.getSeconds().toString().length>1?curTime.getSeconds():"0"+curTime.getSeconds();
timeDiv.innerText= (curTime.getYear()+1900)+"年"+(curTime.getMonth()+1)+"月"+curTime.getDate()+"日"+hours+ ":"+ minutes +":"+seconds;
}
   function setTimeDiv(){
var timeDiv=document.getElementById("timeDiv");
timeDiv.innerText=new Date();
}
   function setTimeDiv2(){
var timeDiv=document.getElementById("timeDiv2");
timeDiv.innerText=new Date();
setTimeout(setTimeDiv2,1000);
}
function setTimeDiv3(){
var timeDiv=document.getElementById("timeDiv3");
var curTime=new Date();
var hours=curTime.getHours().toString().length>1?curTime.getHours():"0"+curTime.getHours();
var minutes=curTime.getMinutes().toString().length>1?curTime.getMinutes():"0"+curTime.getMinutes();
var seconds=curTime.getSeconds().toString().length>1?curTime.getSeconds():"0"+curTime.getSeconds();
timeDiv.innerText= hours+ ":"+ minutes +":"+seconds;
}
function setTimeDiv4(){
var timeDiv=document.getElementById("timeDiv4");
var curTime=new Date();
var hours=curTime.getHours().toString().length>1?curTime.getHours():"0"+curTime.getHours();
var minutes=curTime.getMinutes().toString().length>1?curTime.getMinutes():"0"+curTime.getMinutes();
var seconds=curTime.getSeconds().toString().length>1?curTime.getSeconds():"0"+curTime.getSeconds();
var hoursEle=document.getElementById("hoursEle");
var minutesEle=document.getElementById("minutesEle");
var secondsEle=document.getElementById("secondsEle");
var oldHours=hoursEle.innerText;
var oldMinutes=minutesEle.innerText;
var oldSeconds=secondsEle.innerText;
hoursEle.innerText=hours;
minutesEle.innerText=minutes;
secondsEle.innerText=seconds;
if(oldHours != hours){hoursEle.style.opacity='0';hoursEle.style.fontSize='200px';}
if(oldMinutes != minutes){minutesEle.style.opacity='0';minutesEle.style.fontSize='200px';}
if(oldSeconds != seconds){secondsEle.style.opacity='0';secondsEle.style.fontSize='200px';}
setTimeout(function(){
if(oldHours != hours){hoursEle.style.opacity='1';hoursEle.style.fontSize='100px';}
if(oldMinutes != minutes){minutesEle.style.opacity='1';minutesEle.style.fontSize='100px';}
if(oldSeconds != seconds){secondsEle.style.opacity='1';secondsEle.style.fontSize='100px';}
},200);
}
setInterval(setTimeDiv0,1000);
setInterval(setTimeDiv, 1000);
setTimeout(setTimeDiv2,1000);
setInterval(setTimeDiv3, 1000);
setInterval(setTimeDiv4, 1000);
</script>
</body>
</html>

上图(不知道百度能显示gif动画不):



<div id="time">
<script>setInterval("time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script>
</div>

显示效果:
2015年1月8日 12:49:24 星期四

<script type="text/javascript">
function tick() {
var hours, minutes, seconds, xfile;
var intHours, intMinutes, intSeconds;
var today, theday;
today = new Date();
function initArray(){
this.length=initArray.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments[i] }
var d=new initArray(
" 星期日",
" 星期一",
" 星期二",
" 星期三",
" 星期四",
" 星期五",
" 星期六");
theday = today.getFullYear()+"年" + [today.getMonth()+1]+"月" +today.getDate()+"日" + d[today.getDay()+1];
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();
if (intHours == 0) {
hours = "12:";
xfile = " 午夜 ";
} else if (intHours < 12) {
hours = intHours+":";
xfile = " 上午 ";
} else if (intHours == 12) {
hours = "12:";
xfile = " 正午 ";
} else {
intHours = intHours - 12
hours = intHours + ":";
xfile = " 下午 ";
}
if (intMinutes < 10) {
minutes = "0"+intMinutes+":";
} else {
minutes = intMinutes+":";
}
if (intSeconds < 10) {
seconds = "0"+intSeconds+" ";
} else {
seconds = intSeconds+" ";
}
timeString = theday+xfile+hours+minutes+seconds;
Clock.innerHTML = timeString;
window.setTimeout("tick();", 100);
}
window.onload = tick;
</script>

/* 在body中插入以下显示时间的标记 */
<span id="Clock"></span>
最终显示效果为(2015年1月30日 星期五 午夜 12:57:38)
可适当根据自己的需求修改代码

<script>setInterval("thistime.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script>

放在<body>你想显示的位置</body>
<script language=“JavaScript”>setInterval("thistime.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script>
测试过的能运行
希望我的回答对你有用,如果有用记得采纳哦!有问题可以再问我哦!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p></p>
<script>
function clock()
{
var today =new Date();
var year = today.getFullYear();
var month= today.getMonth();
var day = today.getDate();
var hour = today.getHours();
var mini = today.getMinutes();
var sec = today.getSeconds();
document.getElementsByTagName('p')[0].innerHTML=(year+'-'+(month+1)+'-'+day+' '+hour+':'+mini+':'+sec);
}
setInterval("clock();",1000);
clock();
</script>
</body>
</html>



(编辑:闻丁董)
联系方式:
关于我们 | 客户服务 | 服务条款 | 联系我们 | 免责声明 | 网站地图
@ 作文摘要网