网站建设与维护期末考试题,addaction wordpress,如何免费建立官方网站,努比亚网站开发文档1、快速学习JavaScript的基本知识第11-14章
JavaScript入门 - 绿叶学习网
2、使用所学的知识完成以下练习。
1#xff09;点击 “点亮”按钮 点亮灯泡#xff0c;点击“熄灭”按钮 熄灭灯泡
2#xff09;输入框鼠标聚焦后#xff0c;展示小写#xff1b;鼠标离焦后…1、快速学习JavaScript的基本知识第11-14章
JavaScript入门 - 绿叶学习网
2、使用所学的知识完成以下练习。
1点击 “点亮”按钮 点亮灯泡点击“熄灭”按钮 熄灭灯泡
2输入框鼠标聚焦后展示小写鼠标离焦后展示大写。
3 点击 “全选”按钮使所有的复选框呈现被选中的状态点击 “反选”按钮使所有的复选框呈现取消勾选的状态。
效果如图所示 附源代码先尽量自己做然后再参考。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-事件-案例/title
/head
bodyimg idlight srcimg/off.gif brinput typebutton value点亮 onclickon() input typebutton value熄灭 onclickoff()br brinput typetext idname valueITCAST onfocuslower() onblurupper()br brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏brinput typebutton value全选 onclickcheckAll() input typebutton value反选 onclickreverse()/bodyscript//1. 点击 点亮 按钮, 点亮灯泡; 点击 熄灭 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img document.getElementById(light);//b. 设置src属性img.src img/on.gif;}function off(){//a. 获取img元素对象var img document.getElementById(light);//b. 设置src属性img.src img/off.gif;}//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction lower(){//小写//a. 获取输入框元素对象var input document.getElementById(name);//b. 将值转为小写input.value input.value.toLowerCase();}function upper(){//大写//a. 获取输入框元素对象var input document.getElementById(name);//b. 将值转为大写input.value input.value.toUpperCase();}//3. 点击 全选 按钮使所有的复选框呈现选中状态 ; 点击 反选 按钮使所有的复选框呈现取消勾选的状态 ; -- onclickfunction checkAll(){//a. 获取所有复选框元素对象var hobbys document.getElementsByName(hobby);//b. 设置选中状态for (let i 0; i hobbys.length; i) {const element hobbys[i];element.checked true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys document.getElementsByName(hobby);//b. 设置未选中状态for (let i 0; i hobbys.length; i) {const element hobbys[i];element.checked false;}}/script
/html
