<script></script>的三种用法：
- 放在<body>中
- 放在<head>中
- 放在外部JS文件中
- 三种输出数据的方式：
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 window.alert() 弹出警告框。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 "id" 属性来标识 HTML 元素。
- 使用 document.getElementById(id) 方法访问 HTML 元素。
- 用innerHTML 来获取或插入元素内容。
- 登录页面准备：
- 增加错误提示框。
- 写好HTML+CSS文件。
- 设置每个输入元素的id
- 定义JavaScript 函数。
- 验证用户名6-20位
- 验证密码6-20位
- onclick调用这个函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> function myLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box1"); if(oUname.value.length<6){ oError.innerHTML ="用户名至少六位！" }else if(oUname.value.length>10){ oError.innerHTML ="用户名最多十位！" } var oUpass = document.getElementById("upass"); var oError = document.getElementById("error_box2"); if( oUpass .value.length<6){ oError.innerHTML ="密码至少六位！" }else if(oUpass .value.length>10){ oError.innerHTML ="密码最多十位！" } } </script> <link rel="stylesheet" type="text/css" href="../static/css/xiaofang.css"> </head> <body> <div class="box"> <form id="login" action="" method="post"> <h2 align="center"> <div id="header"> <h3 align="center" >登录</h3> </div> <div class="input_box"> username:<input id="uname" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> password:<input id="upass" type="password" placeholder="请输入密码"> </div> <div id="error_box1" ><br></div> <div id="error_box2" ><br></div> <div class="input_box"> <button onclick="myLogin()">登录</button> <button >重置</button> </div> </h2> </form> </div> </body> </html>
CSS
html{ font-family: 华文细黑; } .bor{ position:absolute; top:50%; left:50%; margin-top: -200px; margin-left:-200px; widht:500px; height:300px; } body{ background:url("http://img1.gtimg.com/ent/pics/hv1/129/192/1925/125222214.jpg") no-repeat; 100%; height:auto; overflow:hidden; background-size:85%; } #error_box1{ color: mediumvioletred; } #error_box2{ color: mediumvioletred; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>time</title> </head> <body style="text-align: center;bgcolor:blue"> <div style="border:1px dashed #696969;600px;margin:0 auto"> <h4>当前时间</h4> <p id="demo"></p> </div> <p></p> <script> document.write("Hello!") document.getElementById("demo").innerHTML=Date(); </script> <p></p> <button type="button" onclick=window.alert("该用户不存在！")>Login</button> </body> </html>
