2021-08-07JavaScript代码

最新推荐文章于 2023-01-17 23:08:17 发布

dasd11sda456

最新推荐文章于 2023-01-17 23:08:17 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/dasd11sda456/article/details/119493738

版权

005-表单验证

<!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(){
				//获得用户名的span
				var usernameEltSpan = document.getElementById("usernameSpan");
				//获取用户名元素
				var usernameElt = document.getElementById("username");
				usernameElt.onblur=function(){
					//获取用户名的values
					var username = usernameElt.value;
					//去除空白
					username = username.trim();
					//判断用户名是否为空
					/*if(username){
						alert(username);
					}else{
						alert("用户名不能为空");
					}*/
					//if(username.length==0){
					if(username===""){
						//用户名为空
						usernameEltSpan.innerText="用户名不能为空";
					}else{
						//用户名不为空
						//用户名必须在6-14位之间
						if(username.length<6||username.length>14){
							usernameEltSpan.innerText="用户名必须在6-14位之间";
						}else{
							//用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
							RegExp=/^[A-Za-z0-9]+$/;
							var ok = RegExp.test(username);
							if(ok){
								//用户名合法
							}else{
								usernameEltSpan.innerText="用户名只能有数字和字母组成，不能含有其它符号";
							}		
						}	
					}	
				}
				//给用户名绑定获得焦点事件onfocus
				usernameElt.onfocus=function(){
					// 清空非法的value
					if(usernameEltSpan.innerText!=""){
						usernameElt.value="";
					}
					// 清空span
					usernameEltSpan.innerText="";
				}	
			
			
			//获得确认密码span
			var pwdEltSpan = document.getElementById("passwordSpan")
			//获取确认密码对象
			var pwdElt2 = document.getElementById("password1");
			pwdElt2.onblur=function(){
				var pwdElt1 = document.getElementById("password");
				//密码
				var pwd1 = pwdElt1.value;
				//确认密码
				var pwd2 = pwdElt2.value;
				if(pwd1===pwd2){
					//密码相同
				}else{
					pwdEltSpan.innerText="密码与确认密码不一致";
				}
			}
			
			//给确认密码绑定获得焦点事件focus
			pwdElt2.onfocus=function(){
				if(pwdEltSpan.innerText!=""){
					pwdElt2.value="";
				}
				pwdEltSpan.innerText="";
			}
			
			//邮箱地址合法
			var emailEltSpan = document.getElementById("emailSpan");
			var emailElt=document.getElementById("email");
			emailElt.onblur=function(){
				email = emailElt.value;
				emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				var ok = emailRegExp.test(email);
				if(ok){
					//邮箱地址合法
				}else{
					emailEltSpan.innerText="邮箱地址不合法";
				}
			}
			
			//给邮箱绑定获得焦点事件focus
			emailElt.onfocus=function(){
				if(emailEltSpan.innerText!=""){
					emailElt.value="";
				}
				emailEltSpan.innerText="";
			}
			
			//给提交按钮绑定鼠标单击时间
			var submitBtnElt = document.getElementById("submitBtn");
			submitBtnElt.onclick=function(){
				// 触发username的blur userpwd2的blur email的blur
				// 不需要人工操作,使用纯JS代码触发事件.
				usernameElt.focus();
				usernameElt.blur();
				
				pwdElt2.focus();
				pwdElt2.blur();
				
				emailElt.focus();
				emailElt.blur();
				
				// 当所有表单项都是合法的时候,提交表单
				if(usernameEltSpan.innerText==""&&pwdEltSpan.innerText==""&&emailEltSpan.innerText==""){
					//获取表单对象
					var userFormElt = document.getElementById("userForm");
					// 可以在这里设置action,也可以不在这里
					userFormElt.action="http://localhost:8080/jd/save";
					//提交表单
					userFormElt.submit();
				}
				
				
				
			}
	
		}	
		</script>
		<form id="userForm" method="get">
		用户名<input type="text"  name="username" id="username"/><span id="usernameSpan"></span><br>
		密码<input type="text"  name="password"  	id="password"/><br>
		确认密码<input type="text" id="password1" /><span id="passwordSpan"></span><br>
		邮箱<input type="text"  name="email"  id="email" /><span id="emailSpan"></span><br>
		<!--<input type="submit" value="注册" />-->
		<input type="button" value="注册" id="submitBtn" />
		<input type="reset" value="重置" />
		</form>
	</body>
</html>

