实例之JavaScript

最新推荐文章于 2022-07-01 17:09:21 发布

wxgfd

最新推荐文章于 2022-07-01 17:09:21 发布

阅读量304

点赞数

分类专栏：实例文章标签：实例

本文链接：https://blog.csdn.net/qq_30276065/article/details/52862155

版权

实例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用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>