JavaScript 基础，登录验证

<script></script>的三种用法：

  1. 放在<body>中
  2. 放在<head>中
  3. 放在外部JS文件中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    function btu(){
        document.getElementById("d2").innerHTML="瘦肉粥";

    }
    </script>
</head>

<body>
<script>
    document.write(Date())
    function date () {
        window.alert(Date())
    }
</script>

<p id="d2">皮蛋</p>
<button type="button" onclick="btu()">点击</button>

</body>
</html>

 

 function btu(){
        document.getElementById("d2").innerHTML="瘦肉粥";

    }

 

三种输出数据的方式：

  1. 使用 document.write() 方法将内容写到 HTML 文档中。
  2. 使用 window.alert() 弹出警告框。
  3. 使用 innerHTML 写入到 HTML 元素。
    1. 使用 "id" 属性来标识 HTML 元素。
    2. 使用 document.getElementById(id) 方法访问 HTML 元素。
    3. 用innerHTML 来获取或插入元素内容。

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert</title>
</head>
<body>
    <p id="demo"></p>
<script>
    document.write(Date());
    document.getElementById("demo").innerHTML=Date();
</script>
     <button type="button" onclick=window.alert("叫你点你就点？")>点我呀</button>
</body>
</html>

     

    登录页面准备：

    1. 增加错误提示框。
    2. 写好HTML+CSS文件。
    3. 设置每个输入元素的id
    4. 定义JavaScript 函数。
    5. 验证用户名6-20位
    6. 验证密码6-20位
    7. onclick调用这个函数。 
      <!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>登陆界面</title>

</head>

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"  type="text/css" href="../static/webb.css" >

<base href="www.gzcc.cn"target="_blank">

<nav>

    <ul class="nav nav-tabs">

  <li class="active"><a href="www.4399.com">Home</a></li>

  <li><a href="www.gzcc.cn">iOS</a></li>

   <li><input type="text" class="form-control"style="width: 200px" ></li>

        <button type="button" class="btn btn-default">搜索</button>

</ul>

</nav>



<h1>

 用户界面

</h1>


<body style="background-color: antiquewhite" >

<p id="demo">这是一个段落</p>
<script>
        document.getElementById("demo").innerHTML="ok";
        function zmzz() {
            var oUname= document.getElementById("user")
            var oError= document.getElementById("error_box")
            var oUpass = document.getElementById("upass")
            if(oUname.value.length<6){
                oError.innerHTML="用户名至少6位"
            }
            if(oUpass.value.length<6 || oUpass.value.length>20){
                oError.innerHTML="密码至少为6位"
            }

        }
</script>
<button type="button" onclick="displayDate()">显示日期</button>

<div  class="bigdiv" id="container" >

<div id="header" style="background-color: aqua"><h2 align="center">登陆</h2></div>

<div id="content">


     <div align="center">username:<input id="user" type="text" name="user" placeholder="请输入用户名" ></div> <br>
       <div align="center"> password:<input  id="upass" type="password" name="password" align="center"><br></div>

      <div align="center">  <input type="radio" name="role" value="stu">student
      <input type="radio" name="role" value="tea">teacher <br>
      <input type="checkbox" value="true"><span style="color: blueviolet">rember</span> <a href="www.gzcc.cn"> 登陆问题请点</a></div>  <br>

       <div align="center">
            <button onclick="zmzz()">登录</button>
        <input type="button" value="cancel"><br>
       </div>
    <div align="center">
         <div id="error_box"><br></div><br>
    </div>

</div>



<div id="footer" style="background-color: aqua ; clear: both ; text-align: center"><i>@版权</i></div>
    <div>

        选择<select>

            <option>    </option>

            <option>点击</option>

            <option>收藏</option>

            <option>关注</option>

        </select>

    <ul>

        <li>python</li>

        <li>html</li>

    </ul>

    </div>


.bigdiv{

    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -200px;
    border: 1px solid #ccc;
    width: 400px;
}

posted @ 2017-10-27 15:03  会搓火球的单身狗  阅读(243)  评论(0)    收藏  举报