JavaScript笔记05

最新推荐文章于 2024-09-25 14:00:00 发布
最新推荐文章于 2024-09-25 14:00:00 发布
阅读量84 收藏
点赞数
分类专栏： JavaScript 文章标签： js javascript html checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwq_666/article/details/112428268
版权

表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<style type="text/css">
			span{
				color: red;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1.用户名不能为空
				2.用户名必须在6-14位之间
				3.用户名只能由数字和字母组成，不能含有其他符号（正则表达式）
				4.密码和确认密码一致，邮箱地址合法
				5.统一失去焦点验证
				6.错误提示信息统一在span标签中提示，并且要求字体12号，红色
				7.文本框再次获得焦点后，清空错误提示信息，如果文本框中的数据不合法，要求清空文本框的value
				8.最终表单中所有项均合法方可提交
			 */
			window.onload = function(){
				//获取username的span标签
				var usernameErrorSpan = document.getElementById("usernameError");
				//给用户名文本框绑定blur事件
				var usernameElt = document.getElementById("username");
				usernameElt.onblur = function(){
					//获取用户名
					var username = usernameElt.value;
					//去除前后空白
					username = username.trim();
					//判断用户名是否为空
					/* 
					方式1
					if(username){
						//代表username不是空字符串
						alert("username" + username);
					}else{
						//代表username是空字符串
						alert("username是空字符串");
					} */
					
					//方式2
					//if(username.length == 0){}
					
					//方式3
					if(username === ""){
						//用户名为空
						usernameErrorSpan.innerText = "用户名不能为空";
					}else{
						//用户名不为空
						//继续判断长度6-14
						if(username.length < 6 || username.length > 14){
							//用户名长度非法
							usernameErrorSpan.innerText = "用户名长度必须在6-14位长度之间";
						}else{
							//用户名长度合法
							//继续判断是否含有特殊字符
							var regExp = /^[A-Za-z0-9]+$/;
							var ok = regExp.test(username);
							if(ok){
								//用户名最终合法
							}else{
								//用户名中含有特殊符号
								usernameErrorSpan.innerText = "用户名只能由数字和字母组成";
							}
						}
					}	
				}
				//给username这个文本框绑定获得焦点事件
				usernameElt.onfocus = function(){
					//清空非法的value
					if(usernameErrorSpan.innerText != ""){
						usernameElt.value = "";
					}
					//清空span
					usernameErrorSpan.innerText = "";
				}
				
				//获取密码错误提示的span标签
				var pwdErrorSpan = document.getElementById("pwdError");
				//获取确认密码框对象
				var userpwd2Elt = document.getElementById("userpwd2");
				//绑定blur事件
				userpwd2Elt.onblur = function(){
					//获取密码和确认密码
					var userpwdElt = document.getElementById("userpwd");
					var userpwd = userpwdElt.value;
					var userpwd2 = userpwd2Elt.value;
					if(userpwd != userpwd2){
						//密码不一致
						pwdErrorSpan.innerText = "密码不一致";
					}else{
						//密码一致
					}
				}
				
				//绑定focus事件
				userpwd2Elt.onfocus = function(){
					if(pwdErrorSpan.innerText != ""){
						userpwd2Elt.value = "";
					}
					pwdErrorSpan.innerText = "";
				}
				
				//获取email的span
				var emailSpan = document.getElementById("emailError");
				//给email绑定blur事件
				var emailElt = document.getElementById("email");
				emailElt.onblur = function(){
					//获取email
					var email = emailElt.value;
					//编写email的正则表达式
					var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					var ok = emailRegExp.test(email);
					if(ok){
						//合法
					}else{
						//不合法
						emailSpan.innerText = "地址邮箱不合法";
					}
				}
				
				//给emailElt绑定onfocus
				emailElt.onfocus = function(){
					if(emailSpan.innerText != ""){
						emailElt.value = "";
					}
					emailSpan.innerText = "";
				}
				
				//给提交按钮绑定鼠标单机事件
				var submitBtnElt = document.getElementById("submitBtn");
				submitBtn.onclick = function(){
					//触发username的blur userpwd2的blur email的blur
					//不需要人工操作，使用js代码触发事件
					usernameElt.focus();
					usernameElt.blur();
					
					userpwd2Elt.focus();
					userpwd2Elt.blur();
					
					emailElt.focus();
					emailElt.blur();
					//当所有表单项目都是合法的时候，提交表单
					if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){
						//获取表单对象
						var userFormElt = document.getElementById("userForm");
						//可以在这里设置action
						userFormElt.action = "http://localhost:8080/jd/save";
						//提交表单
						userFormElt.submit();
					}
				}
			}
		</script>
		
		<!-- 这个表单提交应该使用post，这里为了检测，所以使用get -->
		<form method="get" id="userForm">
			用户名<input type="text" name="username" id="username" /><span id="usernameError"></span><br>
			密码<input type="text" name="userpwd" id="userpwd" /><br>
			确认密码<input type="text" id="userpwd2" /><span id="pwdError"></span><br>
			邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br>
			<!-- <input type="submit" value="注册" /> -->
			<input type="button" value="注册" id="submitBtn" />
			<input type="reset" value="重置" />
		</form>
	</body>
