网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
//选完全部爱好,全选框被激活
allcheck.checked=arr.every(function (item) {
return item.checked==true;
});
}}
//激活提交按钮功能封装成函数
function check() {
var d=arr.some(function (item){
return item.checked == true;
});
btn.disabled=!d;
}
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/c8819c9b26d3418ea5094016361a2d2c.png)
代码解析:
这是一个简单的HTML页面,主要实现了选择爱好后提交按钮才能被激活的功能。
首先,在HTML中定义了几个输入框,其中三个是复选框,用来表示用户的不同爱好,另外一个是全选框,用来实现一键选择全部爱好的功能。最后有一个禁用的提交按钮,用来表示在没有选择任何爱好时是无法提交的。
在JavaScript代码中,首先通过querySelectorAll方法和属性选择器来获取所有的名称为“fun”的输入框,并且将它们转换成数组形式,方便后续的操作。此外还通过getElementById方法获取全选框和querySelector方法获取提交按钮。
然后,定义了点击全选框的事件,当全选框被点击时,将所有的爱好复选框的选择状态都设置成与全选框相同的状态,并且调用了check函数来判断是否需要激活提交按钮。
接下来,为每个爱好复选框都定义了一个点击事件,当任意一个爱好被选中时,调用check函数来判断是否需要激活提交按钮,并且判断是否需要将全选框的选择状态修改为全部爱好都被选中。
最后,定义了check函数,主要用来判断是否存在至少一个已被选中的爱好,如果存在则激活提交按钮,否则禁用提交按钮。最后通过some方法来判断是否有输入框被选中,如果存在被选中的输入框,则返回true,此时提交按钮会被激活。
②二级菜单折叠。通过给定的CSS样式实现以下功能:
单击考勤管理、信息中心和协同办公的任一项,如果当前二级菜单是折叠状态,则展开,同时其余项折叠;如果当前二级菜单状态是展开,则折叠。
form.html:
- 考勤管理
- 日常考勤
- 请假申请
- 加班出差
- 信息中心
- 日常考勤
- 请假申请
- 加班出差
- 协同办公
- 日常考勤
- 请假申请
- 加班出差
![在这里插入图片描述](https://img-blog.csdnimg.cn/9ffac42f0f384ae2a7823721cf2f460d.png)
③填写并验证注册信息,具体要求如下:
用户名称:长度4~12,数字英文大小写字母;
密码:长度8~16,大小写字母、数字或下划线;
确认密码:两次密码输入一致,不一致则提示错误;
手机号码:13、14、15、17、18开头的11位手机号;
电子邮箱:用户名@域名(域名后缀至少2个字符);
所有输入不允许为空。
form.html:
用户名称: | ||
---|---|---|
密 码: | ||
确认密码: | ||
手机号码: | ||
电子邮箱: | ||
form.js
// 表单验证函数
function validateForm(form) {
// 获取表单元素和错误提示元素
const usernameInput = form.username;
const pwdInput = form.pwd;
const repwdInput = form.repwd;
const telInput = form.tel;
const emailInput = form.email;
const usernameError = usernameInput.parentNode.nextElementSibling.firstElementChild;
const pwdError = pwdInput.parentNode.nextElementSibling.firstElementChild;
const repwdError = repwdInput.parentNode.nextElementSibling.firstElementChild;
const telError = telInput.parentNode.nextElementSibling.firstElementChild;
const emailError = emailInput.parentNode.nextElementSibling.firstElementChild;
// 用户名称验证
const usernameReg = /^[a-zA-Z0-9]{4,12}$/;
if (!usernameReg.test(usernameInput.value)) {
usernameError.textContent = '请输入4~12位,数字英文大小写字母的用户名。';
usernameInput.focus();
return false;
} else {
usernameError.textContent = '';
}
// 密码验证
const pwdReg = /^[\w]{8,16}$/;
if (!pwdReg.test(pwdInput.value)) {
pwdError.textContent = '请输入8~16位,大小写字母、数字或下划线的密码。';
pwdInput.focus();
return false;
} else {
pwdError.textContent = '';
}
// 确认密码验证
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
img-Ve397kjt-1715739887273)]
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!