Js案例（可重用）

最新推荐文章于 2023-02-19 22:12:05 发布
最新推荐文章于 2023-02-19 22:12:05 发布
阅读量287 收藏 4
点赞数
分类专栏： JavaStudy2020 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45629145/article/details/110825166
版权

将数组里面的对象的指定属性拼接成字符串

actorsName(array) {
      let str = '';
      str = array.map((obj) => {return obj.name}).join(',')
      console.log("字符串:"+str)
      return str
    }

利用JavaScript检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单，用户名必须是3-10位英文字母或数字；口令必须是6-20位；两次输入口令必须一致

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script>
			//利用JavaScript检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单，用户名必须是3-10位英文字母或数字；口令必须是6-20位；两次输入口令必须一致
			function checkRegisterForm() {
				'use strict';
				let name = document.getElementById('username').value;
				let pwd = document.getElementById('password').value;
				let pwd2 = document.getElementById('password-2').vlaue;
				let namereg = /^[\w]{3,10}$/;
				let pwdreg = /[\w.]{6,20}$/;

				if (namereg.test(name)) {
					document.getElementById('u1').innerText = '用户名符合';
				} else {
					document.getElementById('u1').innerText = '用户名不符合';
					return false;
				}
				if (pwdreg.test(pwd)) {
					document.getElementById('p1').innerText = '密码符合';
				} else {
					document.getElementById('p1').innerText = '密码不符合';
					return false;
				}
				if (pwd == pwd2) {
					document.getElementById('p2').innerText = '第二次密码符合';
				} else {
					document.getElementById('p2').innerText = '第二次密码不符合';
					return false;
				}
			}
		</script>
	</head>
	<body>
		<!-- HTML结构 -->
		<form
			id="test-register"
			action="#"
			target="_blank"
			onsubmit="return checkRegisterForm()"
		>
			<p id="test-error" style="color: red"></p>
			<p>
				用户名: <input type="text" id="username" name="username" /><span
					id="u1"
				></span>
			</p>

			<p>
				口令: <input type="password" id="password" name="password" /><span
					id="p1"
				></span>
			</p>

			<p>
				重复口令: <input type="password" id="password-2" /><span id="p2"></span>
			</p>

			<p>
				<button type="submit">提交</button>
				<button type="reset">重置</button>
			</p>
		</form>
	</body>
</html>

节点操作

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>节点操作</title>
		<style>
			#div1 {
				background-color: orange;
				width: 300px;
				height: 70px;
			}
			#i1 {
				width: 290px;
				height: 30px;
				margin-left: 1px;
			}
			.b {
				margin-top: 5px;
				margin-left: 40px;
				color: white;
				background-color: black;
			}
			#div2 {
				width: 300px;
				height: 600px;
				background-color: rgba(255, 238, 0, 0.377);
			}
		</style>
		<script>
			//定义一个方法，生成随机的颜色范围：0-255
			function randomRgba() {
				let str =
					"rgba(" +
					parseInt(Math.random() * 256) +
					"," +
					parseInt(Math.random() * 256) +
					"," +
					parseInt(Math.random() * 256) +
					"," +
					1 +
					")";
				return str;
			}
			window.onload = function () {
				//获取div1节点
				let div1 = document.getElementById("div1");
				//获取输入框
				let input = document.getElementById("i1");
				//获取所有的按钮
				let buttons = document.getElementsByClassName("b");
				//获取div2
				let div2 = document.getElementById("div2");
				//设置第一个按钮的操作
				buttons[0].onclick = function () {
					//创建一个元素节点div
					let newdiv = document.createElement("div");
					//创建一个文本节点,并将输入框的值添加到文本节点
					let text = document.createTextNode(input.value);

					//将文本节点添加到div节点下
					newdiv.appendChild(text);
					//将新div添加颜色样式
					newdiv.style.backgroundColor = randomRgba();
					//将新的div添加到div2节点的末尾
					div2.appendChild(newdiv);
					//添加完将输入框清空
					input.value = "";
					//创建一个按钮节点
					let b = document.createElement("button");
					b.innerText = "删除";
					b.style.marginLeft = "10px";
					b.onclick = function () {
						div2.removeChild(newdiv);
					};
					newdiv.appendChild(b);
				};

				//设置第二个按钮的操作
				buttons[1].onclick = function () {
					//删除最后一个节点
					div2.removeChild(div2.lastChild);
				};
				//克隆最后一个节点
				buttons[2].onclick = function () {
					let divlast = div2.lastChild.cloneNode(true);
					div2.appendChild(divlast);
				};
			};
		</script>
	</head>
	<body>
		<div id="div1">
			<input type="text" id="i1" />
			<button type="button" class="b">添加</button>
			<button type="button" class="b">删除</button>
			<button type="button" class="b">复制</button>
		</div>
		<div id="div2"></div>
	</body>
