1.<script></script>的三种用法:
- 放在<body>中
- 放在<head>中
- 放在外部JS文件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascpit</title> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <script src="mp.js"></script> </head> <body> <p id="demo">666</p> <script> document.write(Date()); document.getElementById("demo").innerHTML=Date(); function myFuntion() { document.getElementById("demo").innerHTML="Hello!"; } </script> <button type="button" onclick="myFuntion()">press</button> </body> </html>
运行结果如图:
2.三种输出数据的方式:
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 window.alert() 弹出警告框。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 "id" 属性来标识 HTML 元素。
- 使用 document.getElementById(id) 方法访问 HTML 元素。
- 用innerHTML 来获取或插入元素内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> </head> <body> <p>Hey,homie</p> <script> document.write(Date()) </script> <button type="button" onclick=window.alert("用户名不能以数字开头")>Login</button> </body> </html>
运行结果如图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="demo">Hello</p> <script> document.getElementById("demo").innerHTML=Date(); </script> <button type="button" onclick=window.alert("用户名不能以数字开头")>Login</button> </body> </html>
3.登录页面准备:
- 增加错误提示框。
- 写好HTML+CSS文件。
- 设置每个输入元素的id
4.定义JavaScript 函数。
- 验证用户名6-20位
- 验证密码6-20位
5.onclick调用这个函数。
<meta charset="UTF-8"> <title>音乐在线</title> <link rel="stylesheet" type="text/css" href="../static/css/wow.css"> </head> <body class="bg"> <div id="container"> <div class="box"> <h2>Music Login</h2> </div> <div class="input_box"> <br> Number:<input id="uname" type="text" placeholder="请输入会员号"></div> <div class="input_box"> <br> Password:<input id="upass" type="password" placeholder="请输入专属秘密"> </div> <div class="error"> <div id="error_box"></div> <div id="mima_box"></div> </div> <div> <button id="login" type="submit" onclick="myLogin()">登录</button> <button id="cancel" type="cancel" onclick="myCancel()">取消</button> </div> </div> <script> function myLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var oMima = document.getElementById("mima_box"); var oUpass = document.getElementById("upass"); if (oUname.value.length < 6) { oError.innerHTML = "亲,用户名至少6位哦" } else if (oUname.value.length > 20) { oError.innerHTML = "亲,用户名最多20位哦" } if (oUpass.value.length < 6) { oMima.innerHTML = "亲,密码至少6位哦" } else if (oUpass.value.length > 20) { oMima.innerHTML = "亲,密码最多20位哦" } if(oUname.value.length>=6&&oUname.value.length<=20&&oUpass.value.length>=6&&oUpass.value.length<=20){ return window.alert("用户名密码正确") } } </script> </body> </html>
h2 { margin-bottom: 0; font-size: 38px; display: block; -webkit-margin-before: 0.83em; -webkit-margin-after: 0.83em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; } .bg { background-image: url(http://static01.coloros.com/bbs/data/attachment/forum/201510/12/194712vr251w88218k1rrt.jpg); background-repeat: no-repeat; background-size: 100%; } #container { 460px; board: 10px solid #fff310; margin: 130px auto; text-align: center; background: lightsteelblue; border-radius: 100px; border-collapse:separate ; border-color: #ff49b0; border-bottom-10px; } .box { clear: both; text-align: center; height: 38px; font-size: 24px; color: black; font-family: 'Georgia',Georgia,'Times New Roman',Times,'Microsoft YaHei',SimSun,SimHei,serif; background: dimgray; border-radius: 1000px; } div.input_box { height: 120px; 470px; float: left; text-align: center; font-size: 29px; color: lightgreen; font-family:Helvetica Narrow Bold Lefty; background: lightslategray; border-radius: 10px; } #uname { 300px; height: 39px; background-color: lightpink; border-radius: 20px; } #upass { 300px; height: 39px; background-color: lightpink; border-radius: 20px; } #login { 220px; color: grey; font-family: "华文新魏"; height: 50px; font-size: 35px; border-radius: 150px; background: darkgray; } #cancel { 220px; color: grey; font-family: "华文新魏"; height: 50px; font-size: 35px; border-radius: 150px; background: darkgray; } .error { font-family: "华文新魏"; font-size: 38px; }
运行结果如图: