在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感。
显示当前时间
getHours()、getMinutes()、getSeconds()分别获得当前小时数、当前分钟数、当前秒数。
打开网页文档,在head标签中输入以下代码:
<script>
function showtime(){
var now_time = new Date(); //创建时间对象的实例
var hours = now_time.getHours(); //获得当前小时数
var minutes = now_time.getMinutes(); //获得当前分钟数
var seconds = now_time.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.clock.show.value=timer; //在名为clock的表单中输出变量timer的值
setTimeout("showtime()",1000); //设置每隔一秒钟自动调用一次showtime()函数
}
/* setTimeout()方法是由windows对象所提供的,用来实现经过一定时间后
* 自动进行指定处理。该语句的意思就是1秒后调用showtime().setTimeout()
* 方法中的时间是以毫秒为单位进行计算的,因此1000ms就等于1s。*/
</script>
将光标放在body标记内,输入代码onLoad=”showtime()”。
将光标放在body标签内,输入以下代码:
<form name="clock" onsubmit="0">
<input type="text" name="show" size="10" style="background-color: #66afe9;
border-width: 3px;"/>
</form>
显示当前日期
首先定义一个星期数组initArray(),然后利用getYear()、getMonth()、getDate()、getDay()分别获得当前年份、获得当前月份、获得当前日数、获得当前星期,显示当前日期的具体操作步骤:
①:在body之中输入以下代码:
<script>
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(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六");
document.write(
"<font color=red style='font-size:9px;font-family:宋体'>",
today.getYear(),"年",
today.getMonth()+1,"月",
today.getData(),"日",
d[today.getDay()+1],
"</font>");
</script>
<!--在显示月份的时候,要将所得的月份加1,因为月份的值是从0到11.-->
<!--利用getDay()方法获得的值中,0代表星期天,而所得值中没有7.-->
显示网页停留时间
首先用fom定义一个表单,然后在表单内使用input标记定义一个文本框,然后定义一个function update()函数计算停留时间,最后利用doucument.forms.input1.value=hour+“时”+min+“分”+sec+“秒”在文本框中显示停留时间。
①:在Body标签内输入以下代码:
<!--定义表单名称forms-->
<form name="forms">
<div align="left">
<!-- 定义文本框名称input1-->
<input type="text" name="input1" size="10"/>
<script>
<!--
var sec= 0,min= 0,hou= 0;
flag=0;
idt=window.setTimeout("update();",1000);//每隔1s刷新一次
function update() //定义函数计算停留时间
{
sec++;
if(sec==60){
sec=0;
min+=1;
}
if(min==60){
min=0;
hou+=1;
}
//如果停留时间少于1分钟,弹出提示信息
if((min>0)&&(flag==0))
{
window.alert("欢迎光临!");
flag=1;
}
//显示停留时间信息
document.forms.input1.value=hou+"时"+min+"分"+sec+"秒";
idt=window.setTimeout("update();",1000);
}// -->
</script>
</div>
</form>
制作倒计时特效
倒计时特效可以让用户明确知道某个日期剩余的时间。
①:在body标签内输入以下代码:
<script>
var timedate = new Date("October 1,2018"); //设置倒计时时间为2018年10月1日
var times="指定日期"; //设置time变量
var now=new Date(); //获得当前时间
var date=timedate.getTime() - now.getTime(); //获得剩余时间
var time = Math.floor(date/(1000*60*60*24)); //将剩余时间转化为天数
if(time>=0);
//显示倒计时时间信息
document.write("现在离2018年"+times+"还有:" +
"<font color=red><b>"+time+"</b></font>天");
</script>
<!--利用var date= timedate.getTime()-now.getTime()可以获得剩余时间,由于时间是以毫秒为单位计算的,因此换算率如下:
1天=24小时,1小时=60分钟,1分钟=60秒,1秒=1000毫秒-->
<!--利用var time=Math.floor(date/(1000*60*60*24)) 将剩余时间转换为剩余天数。-->