</html>

选项卡案例：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>选项卡操作</title>
		<style>
			#div1 {
				width: 300px;
				height: 330px;
				background-color: antiquewhite;
			}
			#div1 .activity {
				background-color: orange;
				color: blue;
			}

			#div1 div {
				width: 295px;
				height: 300px;
				border: 1px solid black;
				display: none;
			}
		</style>

		<script>
			onload = function () {
				//获取div1
				let div1 = document.getElementById("div1");
				//获取div1下所有的按钮和div
				let buttons = div1.getElementsByTagName("button");
				let divs = div1.getElementsByTagName("div");
				let index = 0;
				for (let i = 0; i < buttons.length; i++) {
					buttons[i].onclick = function () {
						for (let j = 0; j < buttons.length; j++) {
							buttons[j].className = "";
							divs[j].style.display = "none";
						}
						this.className = "activity";
						divs[i].style.display = "block";
					};
				}
			};
		</script>
	</head>
	<body>
		<div id="div1">
			<button class="activity">JavaScript</button>
			<button>Java</button>
			<button>Python</button>
			<div style="display: block">
				JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。
				简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。
			</div>
			<div>
				JavaScript一度被认为是一种玩具编程语言，它有很多缺陷，所以不被大多数后端开发人员所重视。很多人认为，写JavaScript代码很简单，并且JavaScript只是为了在网页上添加一点交互和动画效果。
			</div>
			<div>
				但这是完全错误的理解。JavaScript确实很容易上手，但其精髓却不为大多数开发人员所熟知。编写高质量的JavaScript代码更是难上加难。
			</div>
		</div>
	</body>
</html>

跟随鼠标移动提示框案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>跟随鼠标移动提示框</title>
		<style>
			a {
				display: block;
				font-size: 20px;
				margin: 20px;
				width: 130px;
			}
			#msg {
				width: 150px;
				height: 30px;
				background-color: gray;
				color: white;
				display: none;
				position: absolute;
			}
		</style>
		<script>
			//创建一个数组，用于存放div标签的内容
			let mgs = [
				'唐太宗：哈哈哈',
				'唐高宗：呵呵呵',
				'唐玄宗：嘻嘻嘻',
				'武则天：哈啊哈',
			];

			onload = function () {
				//获取a标签对象
				let a = document.getElementsByTagName('a');
				//获取div
				let div = document.getElementById('msg');
				//遍历a标签给所有a标签添加鼠标移入时间
				for (let i = 0; i < a.length; i++) {
					//添加鼠标移入事件
					a[i].onmouseover = function () {
						div.style.display = 'block';
					};
					//添加移出事件
					a[i].onmouseout = function () {
						div.style.display = 'none';
					};
					//添加div跟随鼠标移动事件
					a[i].onmousemove = function (ev) {
						//获取事件对象
						let e = ev || event;
						div.style.left = e.clientX + 5 + 'px';
						div.style.top = e.clientY + 5 + 'px';
						div.innerText = mgs[i];
					};
				}
			};
		</script>
	</head>
	<body>
		<a href="#">唐太宗</a>
		<a href="#">唐高宗</a>
		<a href="#">唐玄宗</a>
		<a href="#">武则天</a>
		<div id="msg"></div>
	</body>
</html>

拖拽节点案例

在这里插入图片描述

/**
 * 元素节点跟着鼠标拖动（可以越界）
 * @param {拖拽的节点} node 
 */
function drag(node) {
	node.onmousedown = function (ev) {
		let e = ev || event;
		var omlift = e.clientX - node.offsetLeft;
		var omtop = e.clientY - node.offsetTop;
		//鼠标移动事件
		document.onmousemove = function (ev) {
			let e = ev || event;
			node.style.left = e.clientX - omlift + 'px';
			node.style.top = e.clientY - omtop + 'px';
		};
	};
	document.onmouseup = function() {
		document.onmousemove = null;
	}
}

