주제 요구 사항:
사용자 등록 페이지 작성
사용자 이름이 6자리 미만인지, 비밀번호가 8자리 이상인지 감지합니다. 높은 요구 사항을 충족하지 않습니다. 텍스트 상자를 강조 표시합니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>用户注册页面</title> <style> .bg {background-color: red; } </style> </head> <body> <!-----id适用于js中的---> <input type="text" name="name" id="name" /><br> <input type="text" name="pwd" id="pwd" /><br> <input type="submit" value="注册" id="submit" /> <script> // 编写一个用户注册页面 // 检测用户名是否是6位以下,密码是否是8位以上,如果不满足要求高亮显示文本框 ; var nameText = document.getElementById('name'); var pwdText = document.getElementById('pwd'); var submit = document.getElementById('submit'); //给submit按钮注册事件 submit.onclick = function () { if(nameText.value.length < 6 && nameText.value.length > 0) { nameText.className = ''; } else { nameText.className = 'bg'; } if(pwdText.value.length > 8 && pwdText.value.length < 16) { pwdText.className = ''; } else { pwdText.className = 'bg'; } //取消submit的默认行为的执行 if里面不需要这句了 如果加了肯能会影响后续代码的执行 return false; } </script> </body> </html>
주제 2: 텍스트 상자의 기본 스타일 설정:
이 문장은 텍스트 상자;
효과:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>设置文本框中的默认样式</title> <style> .bg {color: gray; } </style> </head> <body> <input type="text" id="textSearch" class="bg" value="请输入关键字" > <input type="button" value="搜索"> <script> //注册事件 //如果文本框获得焦点 当内容是请输入关键字 清空内容 文字颜色恢复默认的黑色 var textSearch = document.getElementById('textSearch'); textSearch.onfocus = function () { if(textSearch.value === '请输入关键字') { this.value = ''; //把this的属性恢复为默认值 这里作用是把文字颜色变为黑色 this.className = ''; } } // 当失去焦点的时候onblur。如果文本框中的内容为空 设置文本框中内容为 请输入关键字 设置字体颜色为gray textSearch.onblur = function () { // if (textSearch.value === '') {} // 这一句不太好的 这个要是用户第一个输入的是空格的话那么就会误判 我们可以用它的长度来判断 if (textSearch.value.length === 0) { this.className = 'bg'; this.value = '请输入关键字'; } } </script> </body> </html>주제 3: : 모두 선택 및 반전 기능을 구현하기 위한 테이블 스타일 디자인
2 모든 자식 체크박스에 클릭 이벤트를 등록합니다. 자식 체크박스가 선택되어 있지 않으면 부모의 체크박스를 클릭하세요. 체크박스도 선택되지 않았습니다
3 역선택
코드 예:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全选反选</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<p class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="father" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="son">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
<script>
// 1 点击全选按钮(父的checkbox)的时候,让子的checkbox的选中状态跟父的checkbox保持一致
//1.1 给父级的check注册事件
//获取父级checkbox
var father = document.getElementById('father');
//获取所有的子级checkbox
//注意这一句用选择器的获得元素的写法
var sons = document.querySelectorAll('#son input[type=checkbox]');
var len = sons.length;
father.onclick = function () {
//1.2遍历这个容器中的所有元素 让所有的子级checkbox的状态都等于父级的状态
for(var i = 0;i < len; i++) {
//注意这一句话是核心 让子级的checkbox的状态等于父级
sons[i].checked = this.checked;
}
}
// 2 给所有的子的checkbox注册点击事件,点击子的checkbox 如果有一个子的checkbox没有选中,父的checkbox也不选中
// 2.1 给所有的子的checkbox注册点击事件
// 核心代码封装成方法 便于使用
function step2 () {
//2.2 只要子级有一个是false那么父级也就是false
//2.2 定义一个变量用于父级的状态 这个fatherIsTrue必须在点击事件这里面 father的赋值也是 因为每个点击事件需要判断所有的子级的状态 在外面的话是实现不了的
var fatherIsTrue = true;
for (var j = 0; j < len; j++) {
if (!sons[j].checked) {
fatherIsTrue = false;
break;
}
}
father.checked = fatherIsTrue;
}
for(var i = 0;i < len; i++) {
sons[i].onclick = function () {
step2();
}
}
//3 反选
// 给反选按钮注册一个事件
var btn = document.getElementById('btn');
btn.onclick = function () {
for(var i = 0; i < len; i++) {
sons[i].checked = !sons[i].checked;
}
//写到这里我门会有一个问题就是反选不能控制父级 但是呢我们的第二步已经完成这个问题了 所以我们把第二步
//的核心代码分装成一个方法 直接调用即可 直接粘贴复制过来不太好
step2();
}
</script>
</p>
</body>
</html>
웹페이지 예:
참고: 이 문장이 핵심입니다. 자녀의 체크박스 상태를 다음과 같게 하세요. 상위
sons[i].checked = this.checked;
관련 권장 사항:
js 메소드를 사용하여 모든 확인란을 선택하고 선택 항목을 반전js 선택한 행의 스타일을 설정하는 구현 코드
위 내용은 [js]: 사용자 입력 감지, 텍스트 상자 기본 스타일 설정, 전체 선택 및 반전 선택 달성을 위한 설계 테이블 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!