html时间效果的简单介绍
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
本篇文章给大家谈谈html时间效果，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
在html页面怎么显示系统时间
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的script标签中，输入js代码：$('body').append(new Date());。
3、浏览器运行index.html页面，此时页面显示出了系统时间。
html如何显示时间
在网页中动态的显示日期时间，一般都是使用js来实现
html
head
title网页中动态的显示系统日期时间/title
script language="JavaScript"
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 (i10){
i="0" + i;
}
return i;
}
/script
/head
body onload="startTime()"
当前时间：font color="#33FFFF"span id="nowDateTimeSpan"/span/font
/body
/html
附上“倒计时”功能代码：
p id="p"距离2013/01/01年还剩000天0000时0000分0000秒/p
script type="text/javascript"
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);
/script
html显示时间, 求真正能用的
我刚好教别人做了一个，有多种效果，最后面那个还能动态改CSS样式。
需要简单版本的，吱一声啊。记得采纳。
改了一下，给你共享吧，最上面那个就是你想要的效果吧：
!doctype html
html lang="en"
head
meta charset="UTF-8"
titleDocument/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().length1?curTime.getHours():"0"+curTime.getHours();
var minutes=curTime.getMinutes().toString().length1?curTime.getMinutes():"0"+curTime.getMinutes();
var seconds=curTime.getSeconds().toString().length1?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().length1?curTime.getHours():"0"+curTime.getHours();
var minutes=curTime.getMinutes().toString().length1?curTime.getMinutes():"0"+curTime.getMinutes();
var seconds=curTime.getSeconds().toString().length1?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().length1?curTime.getHours():"0"+curTime.getHours();
var minutes=curTime.getMinutes().toString().length1?curTime.getMinutes():"0"+curTime.getMinutes();
var seconds=curTime.getSeconds().toString().length1?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动画不）：
如何用html写代码，使得在网页上显示当前的时间和日期
安装如下步骤操作：
1.在电脑磁盘空白出右键-新建，点击文档
2.将文档命名为index，用记事本打开
3.
写入一下代码，如图：
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html"/
title时间的动态显示/title
/head
body
/body
/html
4.在html头部写入获取时间的代码，如图
script language="javascript"
var t = null;
t = setTimeout(time,1000);//开始执行
function time()
{
clearTimeout(t);//清除定时器
dt = new Date();
var y=dt.getYear()+1900;
var mm=dt.getMonth()+1;
var d=dt.getDate();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var day=dt.getDay();
var h=dt.getHours();
var m=dt.getMinutes();
var s=dt.getSeconds();
if(h10){h="0"+h;}
if(m10){m="0"+m;}
if(s10){s="0"+s;}
document.getElementById("timeShow").innerHTML = "现在的时间为："+y+"年"+mm+"月"+d+"日"+weekday[day]+"
"+h+":"+m+":"+s+"";
t = setTimeout(time,1000); //设定定时器，循环执行
}
/script
5.
在内容部分写入div标签，并附上ID，用来加载时间的载体。如图：
div id="timeShow" class="time1"/div
6.在头部写入div的样式如图，并保存
style
.time1{width:100%; height:50px; background:#FFF000; line-height:50px; text-align:center;}
/style
7.保存后，将文件后缀命名为html。点击查看，勾选文件扩展名
8.文件后缀命名由txt改为html
9.使用浏览器打开文件
10.可以看到编写的文件，网页显示时间了
关于html时间效果和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
