1.<script></script>的三种用法：
1.放在<body>中
2. 放在<head>中
3.放在外部JS文件中
2.三种输出数据的方式：
1.使用 document.write() 方法将内容写到 HTML 文档中。
2.使用 window.alert() 弹出警告框。
3.使用 innerHTML 写入到 HTML 元素。
a.使用 "id" 属性来标识 HTML 元素。
b.使用 document.getElementById(id) 方法访问 HTML 元素。
c.用innerHTML 来获取或插入元素内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</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>
放在外部JS文件中 function Login() { var oUname = document.getElementById("name") var oError = document.getElementById("error_box") var opassword = document.getElementById("password") if(oUname.value.length<6||oUname.value.length>20){ oError.innerText="用户名需为6-20个字符"; return; } else if(opassword.value.length<6||opassword.value.length>20){ oError.innerText="密码需在6-20个字符内"; return; } else{ oError.innerHTML=""; } }
3.登录页面准备：
1.增加错误提示框。
2.写好HTML+CSS文件。
3.设置每个输入元素的id
4.定义JavaScript 函数。
1.验证用户名6-20位
2.
验证密码6-20位
5.onclick调用这个函数。
HTML文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录|哈哈书院</title> <link rel="stylesheet"type="text/css"href="../static/css/dl.css"> <script> function Login() { var oUname = document.getElementById("name") var oError = document.getElementById("error_box") var opassword = document.getElementById("password") if(oUname.value.length<6||oUname.value.length>20){ oError.innerText="用户名需为6-20个字符"; return; } else if(opassword.value.length<6||opassword.value.length>20){ oError.innerText="密码需在6-20个字符内"; return; } else{ oError.innerHTML=""; } } </script> </head> <body style="background-color: khaki"> <div class="box"> <div class="dl" ><h2>武林萌主|登录</h2></div> <div class="input_box"> 姓名：<input type="text" id="name" placeholder="敢问阁下大名"><br><br> 密码：<input type="password" id="password" placeholder="请输入通关密码"> </div> <div class="box2"> <input type="radio" name="role" value="stu">萌主 <input type="radio" name="role" value="tea">闲杂人等 <input type="checkbox" name="vehicle" value="Bike">记住密码<br></div> <div id="error_box"><br></div> <div> <button id="login" type="submit" onclick="Login()">登录</button> <button id="login" type="submit" onclick=window.alert("取消登录?")>取消</button> </div> </div> </div> </body> </html>
CSS
div{ width: 700px; margin:0 auto; text-align:center; background: aquamarine; } .box{ width:500px; height:250px; border-color:pink; border-width:1px; margin-top:100px; } .box2{ text-align: center; font-family: "华文新魏"; } .dl{ clear: both; text-align: center; background-color:aquamarine; margin-bottom: 0; font-family: "华文新魏"; font-size: 20px; height: 45px; color: pink; } .input_box { height: 175px; width: 700px; float: left; text-align: center; font-size: 29px; color: aquamarine; font-family: "华文彩云"; background: pink; } #login { font-family: "华文新魏"; } #error_box{ text-align: center; font-family: "华文新魏"; }
