第85节：Java中的JavaScript

时间：2022-06-13 13:58:47

第85节：Java中的JavaScript

第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 onload="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 onload="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 onload="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>

		<!--

			引入外部的js文件

		-->

		<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>

引入文件

<script src="js文件路径" type="text/javascript" />
ondblclick: 当用户双击某个对象时调用的事件

onerrror: 在加载文档或图像时发生错误

onfocus: 元素获得焦点

onkeydown: 某个键盘按键被按下

onkeypress: 某个键盘按键被按下并松开

onkeyup: 某个键盘按键被松开

onload: 一张页面或一副图像完成加载

onmousedown: 鼠标按钮被按下

onmousemove: 鼠标被移动

onmouseout: 鼠标从某元素移开

onmouseover: 鼠标移到某元素之上

onmouseup: 鼠标按键被松开

表格隔行颜色

<tr>

 <td>

  <input type="checkbox"/>

 </td>

 <td><a href="#">修改</a> | <a href="#">删除</a></td>

</tr>
<tr bgcolor="red">

</tr>

<body onload="init()">

<table border="1px" width="600px" id="tab">

function init(){

 var tab = document.getElementById("tab");

}
table对象

table对象代表一个html表格，<table>标签

cells[] 返回包含表格中所有单元格的一个数组

// 所有单元格

rows[] 返回包含表格中所有行的一个数组

tBodies[] 返回包含表格中所有tbody的一个数组

第85节：Java中的JavaScript

表格全选和全不选

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(): 把指定属性设置值

第85节：Java中的JavaScript

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<img src="../img.gif" />

		<p>文本</p>

	</body>

</html>

省市联动

<select>

 <option></option>

 <option></option>

 <option></option>

</select>

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>

选择城市

第85节：Java中的JavaScript

<!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()"> &gt;&gt; </a> <br />

						<a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>

					</div>

					<!--右边-->

					<div style="float: right;">

						未有商品<br />

						<select multiple="multiple" id="rightSelect">

							<option></option>

							<option></option>

							<option></option>

							<option></option>

						</select>

						<br />

						<a href="#"> &lt;&lt; </a> <br />

						<a href="#"> &lt;&lt;&lt; </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

结语

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

相关文章