利用Javascript制作网页特效（时间特效）

在网页中经常可以看到各种各样的动态时间显示，在网页中合理地使用时间可以增加网页的时效感。

---

显示当前时间

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)) 将剩余时间转换为剩余天数。-->