• 利用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- 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)) 将剩余时间转换为剩余天数。-->
  • 相关阅读:
    Java基础模拟LinkedList的双向链表结构
    对thrift版本降级(mac)
    通信技术类网站
    Arista和他的EOS
    程序员的英文能力培养
    挖掘时间的价值
    写作的方法论
    SRv6相关资源汇总
    你不必有自己的写作优势领域
    20192416汇编语言学习总结
  • 原文地址:https://www.cnblogs.com/aixing/p/13327784.html
Copyright © 2020-2023  润新知