第85节：Java中的JavaScript

逃离我推掉我的手 2021-09-18 01:00 372阅读 0赞

![标题图][1240]

> 第85节：Java中的JavaScript

复习一下css：

选择器的格式：

元素选择器：元素的名称\{\}  
类选择器：. 开头  
ID选择器：\# ID选择器

后代选择器： 选择器1 选择器2  
子元素选择器：选择器1 > 选择器2  
选择器分组： 选择器1，选择器2，选择器3\{\}  
属性选择器：选择器\[属性名称=‘属性值’\]

盒子模型：

内边距：盒子内的距离  
边框：盒子的边框  
外边距： 盒子和盒子之间的距离

> 轮播图

自动播放：每隔3秒切换，切换图片，

// 点击弹框
    // 确定事件，点击事件
    // 通过事件定义函数
    // 在函数里定义操作页面元素，做一些交互的操作
    <script>
     function d(){
      // alert("点击了");
      // 获取div
      var div = document.getElementById("div1");
      div.innerHTML = "<font color='red'> 内容 </font>";
     }
    </script>
    
    <body>
     <input type="button value="点我" onclick="d()"/>
     <div id = "div1">
      这里是达叔小生
     </div>
    </body>

// 点击切换图片
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			function changeImg(){
    //				alert("要切换了")
    				var img = document.getElementById("img1");
    				img.src = "../img/1.gif";
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="点击切换图片" onclick="changeImg()" />
    		<br />
    		<img src="../img/333.jpg" id="img1" />
    	</body>
    </html>

`setTimeout()`: 在指定的毫秒数后调用函数  
`setInterval()`: 按照指定的周期来调用函数  
`scrollTo()`: 把内容滚动到指定的坐标  
`scrollBy()`: 按照指定的像素值来滚动内容  
`resizeTo()`: 把窗口的大小调整到指定的宽度和高度  
`resizesBy()`: 按照指定的像素调整窗口的大小  
`prompt()`: 显示可提示用户输入的对话框  
`open()`: 打开一个新的浏览器窗口  
`moveTo()`: 把窗口的左上角移动到一个指定的坐标  
`moveBy()`: 可相对窗口的当前坐标把它移动指定的像素  
`focus()`: 把键盘焦点给予一个窗口

`setInterval()`方法按照指定的周期来调用函数，方法会不停地调用函数，直到`clearInterval()`被调用或者窗口被关闭，

<html>
    <body>
    
    <input type="text" id="clock" size="20"/>
    
    <script language=javascript>
    var int = self.setInterval("clock()", 50)
    function clock(){
     var t = new Date()
     document.getElementById("clock").value
    }
    </script>
    
    <button onclick="int=window.clearInterval(int)">
    stop</button>
    </body>
    </html>

定时器

// 技术分析
    function test(){
     console.log("调用了");
    }
    // setInterval("test()", 2000); 
    这个函数会循环，定时2秒后，这个函数会重新被调用，一直循环。
    // setTimeout("test()", 2000);
    这个函数被用了，就不再执行了

取消操作，`alert()`显示一段消息，`blur()`把键盘焦点从顶层窗口移开，`clearInterval()`取消由`setInterval()`设置的`timeout`，`clearTimeout()`取消由`setTimeout()`方法设置的`timeout`。

`setIntervale()`

参数：
    mode 参数为要调用的函数，或是执行代码串
    millisec 参数为调用code之间的时间间隔

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			function test(){
    				console.log("setInterval");
    			}
    //			setInterval("test()",2000);
    //			setTimeout("test()",2000);
    			var timerID;
    			function startDinshiqi(){
    //				timerID = setInterval("test()",2000);
    				timerID = setTimeout("test()",3000);
    			}
    			
    			function stopDingshiqi(){
    //				clearInterval(timerID);
    				clearTimeout(timerID);
    			}
    			
    		</script>
    	</head>
    	<body>
    		<input type="button" value="开启定时器" onclick="startDinshiqi()" /><br />
    		<input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br />
    	</body>
    </html>

图片自动轮播：

// 会被显示在状态栏
    <html>
    <head>
    <script type="text/javascript">
    function load(){
     window.status = "Page"
    }
    </script>
    </head>
    <body "load()">
    </body>
    </html>

文件加载完成事件onload，事件触发

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			var index = 0;
    			
    			function changeImg(){
    				
    				var img = document.getElementById("img1");
    				
    				//当前要切换到第几张图片
    				var curIndex = index%3 + 1; 
    				img.src="../img/"+curIndex+".jpg"; 
    				//每切换完,索引加1
    				index = index + 1;
    			}
    			
    			function init(){
    				setInterval("changeImg()",1000);
    			}
    			
    		</script>
    	</head>
    	<body "init()">
    		<img src="../img/1.jpg" width="100%" id="img1"/>
    	</body>
    </html>

> 显示和隐藏

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    //			var img = document.getElementById("img1");
    			
    			function hideImg(){
    				var img = document.getElementById("img1");
    				img.style.display = "none";
    			}
    			
    			function showImg(){
    				var img = document.getElementById("img1");
    				img.style.display = "block";
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="显示" onclick="showImg()" />
    		<input type="button" value="隐藏" onclick="hideImg()" /><br />
    		
    		<img src="../img/1.gif" id="img1" />
    		
    		
    	</body>
    </html>

> `setInterval`：每隔多少毫秒执行一次  
> `setTimeout`：多少毫秒后执行一次  
> `clearInterval`和`clearTimeout`  
> `img.style.display=block`和`img.style.display=none`

定时广告：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    		
    			function init(){
    				setTimeout("showAD()",3000);
    			}
    			
    			function showAD(){
    				//获取要操作的img
    				var img = document.getElementById("img1");
    				//显示广告
    				img.style.display = "block";
    				
    				//再开启定时器,关闭广告
    				setTimeout("hideAD()",3000);
    			}
    			
    			function hideAD(){
    				//获取要操作的img
    				var img = document.getElementById("img1");
    				//隐藏广告
    				img.style.display = "none";
    			}
    		</script>
    	</head>
    	<body "init()">
    		<img id="img1" src="../img/555.jpg" width="100%" style="display: none;"/>
    	</body>
    </html>

> 表单效果

onblur 元素失去焦点
    onchange 域的内容被改变
    onfocus 元素获取焦点

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script type="text/javascript" src="../js/regutils.js" ></script>
    		<script>
    
    			function showTips(spanID,msg){
    				var span = document.getElementById(spanID);
    				span.innerHTML = msg;
    			}
    
    			function checkUsername(){
    
    				var uValue = document.getElementById("username").value;
    				var span = document.getElementById("span_username");
    				if(uValue.length < 6){
    					span.innerHTML = "<font color='red' size='2'>太短</font>";
    					return false;
    				}else{
    					span.innerHTML = "<font color='red' size='2'>可用</font>";
    					return true;
    				}
    			}
    			
    			/*
    			 密码校验
    			 */
    			function checkPassword(){
    				var uPass = document.getElementById("password").value;
    				var span = document.getElementById("span_password");
    
    				if(uPass.length < 6){
    					span.innerHTML = "<font color='red' size='2'>太短</font>";
    					return false;
    				}else{
    					span.innerHTML = "<font color='red' size='2'>够用</font>";
    					return true;
    				}
    			}
    			
    			/*
    			 确认密码校验
    			 * */
    			function checkRePassword(){
    				var uPass = document.getElementById("password").value;
    				var uRePass = document.getElementById("repassword").value;
    				var span = document.getElementById("span_repassword");
    				if(uPass != uRePass){
    					span.innerHTML = "<font color='red' size='2'>两次密码不一致</font>";
    					return false;
    				}else{
    					span.innerHTML = "";
    					return true;
    				}
    			}
    			
    			/*
    			 校验邮箱
    			 * */
    			function checkMail(){
    				var umail = document.getElementById("email").value;
    				var flag = checkEmail(umail);
    				var span = document.getElementById("span_email");
    				//对邮箱输入进行校验
    				if(flag){
    					span.innerHTML = "<font color='red' size='2'>可用</font>";
    					return true;
    				}else{
    					span.innerHTML = "<font color='red' size='2'>邮箱格式貌似有问题</font>";
    					return false;
    				}
    			}
    			
    			function checkForm(){
    				var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
    				return flag;
    			}
    			
    		</script>
    	</head>
    	<body>
    		<form action="../555.html" onsubmit="return checkForm()" >
    			用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
    			密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
    			确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
    			邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
    			手机号:<input type="text" id="text" /><br />
    			
    			<input type="submit" value="提交" />
    		</form>
    	</body>
    </html>

> 表单提交规则

`https://github.com/huangguangda/Tools/blob/master/regutils.js`

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			
    			function showTips(spanID,msg){
    				var span = document.getElementById(spanID);
    				span.innerHTML = msg;
    			}
    			
    			function checkUsername(){
    
    				var uValue = document.getElementById("username").value;
    				var span = document.getElementById("span_username");
    				if(uValue.length < 6){
    					span.innerHTML = "太短啦!"
    					return false;
    				}else{
    					span.innerHTML = "够用!"
    					return true;
    				}
    			}
    			
    			function checkForm(){
    				var flag = checkUsername();
    				return flag;
    			}
    			
    		</script>
    	</head>
    	<body>
    		<form action="../555.html" onsubmit="return checkForm()">
    			用户名:<input type="text" id="username" onblur="checkUsername()"  onfocus="showTips('span_username','用户名长度不能小于6位')" /><span id="span_username"></span> <br />
    			<input type="submit" value="注册" />
    		</form>
    			
    	</body>
    </html>

引入文件

ondblclick: 当用户双击某个对象时调用的事件
    onerrror: 在加载文档或图像时发生错误
    onfocus: 元素获得焦点
    onkeydown: 某个键盘按键被按下
    onkeypress: 某个键盘按键被按下并松开
    onkeyup: 某个键盘按键被松开
    onload: 一张页面或一副图像完成加载
    onmousedown: 鼠标按钮被按下
    onmousemove: 鼠标被移动
    onmouseout: 鼠标从某元素移开
    onmouseover: 鼠标移到某元素之上
    onmouseup: 鼠标按键被松开

> 表格隔行颜色

<tr bgcolor="red">
    </tr>
    
    <body "init()">
    <table border="1px" width="600px" id="tab">
    
    function init(){
     var tab = document.getElementById("tab");
    }

table对象
    
    table对象代表一个html表格，<table>标签
    cells[] 返回包含表格中所有单元格的一个数组
    // 所有单元格
    rows[] 返回包含表格中所有行的一个数组
    tBodies[] 返回包含表格中所有tbody的一个数组

![代码][1240 1]

> 表格全选和全不选

getElementById()方法
    getElementById()方法返回带有指定ID的元素

var element = document.getElementById("tag");

appendChild(node)： 插入新的子节点
    removeChild(node)：删除子节点
    innerHTML: 节点元素的文本值
    parentNode：节点的父节点
    childNodes：节点元素的子节点
    attributes：节点的属性节点

getElementById(): 返回带有指定ID的元素
    getElementsByTagName(): 返回包含带有指定标签名称的所有元素的节点列表
    getElementsByClassName(): 返回包含带有指定类名的所有元素的节点列表
    appendChild(): 把新的子节点添加到指定节点
    removeChild(): 删除子节点
    replaceChild():替换子节点
    insertBefore(): 在指定子节点前面插入新的子节点
    createAttribute(): 创建属性节点
    createElement(): 创建元素节点
    createTextNode(): 创建文本节点
    getAttribute(): 返回指定的属性值
    setAttribute(): 把指定属性设置值

![效果][1240 2]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<img src="../img.gif" />
    		<p>文本</p>
    	</body>
    </html>

> 省市联动

DOM：

Document Object Model
    HTML DOM定义了访问和操作的html文档的标准
    DOM是标准，定义了访问html和xml文档的标准
    DOM是 
    Document Object Model 文档对象模型的缩写

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			
    			function dianwo(){
    				var div = document.getElementById("div1");
    				//创建元素节点
    				var p = document.createElement("p");  // <p></p>
    				//创建文本节点
    				var textNode = document.createTextNode("文本内容");//  文本内容
    				
    				//将p 和文本内容关联起来
    				p.appendChild(textNode);  //  <p>文本</p> 
    				
    				//将P添加到目标div中
    				div.appendChild(p);
    			}
    			
    		</script>
    	</head>
    	<body>
    		<input type="button" value="点我" onclick="dianwo()" />
    		
    		<div id="div1">
    			
    		</div>
    	</body>
    </html>

> 选择城市

![代码][1240 3]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    
    			var provinces = [
    				["深圳市","东莞市","惠州市","广州市"],
    				["长沙市","岳阳市","株洲市","湘潭市"],
    				["厦门市","福州市","漳州市","泉州市"]
    			];
    
    			function selectProvince(){
    				var province = document.getElementById("province");
    				//得到当前选中的是哪个省份
    				//alert(province.value);
    				var value = province.value;
    				//从数组中取出对应的城市信息
    				var cities = provinces[value];
    				var citySelect = document.getElementById("city");
    				//清空select中的option
    				citySelect.options.length = 0;
    				
    				for (var i=0; i < cities.length; i++) {
    					var cityText = cities[i]; 
    					var option1 = document.createElement("option");
    					//创建城市文本节点
    					var textNode = document.createTextNode(cityText) ;
    					
    					//将option节点和文本内容关联起来
    					option1.appendChild(textNode); 
    //					添加到城市select中
    					citySelect.appendChild(option1);
    				}
    				
    			}
    			
    		</script>
    	</head>
    	<body>
    		
    		<select onchange="selectProvince()" id="province">
    			<option value="-1">--请选择--</option>
    			<option value="0">广东省</option>
    			<option value="1">湖南省</option>
    			<option value="2">福建省</option>
    		</select>
    		
    		<select id="city"></select>
    	</body>
    </html>

> 案例:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			function selectOne(){
    				var leftSelect = document.getElementById("leftSelect");
    				var options = leftSelect.options;
    				
    				//找到右侧的Select
    				var rightSelect = document.getElementById("rightSelect");
    				//遍历找出被选中的option
    				for(var i=0; i < options.length; i++){
    					var option1 = options[i];
    					if(option1.selected){
    		//				将选中的元素添加到右边的Select中就可以
    						rightSelect.appendChild(option1);
    					}
    				}
    			}
    			
    			//将左边所有的商品移动到右边
    			function selectAll(){
    //				获取左边Select中被选中的元素
    				var leftSelect = document.getElementById("leftSelect");
    				var options = leftSelect.options;
    				
    				//找到右侧的Select
    				var rightSelect = document.getElementById("rightSelect");
    				//遍历找出被选中的option
    				for(var i=options.length - 1; i >=0; i--){
    					var option1 = options[i];
    					rightSelect.appendChild(option1);
    				}
    			}
    			
    			
    			
    		</script>
    	</head>
    	<body>
    		
    		<table border="1px" width="400px">
    			<tr>
    				<td>分类名称</td>
    				<td><input type="text" value="手机数码"/></td>
    			</tr>
    			<tr>
    				<td>分类描述</td>
    				<td><input type="text" value="手机数码"/></td>
    			</tr>
    			<tr>
    				<td>分类商品</td>
    				<td>
    					
    					<div style="float: left;">
    						已有商品<br />
    						<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
    							<option></option>
    							<option></option>
    							<option></option>
    							<option></option>
    						</select>
    						<br />
    						<a href="#" onclick="selectOne()"> >> </a> <br />
    						<a href="#" onclick="selectAll()"> >>> </a>
    					</div>
    					
    					<div style="float: right;"> 
    						未有商品<br />
    						<select multiple="multiple" id="rightSelect">
    							<option></option>
    							<option></option>
    							<option></option>
    							<option></option>
    						</select>
    						<br />
    						<a href="#"> << </a> <br />
    						<a href="#"> <<< </a>
    					</div>
    				</td>
    			</tr>
    			<tr>
    				<td colspan="2">
    					<input type="submit" value="提交"/>
    				</td>
    			</tr>
    		</table>
    		
    		
    	</body>
    </html>

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞\`

[1240]: /images/20210724/e98e9099faba4d039ff4c8afeb0ae26a.png
[1240 1]: /images/20210724/096f0b507c454170973f6e0e182fd23f.png
[1240 2]: /images/20210724/e75872dafa674abfaa83ee2cba442206.png
[1240 3]: /images/20210724/3af0bb1eb0ee4988a62d49a0f32d2c6f.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1