JavaScript综合案例
- 01_案例一
- 02_案例二
- 03_案例三
- 04_案例四
- 05_案例五
01_案例一
- 需求:
- 得到select下的所有的option中的文本信息
- 解决方案
- 代码实现
function fn1() {
var select = document.getElementById("sel");
var childNodes = select.childNodes;
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
if (childNode.nodeType == 1) {
var textNode = childNode.firstChild;
var nodeValue = textNode.nodeValue;
console.log(nodeValue);
}
}
}
function fn2() {
var select = document.getElementById("sel");
var options = select.options;
for (var i = 0; i < options.length; i++) {
var option = options[i];
console.log("text : " + option.text + " , value : "+ option.value);
}
}
<select id="sel">
<option value="xx">小学</option>
<option value="cz">初中</option>
<option value="gz">高中</option>
<option value="dx">大学</option>
</select><br>
<button onclick="fn1()">获取1</button><br>
<button onclick="fn2()">获取2</button><br>
02_案例二
- 需求
- 得到select下的选中的option中的文本信息和value属性的值
- 代码实现
<head>
<title>Javascript综合案例二</title>
<%--得到select下的选中的option中的文本信息和value属性的值--%>
<script>
function fn1() {
var select = document.getElementById("sel");
var selectedIndex = select.selectedIndex;
var options = select.options;
var option = options[selectedIndex];
var text = option.text;
var value = option.value;
console.log("text : " + text + " , value : " + value);
}
</script>
</head>
<body>
<select id="sel" onchange="fn1()">
<option value="xx">小学</option>
<option value="cz">初中</option>
<option value="gz">高中</option>
<option value="dx">大学</option>
</select>
</body>
03_案例三
<script>
function fn1() {
var select = document.getElementById("sel");
var option = document.createElement("option");
option.setAttribute("value","ss");
var text = document.createTextNode("硕士");
option.appendChild(text);
select.appendChild(option);
}
function fn2() {
var select = document.getElementById("sel");
var option = document.createElement("option");
option.text = "博士";
option.value = "bs";
select.add(option);
}
</script>
04_案例四
- 需求
- 当选择 全选/全不选时，下面的四个爱好，都会与我们全选/全不选一样。
- 当选择全选按钮时，要求四个爱好项全都选择。
- 当选择全不选按钮时，要求四个爱好项全都不选择。
- 当选择反选时，要求四个爱好项，选择的取消，没有选择的选中。
- 代码实现
<head>
<title>Javascript综合案例4</title>
<script>
function selectAll() {
var hobbys = document.getElementsByClassName("hobbys");
var all = document.getElementById("all");
for (var i = 0; i < hobbys.length; i++) {
var hobby = hobbys[i];
hobby.checked = all.checked;
}
}
function fn1() {
var hobbys = document.getElementsByClassName("hobbys");
for (var i = 0; i < hobbys.length; i++) {
console.log("设置~~~")
var hobby = hobbys[i];
if (!hobby.checked) {
hobby.checked = true;
}
}
}
function fn2() {
var hobbys = document.getElementsByClassName("hobbys");
for (var i = 0; i < hobbys.length; i++) {
var hobby = hobbys[i];
if (hobby.checked) {
hobby.checked = false;
}
}
}
function fn3() {
var hobbys = document.getElementsByClassName("hobbys");
for (var i = 0; i < hobbys.length; i++) {
var hobby = hobbys[i];
var oldChecked = hobby.checked;
var newChecked = !oldChecked;
hobby.checked = newChecked;
}
}
</script>
</head>
<body>
<input type="checkbox" onchange="selectAll()" id="all"/>全选/全不选
<br>
<br>
<input type="checkbox" class="hobbys"/>篮球
<input type="checkbox" class="hobbys"/> 足球
<input type="checkbox" class="hobbys"/>乒乓球
<input type="checkbox" class="hobbys">排球
<br>
<br>
<button onclick="fn1()">全选</button> <button onclick="fn2()">全不选</button> <button onclick="fn3()">反选</button>
</body>
05_案例五
- 需求
- 所有内容不可以为空
- 邮箱必须邮箱的规则
- 用户名与密码长度必须6位以上
- 密码与重复密码必须一致
- 开发流程
- 在表单校验之前，要清空原来的错误提示信息
- 校验表单不能为空（账户、密码、重复密码、邮箱）
- 代码实现
<form action="index.jsp" onsubmit="return checkInfo()">
<table border="1px" width="500px" height="200px" cellspacing="0px">
<tr>
<th colspan="3">用户注册</th>
</tr>
<tr>
<td>
账户:
</td>
<td align="center">
<input type="text" name="username" id="username"/>
</td>
<td width="180px">
<span id="username_error"></span>
</td>
</tr>
<tr>
<td>
密码:
</td>
<td align="center">
<input type="text" name="password" id="password"/>
</td>
<td width="180px">
<span id="password_error"></span>
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td align="center">
<input type="text" name="repassword" id="repassword"/>
</td>
<td width="180px">
<span id="repassword_error"></span>
</td>
</tr>
<tr>
<td>
邮箱:
</td>
<td align="center">
<input type="text" name="emial" id="email"/>
</td>
<td width="180px">
<span id="email_error"></span>
</td>
</tr>
<tr align="center">
<td colspan="3">
<button type="submit">注册</button>
</td>
</tr>
</table>
</form>
function clearSpan() {
var spans = document.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
span.innerHTML = "";
}
}
function checkNull(id) {
var ele = document.getElementById(id);
var value = ele.value;
var reg = /^\s*$/;
if (reg.test(value)) {
var spn = document.getElementById(id+"_error");
spn.innerHTML = ""+id+"不能不为空";
return false;
} else {
return true;
}
}
function checkLength(id) {
var reg = /^.{6,}$/;
var ele = document.getElementById(id);
var value = ele.value;
if (reg.test(value)) {
return true;
} else {
var span = document.getElementById(id + "_error");
span.innerHTML = "" + id + "长度应该为6";
return false;
}
}
- checkEquals方法: 校验密码和确认密码是否一致
function checkEquals() {
var ele1 = document.getElementById("password");
var ele2 = document.getElementById("repassword");
var password = ele1.value;
var repassword = ele2.value;
if (password == repassword) {
return true;
} else {
var span = document.getElementById("repassword_error");
span.innerHTML = "两次密码不一致";
return false;
}
}
function checkEmail() {
var reg = /^(\w)+@(\w)+(.\w+)+$/;
var ele = document.getElementById("email");
var value = ele.value;
if (reg.test(value)) {
return true;
} else {
var span = document.getElementById("email_error");
span.innerHTML = "邮箱格式不对";
return false;
}
}
- checkInfo方法
- 先清空原有错误提示信息
- 校验账户
- 校验密码
- 校验确认密码
- 校验确认密码是否为空
- 校验确认密码长度
- 校验密码和确认密码是否一致
- 校验邮箱
function checkInfo() {
clearSpan();
return checkNull("username") && checkLength("username") &&
checkNull("password") && checkLength("password") &&
checkNull("repassword") && checkLength("repassword") && checkEquals() &&
checkNull("email") && checkEmail();
}
