通过事件监听及DOM操作，完成如下效果实现。
点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡。
输入框鼠标聚焦后，展示小写;鼠标离焦后，展示大写
点击“全选”按钮使所有的复选框呈现被选中的状态，点击“反选”按钮使所有的复选框呈现取消勾选的状态，3
<!-- 文档类型HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集 -->
<meta charset="UTF-8">
<!-- 设置浏览器兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<img id="light" src="img/on.gif" ><br>
<input type="button" value="点亮" οnclick="on()">
<input type="button" value="熄灭" οnclick="off()">
<br><br>
<input type="text" id="name" value="ITCAST" οnfοcus="lower()" οnblur="upper()">
<br><br>
<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
<br>
<input type="button" value="全选" οnclick="checkAll()">
<input type="button" value="反选"οnclick="reverse()">
</body>
<script>
function on(){
/* 1.获取点击按钮 */
var img= document.getElementById("light")
img.src = "img/on.gif"
}
function off(){
/* 1.获取点击按钮 */
var img= document.getElementById("light")
img.src = "img/off.gif"
}
function lower(){
var input=document.getElementById("name")
/* 改变大小写 */
input.value = input.value.toLowerCase();
}
function upper(){
var input=document.getElementById("name")
/* 改变大小写 */
input.value=input.value.toUpperCase();
}
function checkAll(){
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
/* 进行全选 */
element.checked=true;
}
}
function reverse(){
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked=false;
}
}
</script>
</html>
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
