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 来获取或插入元素内容。
登录
放在外部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文件
登录|哈哈书院 武林萌主|登录
姓名: 密码:萌主 闲杂人等 记住密码
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: "华文新魏";}