1..<script></script>的三种用法：
- 放在<body>中
- 放在<head>中
- 放在外部JS文件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js</title> <script> fuction displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script> <script src="bye.js"></script> </head> <body> <p id="demo"></p> <script> document.write(Date()); document.getElementById("demo").innerHTML=Date(); </script> <br> <button type="button" onclick="myFuntion()">登录</button> </body> </html>
function myFunction(){
document.getElementByld("demo").innerHTML="My First JavaScript";
｝
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>alert</title> </head> <body> <p id="demo"></p> <script> document.write(Date()); document.getElementById("demo").innerHTML=Date(); </script> <button type="button" onclick=window.alert("ERROR")>登录</button> </body> </html>
3.登录页面准备：
- 增加错误提示框。
- 写好HTML+CSS文件。
- 设置每个输入元素的id
4.定义JavaScript 函数。
- 验证用户名6-20位
- 验证密码6-20位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录验证</title>
<link rel="stylesheet" type="text/css" href="17.css" >
<script>
function fnLogin() {
var oUname=document.getElementById("uname");
var oUpass=document.getElementById("upass");
var oError=document.getElementById("error_box");
if (oUname.value.length < 6 || oUname.value.length > 20) {
oError.innerHTML = "用户名要6-20位"
}
if (oUpass.value.length < 6 || oUpass.value.length > 20) {
oError.innerHTML = "密码要6-20位"
}
if ((oUname.value.length < 6 || oUname.value.length > 20) && (oUpass.value.length < 6 || oUpass.value.length > 20)) {
oError.innerHTML = "用户名和密码要6-20位"
}
}
</script>
</head>
<body>
<div class="box" >
<h2 class="log">登录</h2>
<div class="input_box">
<input id="uname" type="text" placeholder="请输入用户名">
</div>
<div class="input_box">
<input id="uword" type="password" placeholder="请输入密码">
</div>
<div id="error_box"><br></div>
<div class="input_box">
<button onclick="fnLogin()">登录</button>
</div>
</div>
</body>
</html>
body { width: 100%; height: 100%; margin: 0; background: rgba(6, 50, 72, 1); } h2{ font-family: 宋体; color: #fff; margin-top: auto; height: 40px; width: 400px; } .box{ border: 1px solid #cccccc; width: 380px; margin: 5px; text-align: center; } .input_box{ height: 50px; } .log{ background-color:lightpink ; font-size: 35px; }
5.onclick调用这个函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>交互操作</title> </head> <body> <button type="button" onclick=window.alert("number")>press</button> </body> </html>