不可越界

/**
 * 元素节点跟着鼠标移动（不能越界）
 * @param {拖拽的结点} node 
 */

function drag(node) {
	node.onmousedown = function (ev) {
		let e = ev || event;
		var omlift = e.clientX - node.offsetLeft;
		var omtop = e.clientY - node.offsetTop;
		//鼠标移动事件
		document.onmousemove = function (ev) {
			let e = ev || event;
			//拖拽后div的坐标
			let l = e.clientX - omlift;
			let t = e.clientY - omtop;
			//出界控制
			if(l <= 0) {
				l = 0;
			}
			let windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
			if(l >= windowWidth - node.offsetWidth) {
				l = windowWidth - node.offsetWidth
			}
			if(t <= 0) {
				t = 0;
			}
			let windowHeight = document.documentElement.clientHeight || documetn.body.clientHeight;
			if(t >= windowHeight - node.offsetHeight) {
				t = windowHeight - node.offsetHeight;
			}
			node.style.left = l + 'px';
			node.style.top = t + 'px';
		};
	};
	document.onmouseup = function() {
		document.onmousemove = null;
	}
}

跟随鼠标移动案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>跟随鼠标移动</title>
		<style>
			* {
				margin: 0px;
        padding: 0px;
			}
			div {
				position: absolute;
				width: 20px;
				height: 20px;
				background-color: red;
				border-radius: 50%;
			}
		</style>
		<script>
			onload = function () {
				//获取到所有的div
				var divs = document.getElementsByTagName('div');
				//添加鼠标移动事件
				document.onmousemove = function (ev) {
					let e = ev || event;
					for (let i = divs.length - 1; i > 0; i--) {
						divs[i].style.left = divs[i - 1].offsetLeft + 'px';
						divs[i].style.top = divs[i - 1].offsetTop +'px';
					}
					divs[0].style.left = e.clientX + 'px';
					divs[0].style.top = e.clientY +'px';
				};
			};
		</script>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

定义一个方法，生成随机的颜色范围：0-255

//定义一个方法，生成随机的颜色范围：0-255
function randomRgba() {
	let str =
		"rgba(" +
		parseInt(Math.random() * 256) +
		"," +
		parseInt(Math.random() * 256) +
		"," +
		parseInt(Math.random() * 256) +
		"," +
		1 +
		")";
	return str;
}

获取元素样式属性值

/**
 * 根据传入的结点对象和样式，分别对浏览器兼容进行判断后，选择对应的兼容方法
 * currentStyle[]对象：返回所有样式声明包括外部、内部、内联，按照css层叠规则作用于元素的最终样式
 * getComputedStyle(node)[cssStyle]：可以获取当前元素所使用的css属性值。
 * @param {需要获取有效样式的结点对象} node 
 * @param {要获取的样式属性名} cssStyle 
 */
function getStyle(node, cssStyle) {
	return node.currentStyle //踩坑点：没有（）
		? node.currentStyle[cssStyle]
		: getComputedStyle(node)[cssStyle];
}

获取指定节点下，指定名称的所有子节点

/**
 * 自定义函数，获取指定节点下，指定名称的所有子节点
 * @param {父节点对象} nodes
 * @param {需要获取的子节点对象的Class名称} ClassStr
 */