</html>

复选框全选和取消全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的全选和取消全选</title>
	</head>
	<body>
		<script type="text/javascript">
			/* window.onload = function(){
				var firstChk = document.getElementById("firstChk");
				firstChk.onclick = function(){
					//获取第一个复选框的选中状态(复选框对象checkbox对象)
					//根据name获取所有元素
					var aihaos = document.getElementsByName("aihao");
					if(firstChk.checked){
						//全选
						for(var i = 0; i < aihaos.length; i++){
							aihaos[i].checked = true;
						}
					}else{
						//取消全选
						for(var i = 0; i < aihaos.length; i++){
							aihaos[i].checked = false;
						}
					}
				}
			} */
			//简写
			window.onload = function(){
				var aihaos = document.getElementsByName("aihao");
				var firstChk = document.getElementById("firstChk");
				firstChk.onclick = function(){
					for(var i = 0; i < aihaos.length; i++){
						aihaos[i].checked = firstChk.checked;
					}
				}
				
				//对以上数组进行遍历
				var all = aihaos.length;
				for(var i = 0; i < aihaos.length; i++){
					aihaos[i].onclick = function(){
						var checkedCount = 0;
						//总数量和选中的数量相等的时候，第一个复选框选中
						for(var i = 0; i < aihaos.length; i++){
							if(aihaos[i].checked){
								checkedCount++;
							}
						}
						firstChk.checked = (all == checkedCount);
						/* if(all == checkedCount){
							firstChk.checked = true;
						}else{
							firstChk.checked = false;
						} */
					}
				}
			}
		</script>
		<input type="checkbox" id="firstChk"/>全选<br>
		<input type="checkbox" name="aihao" value="smoke" />抽烟<br>
		<input type="checkbox" name="aihao" value="drink" />喝酒<br>
		<input type="checkbox" name="aihao" value="tt" />烫头<br>
	</body>
</html>

获取下拉列表选中项的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取下拉列表选中项的value</title>
	</head>
	<body>
	<!-- 
		<select οnchange="alert(this.value)">
			<option value="">--请选择省份--</option>
			<option value="001">河北省</option>
			<option value="002">河南省</option>
			<option value="003">山东省</option>
			<option value="004">山西省</option>
		</select>
	-->
	<!-- 第二种方法 -->
	<script type="text/javascript">
		window.onload = function(){
			var provinceListElt = document.getElementById("provinceList");
			provinceListElt.onchange = function(){
				//获取选中项的value
				alert(provinceListElt.value);
			}
		}
	</script>
	<select id="provinceList">
		<option value="">--请选择省份--</option>
		<option value="001">河北省</option>
		<option value="002">河南省</option>
		<option value="003">山东省</option>
		<option value="004">山西省</option>
	</select>
	</body>
