实例之JavaScript

来源：互联网发布：最好用的知天气编辑：程序博客网时间：2024/06/13 04:46

使用JavaScript实现5秒倒计时

<html>    <head>        <meta charset="utf-8">        <title></title>       <script language="javascript" type="text/javascript">         var i = 4;        function fun(){                document.getElementById("mes").innerHTML = i;                 i--;                 if (i==0){                    window.location.href = "http://localhost/text/tcr/login.html";                     clearInterval(intervalid);                 }             }        setInterval("fun()",1000);     </script>    </head>    <body onload="fun()"><p>将在 <span id="mes">5</span> 秒钟后自动跳转！</p>    </body></html>

使用JavaScript实现对html标签赋上默认值

<html>    <head>        <meta charset="utf-8">        <title></title>        <script>            function init(){                document.getElementById("name").value="请输入你的名字";            }            function _focus(){                document.getElementById("name").value="";            }            function _blur(){                var value = document.getElementById("name").value;                if(value == "" || value==null){                    document.getElementById("name").value="请输入你的名字";                }else{                    document.getElementById("name").style.color="aqua";                }            }        </script>    </head>    <body onload="init()">        <!--            onfocus:聚焦            onblur:失去焦点        -->    <input type="text" id="name" onfocus="_focus()" onblur="_blur()"/>    </body></html>

使用JavaScript实现电子时钟

<html>    <head>        <meta charset="utf-8">        <title></title>        <script>            // 电子显示时钟            function showTime(){                var date = new Date();                var canvas = document.getElementById("showcanvas");                var hours = date.getHours();                var min = date.getMinutes();                var sec = date.getSeconds();                canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";            }            setInterval("showTime()",1000);        </script>    </head>    <body onload="showTime()">        <div id="showcanvas"></div>    </body></html>

0 0