JavaScript⑵（小实例）

时间 2020-07-29

原文原文链接

学习《动力节点》
javascript

1.时间html

1.1.显示时间信息java

　　星期0表示星期天，月份从零开始算起。年份须要注意避免千年虫问题。app

<head>
  <meta charset="utf-8"/>
  <script type="text/javascript">
    function getDate(){
      var vardate = new Date();
      alert(vardate);
      
      // 星期
      vardate1 = vardate.getDay();
      alert("星期"+vardate1);
      // 月份
      vardate1 = vardate.getMonth();
      vardate1++;
      alert(vardate1+"月份");
      // 天数
      vardate1 = vardate.getDate();
      alert(vardate1+"日");
      // 年份
      vardate1 = vardate.getFullYear();
      alert(vardate1+"年");
    }
    
  </script>
</head>

1.2.把时间输出到网页dom

　　写到div中jsp

<body style="margin:50px 150px;">
    <div id="timediv"></div>
    <script type="text/javascript">
        function displayTime(){
            var timediv = document.getElementById("timediv");
            var nowT = new Date();
            var timestring = nowT.toLocaleString();
            <!-- alert(timestring); -->
            timediv.innerHTML = timestring;
        }
        displayTime();
    </script>
</body>

　　让时间走起来，使用个函数：setInterval，每秒调用一次时间显示函数。
ide

<body style="margin:50px 150px;">
    <div id="timediv"></div>
    <script type="text/javascript">
        function displayTime(){
            var timediv = document.getElementById("timediv");
            var nowT = new Date();
            var timestring = nowT.toLocaleString();
            <!-- alert(timestring); -->
            timediv.innerHTML = timestring;
        }
        function infiniteLoop(){
            window.setInterval("displayTime()", 1000);
        }
        infiniteLoop();
    </script>
</body>

2.表单验证
函数

2.1.校验输入oop

　　在失去焦点时，启用函数验证提交信息。失去焦点的事件是blur。学习过程当中发现，要是回头来从新填写时，提示信息还在，也不够完美。就使用mousedown事件消除提示信息。
学习

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单验证</title>
    <script type="text/javascript">
        //没有填写任何信息时，提示
        function chkNullText(Evalue, Ename){
            //用户名输入为空时，提示
            if (Ename == "userName"){
                if (Evalue == ""){
                    var promptpoint = document.getElementById("chkOutPromptName");
                    promptpoint.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请填写内容继续完成注册";
                }
            }
            
            //密码输入为空时，提示
            if (Ename == "userPassword"){
                if (Evalue == ""){
                    var promptpoint = document.getElementById("chkOutPromptPassword");
                    promptpoint.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请填写内容继续完成注册";
                }
            }
            
            //输入密码长度不够8位时提示
            if (Evalue.length < 8){
                var promptpoint = document.getElementById("chkOutPromptPassword");
                promptpoint.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;建议密码长度大于8位";
            }
        }
        
        // 再次准备填写时，去掉提示
        function clearPrompt(Ename){
            if (Ename == "userName"){
                var promptpoint = document.getElementById("chkOutPromptName");
                promptpoint.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            }
            if (Ename == "userPassword"){
                var promptpoint = document.getElementById("chkOutPromptPassword");
                promptpoint.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            }
            
        }
    </script>
</head>
<body style="margin:50px 150px;">
    <form name="registeredUser" method="get" action="./login.jsp">
        用户名&nbsp;&nbsp;
        <input type="text" name="userName" value="" 
            onblur="chkNullText(this.value, this.name);" onfocus="clearPrompt(this.name);"/>
        &nbsp;&nbsp;<span id="chkOutPromptName"></span><p>
        密　码&nbsp;&nbsp;
        <input type="password" name="userPassword" value="" 
            onblur="chkNullText(this.value, this.name);" onfocus="clearPrompt(this.name);"/>
        &nbsp;&nbsp;<span id="chkOutPromptPassword"></span><p>
    </form>
</body>
</html>

效果

2.2.终止不合法的提交

　　表单提交事件：submit。

<form onsubmit="return true;">
    ...;
</form>

只有返回了true时，才提交。

　　须要在代码中设定一个开关，设定一个变量，添加事件句柄onsubmit。

    <script type="text/javascript">
    
        var allowSubmit = false;
．．．

    </script>
</head>
<body style="margin:50px 150px;">
    <form name="registeredUser" method="get" action="./login.jsp" 
    onsubmit="return allowSubmit;">
...
        <input type="submit"/>
    </form>

3.dom操做节点

3.1.添加元素

　　为div添加font元素；关键是建立元素、追加元素。

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>DOM建立元素</title>
    <script type="text/javascript">
        function addElt(){
            //1.获取对象div
            var thisDiv = document.getElementById("exa");
            
            //2.建立须要添加的节点
            var fontElt = document.createElement("font");
            fontElt.innerHTML = "添加的font属性"
            fontElt.color = "#0303E2";
            fontElt.size = "36px";
            
            //3.把建立的节点追加到获取的div对象
            thisDiv.appendChild(fontElt);
        }
    </script>
</head>
<body style="margin:50px 150px;">
    <input type="button" value="为div元素添加样式" onclick="addElt();" />
    
    <div id="exa">
    </div>
</body>
</html>