006-复选框的全选和取消全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的全选和取消全选</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			window.onload=function(){
				var chk=document.getElementById("Chk");
				chk.onclick=function(){
					// 获取第一个复选框的选中状态(复选框对象checkbox对象)
					//alert(chk.checked);
					//根据name获取所有元素
					var aiHaolist = document.getElementsByName("aihao");
					if(chk.checked){
						//全选
						for(var i = 0;i<aiHaolist.length;i++){
							aiHaolist[i].checked=true;
						}
					}else{
						for(var i = 0;i<aiHaolist.length;i++){
							aiHaolist[i].checked=false;
						}
					}
				}	
			}
			*/
		   window.onload=function(){
			   var aihaos = document.getElementsByName("aihao");
			   var chk = document.getElementById("Chk");
			   chk.onclick=function(){
				   for(var i = 0 ; i<aihaos.length;i++){
					   aihaos[i].checked=chk.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++;
						   }
					   }
					   chk.checked=(all==checkedCount);
					   /*if(all == checkedCount){
						   chk.checked=true;
					   }else{
						   chk.checked=false;
					   }*/
				   }
			   } 
		   }
		   
		   
			
		</script>
		<input type="checkbox" id="Chk"/><br>
		<input type="checkbox" name="aihao" value="sing"/>唱<br>
		<input type="checkbox" name="aihao" value="dance"/>跳<br>
		<input type="checkbox" name="aihao" value="rap"/>Rap<br>
	</body>
</html>

007-获取下拉列表选中项的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取下拉列表选中项的value</title>
	</head>
	<body>
		<script type="text/javascript">
			/*s
			<select id="provinceList" onchange="alert(this.value)">
			<option value="">请选择省份</option>
			<option value="sx">陕西</option>
			<option value="hb">河北</option>
			<option value="sd">山东</option>
			<option value="hn">河南</option>
			</select>
			*/
			window.onload=function(){
				var proListElt=document.getElementById("provinceList");
				proListElt.onchange=function(){
					// 获取选中项的value
					alert(proListElt.value)
				}
			}	
		</script>

		<select id="provinceList" >
		<option value="">请选择省份</option>
		<option value="sx">陕西</option>
		<option value="hb">河北</option>
		<option value="sd">山东</option>
		<option value="hn">河南</option>
		</select>
	</body>
</html>
<!--
省份和市区的关系是：1对多
省份表t_province
id      pcode      pname
----------------------------
1       001        河北省
2       002        河南省
3       003        山东省
4       004        山西省

市区表t_city
id      ccode      cname       pcode(fk)
----------------------------------------------
1       101        石家庄         001
2       102        保定         001
3       103        邢台         001
4       104        承德         001
5       105        张家口         001
6       106        邯郸         001
7       107        衡水         001

前端用户选择的假设是河北省，那么必须获取到河北省的pcode，获取到001
然后将001发送提交给服务器，服务器底层执行一条SQL语句：
	select * from t_city where pcode = '001';
	
	返回一个List集合，List<City> cityList;
	
	cityList响应浏览器，浏览器在解析cityList集合转换成一个新的下拉列表。

-->

008-显示网页时钟

<!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);
		   //转换成具体本地语言的日期格式
		   nowTime=nowTime.toLocaleString();
		   document.write(nowTime);
		   document.write("<br>");
		   document.write("<br>");
		   // 当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式
		   var t = new Date();
		   var year = t.getFullYear();// 返回年信息,以全格式返回
		   var month = t.getMonth();// 月份是:0-11
		   //var dayOfWeek = t.getDay();// 获取的一周的第几天(0-6)
		   var day = t.getDate();// 获取日信息
		   document.write(year+"年"+(month+1)+"月"+day+"日");
			
			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 dispalyTime(){
				var time = new Date();
				var strTime = time.toLocaleString();
				document.getElementById("timeDiv").innerHTML=strTime;
			}
			
			//每隔1秒调用displayTime()函数
			function start(){
				v=window.setInterval("dispalyTime()",1000)
			}
			
			function stop(){
				window.clearInterval(v);
			}
			
		</script>
		
		<input type="button" value="显示系统时间" onclick="start()"/>
		<input type="button" value="系统时间停止" onclick="stop()"/>
		<div id="timeDiv"></div>
	</body>
</html>

dasd11sda456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-07JavaScript代码

005-表单验证<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单验证</title> <style type="text/css"> span{ color: red; font-size: 12px; } </style> </head> <body> &l
复制链接

扫一扫