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(); </script> <button type="button" onclick="myFuntion()">press</button> </body> </html>
mp.js文件:
function myFuntion() {
document.getElementById("demo").innerHTML="the first JavaScript";
}
运行结果是：
2.三种输出数据的方式：
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 window.alert() 弹出警告框。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 "id" 属性来标识 HTML 元素。
- 使用 document.getElementById(id) 方法访问 HTML 元素。
- 用innerHTML 来获取或插入元素内容。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascpit</title> 6 7 </head> 8 <body> 9 <p id="demo">666</p> 10 <script> 11 document.write(Date()); 12 document.getElementById("demo").innerHTML=Date(); 13 </script> 14 <button type="button" onclick=window.alert("ERROR")>press</button> 15 </body> 16 </html>
运行结果是：
3.登录页面准备：
- 增加错误提示框。
- 写好HTML+CSS文件。
- 设置每个输入元素的id
4.定义JavaScript 函数。
- 验证用户名6-20位
- 验证密码6-20位
5.onclick调用这个函数。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>首页</title> 6 <link rel="stylesheet"type="text/css" href="../static/css/nb.css"> 7 <script> 8 function fnLogin() { 9 var oUname=document.getElementById("uname"); 10 var oUpass=document.getElementById("upass"); 11 var oError=document.getElementById("error_box"); 12 if (oUname.value.length < 6 || oUname.value.length > 20) { 13 oError.innerHTML = "用户名要6-20位" 14 } 15 if (oUpass.value.length < 6 || oUpass.value.length > 20) { 16 oError.innerHTML = "密码要6-20位" 17 } 18 19 if ((oUname.value.length < 6 || oUname.value.length > 20) && (oUpass.value.length < 6 || oUpass.value.length > 20)) { 20 oError.innerHTML = "用户名和密码要6-20位" 21 } 22 } 23 </script> 24 25 </head> 26 <body> 27 <div class="box"> 28 <h2>登录</h2> 29 <div class="input_box"> 30 <input id="uname" type="text"placeholder="请输入用户名"> 31 </div> 32 <div class="input_box"> 33 <input id="upass" type="text"placeholder="请输入密码"> 34 </div> 35 <div id="error_box"><br></div> 36 <div class="input_box"> 37 <button class="button" onclick="fnLogin()">登录</button> 38 </div> 39 40 41 </div> 42 </body> 43 </html>
//css格式
body {
100%;
height: 100%;
margin: 0;
background: rgba(6, 41, 61, 1);
}
h2{
background: rgba(0, 90, 120, 0.9);
color: #fff;
font-family: 'Nunito', sans-serif;
font-weight: normal;
font-size: 2em;
padding: 10px 10px 10px 20px;
margin-top: 0;
margin-bottom: 15px;
}
.box{
text-align: center;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
border: 1px solid #ccc;
300px;
}
.input-box{
padding: 5px;
min- 50%;
height: 20px;
border-radius: 4px;
border: none;
font-family: 'Nunito', sans-serif;
font-weight: normal;
}
.button{
text-align: center;
display: block;
padding: 0;
100%;
margin-bottom: 10px;
color: #fff;
font-family: 'Nunito', sans-serif;
font-weight: 500;
font-size: 0.8em;
background: #0f88eb;
}
运行结果是：