JS DOM编程之平平无奇小练习

已于 2022-07-13 14:45:53 修改
阅读量469 收藏
点赞数
文章标签： javascript 前端 java
于 2022-07-13 14:44:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57505092/article/details/125762858
版权

提示：以下所有代码只需套入到此模板中即可正常运行（初学JS记录一下哈哈）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js</title>
	</head>
	<body>
    //没错就是放到这里
	</body>
</html>

一、鼠标移动到h1上，变化h1中的文字内容，离开h1之后又变回原本的内容

<h1 style="width: 200px; height: 100px; background-color: chartreuse;" align="center" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()">把鼠标移到上面</h1>
<script type="text/javascript">
	function handleMouseOver(){
		let h=document.querySelector("h1");
		h.innerHTML="谢谢";
	}
	function handleMouseOut(){
		let h=document.querySelector("h1");
		h.innerHTML="把鼠标移到上面";
	}
</script>

 二、点击什么是受益人文字，并显示下边的文字内容

<p onclick="handleClick()" style="font-size: 60px; font-weight: 800;">什么是受益人</p>
		
    <script type="text/javascript">
	    function handleClick(){
		    let h=document.querySelector("p");
		    h.innerHTML="什么是受益人<br><b style='font-size: 20px;'>解答：<b style='font-size: 17px; font-weight: 300;'>受益人就是得得得得得得得得得得得";
	    	h.style.fontSize="30px";
	    }
    </script>

 四、完善复选框的功能，实现全选、取消选中和反选。

<table border="1">
			<thead>
				<tr>
					<td>
						<input type="submit" value="删除选中" onclick="calcelSelect()">
					</td>
					<td>
						姓名
					</td>
					<td>
						年龄
					</td>
					<td>
						性别
					</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" name="ids" value="1">
					</td>
					<td>张叔</td>
					<td>18</td>
					<td>男</td>
					<td>
						<a href="">删除</a>
						<a href="">更新</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" name="ids" value="2">
					</td>
					<td>李哥</td>
					<td>18</td>
					<td>男</td>
					<td>
						<a href="">删除</a>
						<a href="">更新</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" name="ids" value="3">
					</td>
					<td>红姐</td>
					<td>16</td>
					<td>女</td>
					<td>
						<a href="">删除</a>
						<a href="">更新</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" name="ids" value="4">
					</td>
					<td>小V</td>
					<td>18</td>
					<td>男</td>
					<td>
						<a href="">删除</a>
						<a href="">更新</a>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<input type="button" value="全选" onclick="selectAll()">
						<input type="button" value="全不选" onclick="unselectAll()">
						<input type="button" value="反选" onclick="reverseSelect()">
					</td>
				</tr>
			</tbody>
		</table>
			
		<script type="text/javascript">
			function selectAll(){
				let checkboxs = document.querySelectorAll("input[type='checkbox']");
				for(let i=0;i<checkboxs.length;i++){
					checkboxs[i].checked = true;
				}
			}
			
			function unselectAll(){
				let checkboxs = document.querySelectorAll("input[type='checkbox']");
				for(let i=0;i<checkboxs.length;i++){
					checkboxs[i].checked = false;
				}
			}
			
			function reverseSelect(){
				let checkboxs = document.querySelectorAll("input[type='checkbox']");
				for(let i=0;i<checkboxs.length;i++){
					checkboxs[i].checked=!checkboxs[i].checked;
				}
			}
			function calcelSelect(){
				let checkboxs = document.querySelectorAll("input[type='checkbox']");
				for(let i=0;i<checkboxs.length;i++){
					checkboxs[i].checked=false;
				}
			}
		</script>

 五、完善图片切换功能（点击轮换）

<img src="images/1.jpg" width="300px"height="300px">
		<button onclick="changeImg()">切换</button>
		
		<script type="text/javascript">
		    var i=1;
		    function changeImg(){
		        i++;
		        if(i==4){
		            i = 1;
		        }
		        var imgDom = document.querySelector("img");
		        imgDom.src="images/"+i+".jpg";
		    }
		</script>

 六、默认是关灯图片，鼠标移动到图片上变成亮灯图片，鼠标离开变回关灯图片