</html>

周期函数setinterval

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示网页时钟</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				关于js内置的支持类：Date，可以用来获取时间/日期
			 */
			//获取系统当前时间
			var nowTime = new Date();
			//输出
			//document.write(nowTime);//Sun Jan 03 2021 16:17:08 GMT+0800 (中国标准时间)
			//转换成具有本地语言环境的日期格式
			nowTime = nowTime.toLocaleString();
			document.write(nowTime);//2021/1/3 下午4:18:53
			document.write("<br>");
			document.write("<br>");
			//document.write相当于Java的System.out.println();
			
			//当以上格式不是自己想要的，可以通过日期获取年月日等信息，自定制日期格式
			var t = new Date();
			var year = t.getFullYear();//返回年信息，以全格式返回
			var month = t.getMonth();//月份是：0-11
			//var dayfWeek = t.getDay();//获取的一周的第几天（0-6）
			var day = t.getDate();//获取日信息
			document.write(year + "年" + month + "月" + day + "日");//2021年0月3日
			document.write("<br>");
			document.write("<br>");
			
			//重点：怎么获取毫秒数（从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数）
			//var times = t.getTime();
			//document.write(times);//一般会使用毫秒数当时间戳（timestamp）
			//简写
			document.write(new Date().getTime());
		</script>
		
		<script type="text/javascript">
			function displayTime(){
				var time = new Date();
				var strTime = time.toLocaleString();
				document.getElementById("timeDiv").innerHTML = strTime;
			}
			//每隔1秒调用displayTime()函数
			function start(){
				//从这行代码执行结束开始，则会不间断的，每隔1000毫秒调用1次displayTime()函数
				v = window.setInterval("displayTime()",1000);
			}
			
			function stop(){
				window.clearInterval(v);
			}
		</script>
		<br><br>
		<input type="button" value="显示系统时间" onclick="start();" />
		<input type="button" value="系统时间停止" onclick="stop();" />
		<div id="timeDiv"></div>
	</body>
</html>

内置支持类Array

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内置支持类Array(了解即可)</title>
	</head>
	<body>
		<script type="text/javascript">
			//创建长度位0的数组
			var arr = [];
			alert(arr.length);//0
			//数据类型随意
			var arr2 = [1,2,3,false,"abc",3.14];
			alert(arr2.length);//6
			
			//下标会越界吗？
			arr2[7] = "test";
			document.write("<br>");
			//遍历
			for(var i = 0; i < arr2.length; i++){
				document.write(arr2[i] + "<br>");
			}
			/* 
			 1
			 2
			 3
			 false
			 abc
			 3.14
			 undefined
			 test
			 */
			document.write("<br>");
			
			//另一种创建数组对象的方式
			var a = new Array();
			alert(a.length);//0
			
			var a2 = new Array(3);//3表示长度
			alert(a2.length);
			
			var a3 = new Array(3,2);
			alert(a3.length);//2
			
			var a4 = [1,2,3,9];
			var str = a4.join("-");
			alert(str);//1-2-3-9
			
			//在数组末尾添加一个元素(数组长度+1)
			a4.push(10);
			alert(a4.join("-"));
			
			//将数组末尾的元素弹出
			var endElt = a4.pop();
			alert(endElt);
			alert(a4.join("-"));
			
			//注意：js中的数组可以自动模拟栈数据结构：后进先出，先进后出
			
			//反转数组
			a4.reverse();
			alert(a4.join("="));
		</script>
	</body>
