时间:2021-07-01 10:21:17 帮助过:4人阅读
题目要求:
编写一个用户注册页面
检测用户名是否是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>
这一句可以设置文本框的默认值;
效果为 :
<!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>
要实现的功能:
1 点击全选按钮(父的checkbox)的时候,让子的checkbox的选中状态跟父的checkbox保持一致
2 给所有的子的checkbox注册点击事件,点击子的checkbox 如果有一个子的checkbox没有选中,父的checkbox也不选中
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>
网页示例:
注意 :这一句话是核心 让子级的checkbox的状态等于父级
sons[i].checked = this.checked;
相关推荐:
js复选框全选反选的方法
js 设置选中行的样式的实现代码
以上就是【js】:检测用户输入、文本框默认样式设置、设计表格样式实现全选反选的详细内容,更多请关注Gxl网其它相关文章!