<img src="images/bulb_off.png" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()">
		<script type="text/javascript">
		    function handleMouseOver(){
		    	let h=document.querySelector("img");
		    	h.src="images/bulb_on.png";
		    }
		    function handleMouseOut(){
		    	let h=document.querySelector("img");
		    	h.src="images/bulb_off.png";
		    }
		</script>

点击也能实现灯亮灯灭

<img src="images/bulb_off.png" onclick="handleClick()">
		<script type="text/javascript">
			let i=0;
		    function handleClick(){
				i++;
				let h=document.querySelector("img");
				if(i%2!=0){
					h.src="images/bulb_on.png";
				}else{
					h.src="images/bulb_off.png";
				}
				
			}
		</script>

 七、表单校验功能，当失去焦点时，如果用户名或密码为空，在其后添加提醒信息

<form action="https://www.baidu.com" onsubmit="return checkForm()">
			用户名：<input type="text" name="username" onblur="checkUsername()" /><span id="usernameSpan"></span><br />
			密码：<input type="password" name="pwd1" onblur="checkPwd1()" /><span id="pwd1Span"></span><br />
			<input type="submit" />
		</form>
		<script type="text/javascript">
			function checkForm(){
				let r1=checkUsername();
				let r2=checkPwd1();
				let r3=checkPwd2();
				return r1&&r2&&r3;
			}
			function checkUsername(){
				let usernameDom = document.querySelector("input[name='username']");
				let spanDom = document.querySelector("#usernameSpan");
				if(usernameDom.value.trim().length<=0){
					spanDom.innerHTML="<b style='color: red;'>*用户名不能为空";
					return false;
				}else{
					spanDom.innerHTML='';
					return true;
				}
			}
			function checkPwd1(){
				let pwd1Dom = document.querySelector("input[name='pwd1']");
				let spanDom = document.querySelector("#pwd1Span");
				if(pwd1Dom.value.trim().length <= 0){
					spanDom.innerHTML = "<b style='color: red;'>*密码不能为空";
					return false;
				}else{
					spanDom.innerHTML = "";
					return true;
				}
			}
		</script>

八、 select中初始为空，单击河南 按钮时，显示河南省城市信息。单击河北按钮时，显示河北省城市信息：石家庄、保定、承德、邯郸

<button onclick="henan()">河南</button><button onclick="hebei()">河北</button><br/>
		<select width="80px">
			<option selected>郑州</option>
			<option>开封</option>
			<option>洛阳</option>
			<option>南阳</option>
		</select>
		</body>
		<script>
			function henan() {
				var opt=document.querySelector("select")
				opt.innerHTML="<option>郑州</option>"+"<option>开封</option>"+"<option>洛阳</option>"+"<option>南阳</option>"
			}
			function hebei() {
				var opt=document.querySelector("select")
				opt.innerHTML="<option>石家庄</option>"+"<option>保定</option>"+"<option>承德</option>"+"<option>邯郸</option>"
			}
		</script>

 九、操作表格，每点击一次添加，就在表格中生成一行

<table border="1" cellpadding="">
		    <thead>
		    <tr>
		        <td>用户名</td>
		        <td>密码</td>
		        <td>操作</td>
		    </tr>
		    </thead>
		    <tbody>
		    <tr>
		        <td><input type="text" name="user"></td>
		        <td><input type="password" name="pwd"></td>
		        <td><button>确定</button></td>
		    </tr>
		    <tr>
		        <td><input type="text" name="user"></td>
		        <td><input type="password" name="pwd"></td>
		        <td><button>确定</button></td>
		    </tr>
		    <tr></tr>
		    </tbody>
		</table>
		<button onclick="add()">添加</button>
		
		<script>
		    var i=1;
		    function add() {
		   var add=document.querySelector("tbody")
		
		        add.innerHTML += '<tr><td><input type="text" name="user"></td>' +
		            '        <td><input type="password" name="pwd"></td>' +
		            '        <td><button>确定</button></td></tr>'
		
		    }
		</script>

 十、显示当前时间，点击按钮，显示当前系统时间

<script type="text/javascript">
		       function gettime(){
		           var date = new Date();
		           var strDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
		           document.getElementById("time").innerHTML = strDate;
		       }
		</script>
		
		<button type="button" onclick="gettime()">这是按钮</button>
		<h1 id="time"></h1>

 十一、图片放大和缩小

 这里我要说一下，这个代码运行时第一次放大会出现只扩展高度，不扩展宽度的问题，咱也不晓得怎么回事，有知道的大佬，路过可以评论区指正一下，感谢感谢

