JS DOM练习例子01

最新推荐文章于 2022-11-04 13:00:00 发布

一虹

最新推荐文章于 2022-11-04 13:00:00 发布

阅读量302

点赞数 1

分类专栏：前端文章标签： js css html

本文链接：https://blog.csdn.net/qq_43293348/article/details/108759586

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

JS DOM练习例子01

1.1 新浪注册登记验证

不包含正则，只涉及输入长度

效果
在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p {
				display: inline-block;
			}
			.wrong{
				color:#e64141;
				background: url(img/wrong.png) no-repeat left center;
			}
			.right{
				color:#808080;
				background: url(img/right.png) no-repeat left center;
			}
		</style>
	</head>
	<body>
		<div>
			手机号码：
			<input type="text" value="">
			<p></p>
			<br>
			设置密码：
			<input type="password" value="">
			<p></p>
		</div>
		<script>
			var ipts = document.querySelectorAll('input');
			var ps = document.querySelectorAll('p');
			ipts[0].onfocus = function() {
				ps[0].innerHTML = '&nbsp;&nbsp;&nbsp;请使用11位数字';
				ps[0].className='right';
			}
			ipts[0].onblur = function() {
				if(this.value==''){
					ps[0].innerHTML = '&nbsp;&nbsp;&nbsp;请输入手机号码';
					ps[0].className='wrong';
				}
				else if(this.value.length==11){
					ps[0].innerHTML = '&nbsp;&nbsp;&nbsp;';
					ps[0].className='right';
				}
				else {
					ps[0].innerHTML = '&nbsp;&nbsp;&nbsp;请使用11位数字';
					ps[0].className='wrong';
				}
			}
			ipts[1].onfocus = function() {
				ps[1].innerHTML = '&nbsp;&nbsp;&nbsp;6-16位字符';
				ps[1].className='right';
			}
			ipts[1].onblur = function() {
				if(this.value==''){
					ps[1].innerHTML = '&nbsp;&nbsp;&nbsp;请输入登录密码';
					ps[1].className='wrong';
				}
				else if(this.value.length>=6 && this.value.length<=16){
					ps[1].innerHTML = '&nbsp;&nbsp;&nbsp;';
					ps[1].className='right';
				}
				else {
					ps[1].innerHTML = '&nbsp;&nbsp;&nbsp;请使用6-16位字符';
					ps[1].className='wrong';
				}
			}
		</script>
	</body>
</html>

1.2 淘宝关闭二维码

效果
在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
				position: relative;
				margin-left: 50px;
				width: 100px;
				height: 100px;
				line-height: 100px;
				border: 1px solid #ccc;
				text-align: center;
			}

			div img {
				margin-top: 15px;
				width: 80px;
				height: 80px;
			}

			div i {
				position: absolute;
				top: -1px;
				left: -17px;
				width: 15px;
				height: 15px;
				line-height: 15px;
				border: 1px solid #ccc;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/tao.png" alt="">
			<i>x</i>
		</div>
		<script>
			var close = document.querySelector('i');
			var box = document.querySelector('div');
			close.onclick = function(){
				box.style.display='none';
			}
		</script>
	</body>
</html>

1.3 全选单选

效果

在这里插入图片描述
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" id='all'></th>
					<th>商品</th>
					<th>价钱</th>
				</tr>
			</thead>
			<tbody id='tb'>
				<tr>
					<td><input type="checkbox"></td>
					<td>ipad10</td>
					<td>5000</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>iphone10</td>
					<td>8888</td>
				</tr>
			</tbody>
		</table>
		<script>
			var allCheck = document.querySelector('#all');
			var tbChecks = document.getElementById('tb').querySelectorAll('input');
			allCheck.onclick = function() {
				for (var i = 0; i < tbChecks.length; i++) {
					tbChecks[i].checked = this.checked;
				}
			}
			for (var i = 0; i < tbChecks.length; i++) {
				tbChecks[i].onclick = function() {
					var flag = true;
					for (var i = 0; i < tbChecks.length; i++) {
						if (!tbChecks[i].checked) {
							flag = false;
							break;
						}
					}
					allCheck.checked = flag;
				}
			}
		</script>
	</body>
</html>

1.4 留言板

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li {
				color: pink;
			}
		</style>
	</head>
	<body>
		<textarea name="" id=""></textarea>
		<button>发布</button>
		<ul>

		</ul>
		<script>
			var text = document.querySelector('textarea');
			var btn = document.querySelector('button');
			var ul = document.querySelector('ul');
			btn.onclick = function() {
				if (text.value == '') {
					alert('请输入留言');
					return false;
				} else {
					console.log(text.value);
					var li = document.createElement('li');
					li.innerHTML = text.value + "<a href='javascript:;'> 删除</a>";
					ul.insertBefore(li, ul.children[0]);
				}
				var dels = document.querySelectorAll('a');
				for (var i = 0; i < dels.length; i++) {
					dels[i].onclick = function() {
						ul.removeChild(this.parentNode);
					}
				}
			}
		</script>
	</body>

</html>

跟着b站的pink老师学习前端基础，看完视频自己敲代码练习加深记忆。

我是一只努力飞的菜鸟，大家一起加油吧。
如有错误，请指出，大家一起进步哦！
2020/09/23

一虹

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS DOM练习例子01

JS dom练习例子1.1 新浪注册登记验证1.2 淘宝关闭二维码1.1 新浪注册登记验证不包含正则，只涉及输入长度效果代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> p { display: inline-block; } .wrong{ col
复制链接

扫一扫