1. 全栈程序员必看首页

04_使用JS完成功能

全栈程序员-用户IM • • 未分类

04_使用JS完成功能

1.使用JS完成表单校验

  • 分析思路
    1.确定使用事件onsubmit事件
    2.书写函数
    3.对输入项进行非空判断

04_使用JS完成功能

  • 为表单绑定一个事件
<form action="#" method="get" onsubmit="return checkForm()">
  • 需要校验的输入项目定义id
<input type="text" name="user" id="user" />
//document.getElementById("user");
//获取输入表单对象,对象调用属性value属性 就可以获取输入的值。
  • JS代码

(1)使用弹框方式进行提示:

<script type="text/javascript">
	function checkForm(){
		/*校验用户名*/
		//alert("aa");
		//获取用户输入的数据
		var uValue =  document.getElementById("user").value;
		//alert(uValue);
		if(uValue==""){
			//给出错误提示信息
			alert("用户名不能为空！");
			return flase;
		}
		
		/*校验邮箱*/
		var Evalue = document.getElementById("email").value;
		if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(Evalue)){
			//给出错误提示信息
			alert("邮箱格式不正确！");
			return false;
		}
	}
</script>

(2)在输入框后面进行错误提示

思路分析:

/*
1.确定使用聚焦事件onfocus和离焦事件onblur和onsubmit
2.向页面指定位置写入内容：innerHTML
*/
    
第一步：确定事件(给出提示信息使用聚焦事件，给出校验结果信息使用离焦事件)并为其绑定函数
第二步：聚焦事件绑定的函数中(获取span给出提示信息)
第三步：离焦事件绑定的函数中(获取用户输入的内容进行判断)
第四步：如果失败，在span位置给出错误提示信息，如果成功，让span内容为空。

Html部分代码

<input type="text" name="user" id="user" onfocus="showTips('user','用户名必须以字母开头！')" onblur="check('user','用户名不能为空！')"/>
<span id="userspan"></span>

Javascript部分代码：

<sctript>
	function showTips(id,info){
		//获取span元素，给出提示信息
		document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
	}
	
	function check(id,info){
		//获取用户输入的数据
		var uValue = document.getElementById(id).value;
		//进行判断
		if(uValue==""){
			//在span位置给出错误提示信息
			document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
		}else{
			document.getElementById(id+"span").innerHTML="";
		}
	}
	
</script>

2.使用JS完成首页轮播图效果案例

思路分析:
    1.确定事件onload(页面加载就会执行)
    2.书写一个定时器:setInterval(“changeImg()”,3000);
    3.编写函数,这个函数专门是用来改变图标的src属性达到定时切换图片的效果.

Html部分代码

确定事件：onload  加在body里面！
<body onload="init()">

给指定的图片位置定义一个id
<img src="../img/1.jpg" width="1300px" id="img1"/>

JS代码

<script>
	function init(){
	    //定时器会返回一个值，这个值可以用来取消定时器的。
		setInterval("changeImg()",3000);
	}
	
	var i=1;
	function changeImg(){
		i++;
		var imgEl = document.getElementById("img1");
		imgEl.src="../img/"+i+".jpg";
		if(i==3){
			i=0;
		}
	}
	
</script>

3.JS完成页面定时弹出广告

  • 思路分析:
    1.使用定时器
    2.css样式属性display:none 隐藏;display:block 显示
    3.获取元素对象document.getElementById
  • Html部分代码：
<img src="../img/1.jpg" width="1300px" style="display: none;" id="img1"/>

确定事件(<body onload="init()">)
  • Javascript部分代码：
<script type="text/javascript">
	var time;
	function init(){
		//设置显示图片的定时操作
		time = setInterval("showAd()",3000);
	}
	
	//显示图片的函数
	function showAd(){
		//获取广告图片的
		var imgEl = document.getElementById("img1");
		//设置图片的属性(display)让其显示
		imgEl.style.display="block";
		
		//清除显示图片的定时操作
		clearInterval(time);
		
		//设置隐藏广告图片的定时操作
		time = setInterval("hiddenAd()",3000);
	}
	
	//书写隐藏广告图片的函数
	function hiddenAd(){
		//获取广告图片并设置隐藏的属性
		document.getElementById("img1").style.display="none";
		//清除隐藏图片的定时操作
		clearInterval(time);
	}
</script>

4.JS中事件

04_使用JS完成功能

5.使用JS完成表格的一个隔行换色