<img src="images/3.jpg" id="m1"/>
		<button type="button" onclick="ImageSuofang1(true)" value="">大大大</button>
		<button type="button" onclick="ImageSuofang1(false)" value="">小小小</button>
		<script type="text/javascript">
			function ImageSuofang1(flag){
				var im=document.getElementById('m1');
				if(flag){
					im.width=im.width*2;
					im.height=im.height*2;
				}else{
					im.width=im.width/2;
					im.height=im.height/2;
				}
			}
		</script>

十二、点击切换验证码

<h2>点击切换验证码</h2>
		<div id="" style="width: 100px;height: 50px;background-color: green;line-height: 50px;" onclick="handleEvent()" align="center" ></div>
		<script type="text/javascript">
		 var div = document.querySelector("div");
		 var inp = document.getElementsByTagName("input")[0];
		 var btn = document.getElementsByTagName("button")[0];
		 div.innerHTML = ranFun(1000, 9999);
		 function handleEvent(){
			 div.innerHTML = ranFun(1000, 9999);
		 }
		 function ranFun(a, b) {
			return Math.floor(Math.random() * (b - a + 1) + a);
		 }
		 </script>
Carry lsh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM1-9 编程练习
请叫我二狗哥
05-14 369
1-9 编程练习 根据gif图，补充代码，实现以下效果： 点击页面上的“删除”按钮，弹出确认框 （1）当点击确认框上的“确定“时，按钮上的字变为红色； （2）当点击确认框上的“取消“时，按钮上的字变为绿色。 gif图如下： 任务 根据gif效果图完成下列步骤： 第一步：获取到按钮对象，给其绑定鼠标单击事件，以下步骤均在事件的匿名函数中进行 第二步：写出确认框，确认框的显示内容...
DOM基础3-19 编程练习
请叫我二狗哥
05-12 347
3-19 编程练习 小伙伴们，今天我们学习了鼠标事件，根据gif图，补充代码，实现下列功能： （1） 当鼠标在带滚动条的文本框上滑动时，字体颜色变成红色 （2） 当鼠标移出带滚动条的文本框时，字体颜色变成绿色 （3） 当鼠标移动文本框的滚动条时，空白的文本框出现文本“内容滚动了” 任务 第一步：通过id选取元素的方式获得这两个文本框 Tips：带滚动条的文本框和空白文...
DOM编程练习（三）
小圣_fighting的博客
03-12 882
3、 简单计算器。 制作一个简单计算器，实现基础加减法。 ================================答案========================================= html代码： 无标题文档 6.简单计算器 var numresult; var str; function digtal(nu
DOM编程练习（慕课网题目）
weixin_30784141的博客
09-11 289
编程练习 制作一个表格，显示班级的学生信息。 要求： 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮，能动态在最后添加一行 3. 点击删除按钮，则删除当前行 我的解答 <!DOCTYPE html> <html> <head> <title&g...
DOM编程练习，实现部门信息录入
aigo_2021的博客
05-03 288
运用DOM编程实现以下功能，在输入框或下拉框中填写信息，点击添加按钮后，在表格中增加一行，当勾选“操作”栏中的复选框，点击删除后，则将对应的行删除。 添加思路： 1. 添加按钮 加一个点击事件 2. 获得四个填写的员工信息 3. 获得table表格对象 4. 创建一个tr对象，tr对象添加到table对象的最后一行 5. 创建5个td对象，员工信息添加到td中 6. 5个td添加到tr中。 删除思路： 1. 获得选中的checkbox对象（复选框） 2. 获得checkbox对
DOM基础1-30 编程练习
请叫我二狗哥
05-12 347
1-30 编程练习 小伙伴们，今天我们学习了删除对象属性的方法，那么接下来用删除对象属性的方法把预设代码中P标签的样式全部去掉。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>dom属性的移除</title> ...
DOM案例练习-推荐几个DOM小案例练习有示例代码
m0_71485750的博客
06-04 668
说明: 做一个消息提示, 让消息的内容跟随数据动态发生改变示例代码:CSS部分 HTML结构 JS代码 案例二: 关闭删除消息 说明: 点击叉号将对应导航栏删除示例代码:CSS代码 HTML结构: JS代码: 案例三: 侧边栏的展示 说明: 鼠标经过添加动画将宽度调高-, 案例中的图片使用同一张精灵图, 且精灵图位置是有规律的, 我们选择通过js动态设置background-position示例代码:CSS代码 HTML结构 JS代码 案例四: 登录框
JavaScript练习
weixin_52578248的博客
12-15 84
输入一位三位数，将个位、十位、百位拆分，在控制台打印。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
黑马程序员-DOM编程基础知识练习程序（1-10）
u010962965的专栏
06-14 812
ASP.Net+Android+IO开发S、.Net培训、期待与您交流！   程序一、 利用标签的onclick事件演示documen.getElementById( )方法 ************************************************************************* 无标题文档 function demo() {
DOM基础2-16 编程练习
请叫我二狗哥
05-12 417
2-16 编程练习 小伙伴们，今天我们学习了怎样给DOM对象绑定事件，那么根据gif图，实现以下功能： （1）如果按钮的值是“全选”， 当点击按钮时，按钮的值变为“反选” （2）如果按钮的值是“反选”， 当点击按钮时，按钮的值变为“全选” 注意： 使用通过DOM获取HTML元素的方式绑定事件 gif图如下： 任务 根据gif效果图实现下面的任务步骤： 第一步：先写出按钮的ht...
正则积累
weixin_30881367的博客
06-21 102
* 重复零次或更多次(>= 0 次) + 重复一次或更多次(>= 1 次) ? 重复零次或一次(0次 或者 1次) {n} 重复n次 {n,} 重复n次或更多次 {n,m} 重复n到m次 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串的开始 ...
JavaScript基础——DOM
LiLi的博客
01-11 253
DOM编程-获取文本框的value.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM编程-获取文本框的value</title> </head> <body> <script type="text/javascript"> /* 1、JavaScript包括三大块： ECM
JS鼠标经过改变字体颜色，离开恢复
热门推荐
Ghjkku的博客
06-09 13万+
1111
通过JS实现鼠标放上去显示内容，鼠标离开内容隐藏。
最新发布
菠萝爱吃草莓的博客
08-29 2697
通过JS实现鼠标放上去显示内容，鼠标离开内容隐藏。
javascript特效--鼠标移动切换内容
qq_19901347的博客
11-21 2077
js特效--鼠标移动切换内容     我们经常在网页上看到，当鼠标移动到一个小标题，同一个内容框的东西发生了变化，我们移动到图片出现图片信息，移动到新闻，就出现新闻消息。感觉很神奇，接触之后才发现，基本功能的实现还是很简单的。    首先，写一个html页面，并定义两个小标题，就简单的显示‘新闻’和‘图片’并分别给两个标题定义两个不同的id，这里为了方便定义了一个无序列表(为了在鼠标放在文字...
【HTML】- 鼠标移动时内容进行切换
baidu_hxl的博客
07-02 6204
鼠标移动时内容进行切换
定时关闭广告2020/11/24
weixin_50286102的博客
11-24 487
setTimeout(function() { ad.style.display = ‘none’ }, 2000) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
JavaScript实现表单校验代码
爱酷码的博客
12-28 463
表单校验功能，当失去焦点时，如果用户名或密码为空，在其后添加提醒信息 提示：提示信息可以放在span中，颜色通过css样式设置 代码如下 <body> 用户名：<input name="username" type="text" onfocus="handleFocus()" onblur="nameBlur()" onchange="nc()"/><font id="1" color="red"></font><br/&g...
vue鼠标移入改变字体颜色,移出恢复原来颜色
xx820702的博客
04-12 5092
// @mouseover鼠标移入 @mouseleave鼠标移出 <template> <div> <p @mouseover="yr" @mouseleave="yc" :style="active">我是文字内容</p> </div> </template> <script> export default { data() { return { active:'' .
h1标签改变字体颜色、大小
u011964285的专栏
07-25 5万+
pageEncoding="ISO-8859-1"%> http://www.w3.org/TR/html4/loose.dtd"> Insert title here style="color:red ; font-size:50px">Hello JSP!!!
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值