function ElementByClassName(nodes, ClassStr) {
	var arrs = nodes.getElementsByTagName("*");
	var arr = [];
	for (let index = 0; index < arrs.length; index++) {
		if (arrs[index].className == ClassStr) {
			arr.push(arrs[index]);
		}
	}
	return arr;
}
@小匠
关注
专栏目录
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
JavaScript事件（二）—— 注册事件的几种方法
weixin_43183219的博客
02-14 2946
事件注册的基本知识，事件三要素，事件注册的三种方式，传统行内绑定，动态绑定以及事件监听注册方式
利用JavaScript操作表单的小例子
左岸
08-21 1399
t检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单：用户名必须是3-10位英文字母或数字；口令必须是6-20位；两次输入口令必须一致。<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()"> <p id="test-error" style="color:
JavaScript学习笔记（五）
qq_27144571的博客
02-18 180
五、浏览器 1.“window对象不但充当全局作用域，而且表示浏览器窗口” 'use strict'; // 获取浏览器窗口的内部宽度和高度（除去菜单栏、工具栏、边框等占位元素的显示网页的净宽高），但IE<=8不支持 console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight); // 获取浏览器窗口的整个宽高 console.log('window outer size: ' + window
DOM操作表单
qq_34752068的博客
08-03 219
DOM操作表单 利用JavaScript检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单： 用户名必须是3-10位英文字母或数字； 口令必须是6-20位； 两次输入口令必须一致。 html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;...
JavaScript案例-js表单验证
02-16
在这个"JavaScript案例-js表单验证"中，提供的"03_validation"文件很可能包含了上述提到的验证示例代码。你可以深入研究这些代码，了解具体的实现方式，并尝试根据自己的需求进行修改和扩展。通过实践，你将更好地...
JS案例JS案例JS案例
06-28
在本“JS案例”中，我们将深入探讨JavaScript在实际开发中的应用，通过具体的案例来理解其核心概念和技术。 1. **基本语法与数据类型** JavaScript支持多种数据类型，包括字符串、数字、布尔值、null、undefined、...
JavaScript案例
12-04
在本“JavaScript案例”压缩包中，包含了一系列的JS代码示例，这些案例可以帮助我们深入理解和掌握JavaScript的核心概念、语法结构以及实际应用技巧。 1. **基础语法** JavaScript的基础包括变量定义（var、let、...
javascript的理解及经典案例分析
10-22
除了客户端应用，JavaScript还可用于服务器端开发，如Node.js平台。此外，JavaScript还可以通过某些桌面引擎，例如node-webkit，渲染成桌面应用程序。在游戏开发领域，Unity3D引擎支持使用JavaScript编写游戏逻辑。 ...
vue.js购物车案例
09-27
Vue.js是一款轻量级的JavaScript库，以数据驱动和组件化为核心，使得开发过程更为简洁高效。在这个案例中，我们将深入探讨Vue.js的关键特性及其在购物车应用中的应用。 首先，Vue.js的数据绑定机制是核心概念之一。...
利用JavaScript检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单...
03-01 616
<!-- HTML结构 --><form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()"> <p id="test-error" style="color:red"></p> <p> ...
提交表单input与MD5
weixin_30337251的博客
08-14 435
JavaScript可以以两种方式来处理表单的提交 方式一是通过<form>元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单： <!-- HTML --> <form id="test-form"> <input type="text" name="te...
JS具体实例（一）
nabirt的博客
02-08 3022
JavaScript的一些实例记录
JavaScript基础——JS简单案例
m0_68794863的博客
12-04 5461
JS基础案例
javaScript常用案例
张张张张张高高的博客
09-06 9239
前端页面开发之javaScript常用案例
js基础精选案例
m0_64492064的博客
04-09 1694
主要是自己用来复习用的。如果想要练习的小伙伴也可以参考一下哦~ 1.[red','blue','red','green','pink','red'],求red出现的位置和次数 //思路是 先把第一个red的坐标找出来 然后遍历 每次查找的位置是上一个位置+1； var arr = ['red', 'blue', 'red', 'green', 'pink', 'red']; var index = arr.indexOf('red'); //0
js常用基础案例整理(持续更新)
weixin_41086056的博客
11-17 9807
这里写目录标题一级目录二级目录三级目录036-网页日历035-记住用户名(js代码)034-基础轮播图(js代码)033-京东放大镜效果(js代码)032-简单动画函数封装031-仿淘宝固定侧边栏+返回顶部按钮030-拖动的模态框029-发送短信倒计时案例028-倒计时效果027-模拟京东快递单号查询案例026-模拟京东按键输入内容025-跟随鼠标移动的小人024-动态生成表格案例023-删除留言案例022-新浪下拉菜单021-Tab栏切换(仿京东)020-全选与反选019-表格隔行变色018-开关灯效果0
20个JavaScript开发案列（二）
最新发布
终成大师的博客
02-19 2075
20个JavaScript开发案列(二)
20个JavaScript开发案列（一）
终成大师的博客
02-17 5121
20个JavaScript开发案列（一）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值