1.显示当前时间
<body onload="showtime()">
<div>当前时间：
<span id="clock"></span >
</div>
<script type="application/javascript">
function showtime()//创建函数
{
var nowTime = new Date();//创建时间对象实例
var hours = nowTime.getHours();//获取当前小时数
var minutes = nowTime.getMinutes();//获取当前分钟数
var seconds = nowTime.getSeconds();//获取当前秒数
var timer = " "+((hours>12)?hours-12:hours);//将小时数质赋予变量timer
timer +=((minutes<10)?"0:":":")+minutes;//将分钟数值赋予变量timer
timer += ((seconds<10)?"0:":":")+seconds;//将秒数值赋予变量timer
timer +=" "+((hours>12)?"pm":"am");//将字符am或pm赋予变量timer
document.getElementById(‘clock‘).innerHTML =timer;
setTimeout("showtime()",1000);
}
</script>
</body>
2.显示当前日期
<body onload="initArray()">
<div> <span id="todayIs"></span></div>
<script type="application/javascript">
function initArray()
{
var today = new Date();
var d = new Array(
"星期日","星期一","星期二","星期三","星期四","星期五","星期六")
//如果为2014年，getYear返回2014-1900=114，getFullYear返回2014
var hh="<font color=‘#FBAE66‘ style=‘font-size:9pt;font-family:宋体‘>今天是： "+
today.getFullYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日 "+d[today.getDay()]+"</font>";
document.getElementById(‘todayIs‘).innerHTML = hh;
}
</script>
</body>
3.显示页面停留时间
<body>
<div>当前页面停留时间：<span id="yy004" >0时0分0秒</span></div>
<script type="text/javascript">
var sec =0;
var minu=0;
var hou=0;
//每隔一秒刷新一次
window.setTimeout("uupdate()",1000);
function uupdate()
{
sec++;
if(sec==60)
{
sec =0;
minu +=1;
}
if(minu==60)
{
minu=0;
hou+=1;
}
var ss04 =hou+ "时"+minu+"分"+sec+"秒";
document.getElementById(‘yy004‘).innerHTML=ss04;
window.setTimeout("uupdate()",1000);
}
</script>
</body>
4.倒计时
<body>
<div id="yy005"></div>
<script type="application/javascript">
var nowDay = new Date();
var yyear = nowDay.getFullYear()+1;
var timeDate = new Date(yyear+"-01-01");
var date = timeDate.getTime()-nowDay.getTime();//获取剩余时间
//将剩余时间转换为剩余天数
var time = Math.floor(date/(1000*60*60*24));
var show005="";
if(time>=0)
{
show005 = "现在离"+yyear+"年元旦还有：<font color=‘red‘><b>"+time+"</b></font>天";
document.getElementById(‘yy005‘).innerHTML=show005;
}
</script>
</body>
来源：《HTML、CSS、Javascript网页制作从入门到精通》15.1章节
时间： 2024-10-10 00:46:08