</html>
最爱琴女E
关注
专栏目录
狂神说系列 JavaScript笔记
06-15
【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源，旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性，旨在构建一个...
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。JavaScript不是Java的子集，两者之间没有直接关联。JS起初名为LiveScript，但在...
javascript笔记
2301_80250017的博客
03-16 1904
1. JavaScript是Web开发领域中的一种强大的编程语言，主要用于开发交互式的网页。我们在计算机，手机等设备上浏览的网页，其多数交互逻辑都可以通过JavaScript实现。下面介绍HTML，CSS，JavaScript的区别2.JavaScript是由ECMAScript，DOM，BOM3.JavaScript初体验像这样使用，在网页打开时会弹出一个警告框，内容为Hello JavaScript。
Javascript入门学习笔记
weixin_61370021的博客
04-27 4660
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1095
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
JavaScript笔记（全）
程序猿小九九的博客
06-04 6508
JavaScript是一门世界上最流行的脚本语言一个合格的后端人员，必须要精通JavaScriptECMAScript可以理解为JavaScript的一个标准最新版本已经到es6但是大部分浏览器还只停留在支持es5代码上开发环境~线上环境，版本不一致内部标签 外部引入我的第一个JavaScript程序.html qj.js 03、浏览器控制台使用 04、数据类型快速浏览 变量 numberjs不区分小数和整数，number 字符串‘abc’“abc”布尔值truefalse逻辑运算 比较运算符 这
JavaScript 笔记部分导航
GoldenaArcher的博客
05-28 770
重新学习了一下，可以算是用自己的语言重新组织了一下上面的笔记，并且增添了自己写的一个小案例，感觉现在才算是对 iterator 和 generator 稍微入门一些了。看了看也快 50 篇笔记了，稍微整理一下写了点什么，之后复习的时候也方便找内容。一个整合，第 5 章的内容是基本引用类型，其中一部分内容拆成不同的笔记了。array，map & set 部分内容因为内容量的关系，也单独拆了出来。其实这里的内容，语句里面都提过，然后忘了。暂时归类到这里，等红宝书过到这里再看看要不要修改……
JavaScript笔记
Blue_Pepsi_Cola的博客
01-03 2975
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为。2.字符串类型：string var s = “abc”/‘abc’;只声明不赋值就是未定义类型。// fn2("孙尚香",60);// fn5("刘备",20);// fn6("吕布",18);//调用 和java一样调用。
JavaScript学习笔记
郑德帅
12-17 1万+
1..什么是JavaScript? 客户端的解释性脚本语言.与Java之间不存在任何关系; 2.JavaScript的语法结构，声明与引入 <script type="text/javascript">...</script> <script type="text/javascript" src="JS文件路径及名称"></scrip...
自学JavaScript笔记、JavaScript基础总结
m0_69144551的博客
04-08 1451
JavaScript基础；JavaScript简介；JS输入和输出；变量；数据类型；运算符。分支流程控制（if ；if else ；if else if；Switch，三元表达式 ）；循环控制流程（for；while；do while），break、continue关键字，数组
JavaScript Math 对象笔记
热门推荐
Mr_Bobcp的博客
11-16 1万+
目录定义属性和方法Math对象属性Math对象方法例子 定义 Math 对象主要是为了方便解决数学上的常见但不常规的计算，属性包含如圆周率这类特定数值，方法包含如取绝对值这类计算。 Math对象的使用就是调用函数把返回值赋给变量，不需要实例化。 属性和方法 Math对象属性 属性 描述 数学表达 数值大小 E 自然指数 e 2.71828… LN2 2的自然对数 ln2 0.69314… LN10 10的自然对数 ln10 2.30258… LOG2E 2为底数，e的对数 log
Javascript笔记
zedlam的博客
03-09 725
javascript学习笔记
JavaScript笔记第一章—课程准备.pdf
09-22
JavaScript是目前网页开发中广泛使用的脚本语言，主要用于网页内容的交互式处理和动态更新。本章内容主要介绍了学习JavaScript之前的一些基础知识和准备工作，包括注释、JavaScript的引入方式、输入输出工具的使用、...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4339
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 304
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
最新发布
m0_59480939的博客
09-25 156
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 344
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
JavaScript入门教程笔记
"JavaScript读书笔记，来自一个入门级的教程网站，可以帮助节省学习时间，主要讲解JavaScript的基础知识，包括如何在HTML中嵌入JavaScript、标签的使用以及JavaScript代码的执行时机和位置。" JavaScript是一种广泛...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值