04_使用JS完成功能

  • 技术分析
新标签的学习
	<thead>
		<tr>
			<th></th>
        </tr>
    </thead>
	<tbody>
		<tr>
			<td></td>
        </tr>
    </tbody>

确定事件(页面加载事件onload)

获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。

Tbody里面的行数(rows.length)

JS的遍历(for循环)

获取奇数行和偶数行(对遍历中角标对2取余)

设置背景颜色(.style.backgroundColor)
  • js代码
<script>
	window.onload = function(){
		//1.获取表格
		var tblEle = document.getElementById("tbl");
		//2.获取表格中tbody里面的行数(长度)
		var len = tblEle.tBodies[0].rows.length;
		//alert(len);
		//3.对tbody里面的行进行遍历
		for(var i=0;i<len;i++){
			if(i%2==0){
				//4.对偶数行设置背景颜色
				tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
			}else{
				//5.对奇数行设置背景颜色
				tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
			}
		}
	}
</script>

for in 可以对js数组进行遍历,可以理解成java中国的增强for

但是: for(index in arr){…} index表示的是数组的索引

6.事件总结

  • onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
  • onclick/ondblclick:鼠标单击和双击事件
  • onkeydown/onkeypress：搜索引擎使用较多
  • onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
  • onmouseover/onmouseout/onmousemove：购物网站商品详情页。
  • onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
  • onchange:当用户改变内容的时候使用这个事件(二级联动)

7.使用JS完成全选和选不选操作

04_使用JS完成功能

  • 技术分析
确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面

获取编号前面的复选框的状态(是否选中)
	获取复选框：var checkAllEle = document.getElementById(“id”)
	获取复选框的状态：checkAllEle.checked=true表示选中，false为未选中。

获取下面所有的复选框：
	document.getElementsByName(“name”);
  • HTML代码：
复选框前面的：
	<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>

下面所有的复选框：
<td><input type="checkbox" name="checkOne"/></td>
  • JS部分代码：
<script>
	function checkAll(){
		//1.获取编号前面的复选框
		var checkAllEle = document.getElementById("checkAll");
		//2.对编号前面复选框的状态进行判断
		if(checkAllEle.checked==true){
			//3.获取下面所有的复选框
			var checkOnes = document.getElementsByName("checkOne");
			//4.对获取的所有复选框进行遍历
			for(var i=0;i<checkOnes.length;i++){
				//5.拿到每一个复选框，并将其状态置为选中
				checkOnes[i].checked=true;
			}
		}else{
			//6.获取下面所有的复选框
			var checkOnes = document.getElementsByName("checkOne");
			//7.对获取的所有复选框进行遍历
			for(var i=0;i<checkOnes.length;i++){
				//8.拿到每一个复选框，并将其状态置为未选中
				checkOnes[i].checked=false;
			}
		}
	}
</script>

8.使用JS完成省市二级联动

04_使用JS完成功能

技术分析

事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建？)
获取用户选择的省份(使用方法传参的方式：this.value)
遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)
创建文本节点和元素节点并进行添加操作



createTextNode()
createElement()
appendChild()

步骤分析

第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。

Html代码：

<select onchange="changeCity(this.value)">
	<option>--请选择--</option>
	<option value="0">湖北</option>
	<option value="1">湖南</option>
	<option value="2">河北</option>
	<option value="3">河南</option>
</select>
<select id="city">
	
</select>

JS代码：

<script>
	//1.创建一个二维数组用于存储省份和城市
	var cities = new Array(3);
	cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
	cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
	cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
	cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
	
	function changeCity(val){
		
		//7.获取第二个下拉列表
		var cityEle = document.getElementById("city");
		
		//9.清空第二个下拉列表的option内容
		cityEle.options.length=0;
		
		//2.遍历二维数组中的省份
		for(var i=0;i<cities.length;i++){
			//注意，比较的是角标
			if(val==i){
				//3.遍历用户选择的省份下的城市
				for(var j=0;j<cities[i].length;j++){
					//alert(cities[i][j]);
					//4.创建城市的文本节点
					var textNode = document.createTextNode(cities[i][j]);
					//5.创建option元素节点
					var opEle = document.createElement("option");
					//6.将城市的文本节点添加到option元素节点
					opEle.appendChild(textNode);
					//8.将option元素节点添加到第二个下拉列表中去
					cityEle.appendChild(opEle);
				}
			}
		}
	}
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/100785.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号