第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的一个数组

表格全选和全不选

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

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

选择城市

<!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 点赞`

第85节：Java中的JavaScript的更多相关文章

第60节:Java中的JavaScript技术
欢迎到我的简书查看我的文集前言: JavaScript是什么呢?它是一种基于对象和事件驱动的脚本语言,主要是应用于客户端上的.JavaScript它可以做到信息的动态交互,具有交互性,它不允许直接访 ...
第83节:Java中的学生管理系统分页功能
第83节:Java中的学生管理系统分页功能分页功能一般可以做成两种,一种是物理分页,另一种是逻辑分页.这两种功能是有各自的特点的,物理分页是查询的时候,对数据库进行访问,只是查一页数据就进行返回,其 ...
第82节:Java中的学生管理系统
第82节:Java中的学生管理系统学生管理系统的删除功能删除,点击超链接,点击弹出对话框式是否进行删除,如果确定,就删除,超链接执行的是js方法,在js里访问,跳转servlet,,servlet ...
第70节:Java中xml和tomcat
第70节:Java中xml和tomcat 前言: 哭着也要看完,字数: jdbc crud - statement dao java.sql.Driver The interface that eve ...
第68节:Java中的MYSQL运用从小白到大牛
第68节:Java中的MYSQL运用从小白到大牛前言学习java必备要求,学会运用!!! 常见关系化数据库 BootStrap是轻量级开发响应式页面的框架,全局css组件,js插件.栅格系统是将页 ...
JAVA中执行JavaScript代码并获取返回值
JAVA中执行JavaScript代码并获取返回值场景描述实现思路技术要点代码实现测试方法运行结果改进空间场景描述今天在CSDN上偶然看到一个帖子对于一段字符串 “var p=‘xx ...
第80节:Java中的MVC设计模式
第80节:Java中的MVC设计模式前言了解java中的mvc模式.复习以及回顾! 事务,设置自动连接提交关闭. setAutoCommit(false); conn.commit(); conn ...
第79节:Java中一些要点
第79节:Java中一些要点前言一些知识点忘了没,可以通过一个点引出什么内容呢?做出自己的思维导图,看看自己到了哪一步了呢内容如果有人问jre,jdk,jvm是什么,你怎么回答呢? jre的英 ...
第78节:Java中的网络编程(上)
第78节:Java中的网络编程(上) 前言网络编程涉及ip,端口,协议,tcp和udp的了解,和对socket通信的网络细节. 网络编程 OSI开放系统互连网络编程指IO加网络 TCP/IP模型: ...

随机推荐

Centos7 出现Welcome to emergency mode!
做mount挂载时,修改了 /etc/fstab 文件,导致Centos7重启时出现如下图所示错误: Welcome to emergency mode! After logging in, typ ...
Tigase 发送消息的流程源码分析
XMPP 的<message/>节是使用基本的”push”方法来从一个地方到另一个地方得到消息.因为消息通常是不告知的,它们是一种”fire-and-forget”(发射后自寻目的)的机制 ...
Angular官方教程采坑
Angualar 7.0.1是现在的最新版本,教程总体来说还是不错的,但是我在跟着教程做英雄项目的时候出现了一个很明显的坑. 在教程的第6部分HTTP的内容中写到(见下图) 文档中特别注明了要使用0. ...
python 打包成 windows .EXE
1. 升级pip python -m pip install --upgrade pip 2.安装 pyinstall (打包程序) pip install pyinstaller 3 开始打包(打包 ...
安装jdk1.8导致eclipse显示问题
安装jdk1.8后新建workspace(mars)后eclipse的toolbar和主题显示有问题例如: 修改步骤 1.设置主题window->Preferences->General ...
Flask 学习目录
Flask 学习目录 Flask 的学习过程是一个了解如何从单个模块搭建一个 Web 框架的过程. Python.Flask 的安装和设置简单的 Hello World 程序使用 Jinjia2 ...
获取ADO连接字符串
自己如何获取ADO连接字符串有时候我们参考网上的ADO连接字符串写未必就能连接上数据库.今天详细介绍下这个很流行的如何获取ADO字符串的方法,就能很容易直观看到这个连接字符串是否真能连接上数据库.编 ...
Python Day 6
阅读目录: 内容回顾: 深浅拷贝: 元组: 字典集合 ##内容回顾 #1.数字类型 int | float | bool | complex #2.字符串 #常规操作: -- 索 ...
keras常见参数input_dim、input_length理解
在看keras文档embedding层的时候,不太理解其中的input_dim 和input_length 这两个参数,查阅了一下资料,记录下来. keras.layers.Embedding(inp ...
REdis命令处理流程处理分析
分析版本:REdis-5.0.4. REdis命令处理流程可分解成三个独立的流程(不包括复制和持久化): 1) 接受连接请求流程: 2) 接收请求数据和处理请求流程,在这个过程并不会发送处理结果给Cl ...

第85节：Java中的JavaScript

结言

结语

第85节：Java中的JavaScript的更多相关文章

随机推荐

热门专题