第85节:Java中的JavaScript

标题图

第85节:Java中的JavaScript

复习一下css:

选择器的格式:

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

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

盒子模型:

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

轮播图

自动播放:每隔3秒切换,切换图片,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 点击弹框
// 确定事件,点击事件
// 通过事件定义函数
// 在函数里定义操作页面元素,做一些交互的操作
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 点击切换图片
<!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()被调用或者窗口被关闭,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

定时器

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

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

setIntervale()

1
2
3
参数:
mode 参数为要调用的函数,或是执行代码串
millisec 参数为调用code之间的时间间隔
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>

图片自动轮播:

1
2
3
4
5
6
7
8
9
10
11
12
// 会被显示在状态栏
<html>
<head>
<script type="text/javascript">
function load(){
window.status = "Page"
}
</script>
</head>
<body onload="load()">
</body>
</html>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>

显示和隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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:多少毫秒后执行一次
clearIntervalclearTimeout
img.style.display=blockimg.style.display=none

定时广告:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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>

表单效果

1
2
3
onblur 元素失去焦点
onchange 域的内容被改变
onfocus 元素获取焦点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>

引入文件

1
<script src="js文件路径" type="text/javascript" />
1
2
3
4
5
6
7
8
9
10
11
12
ondblclick: 当用户双击某个对象时调用的事件
onerrror: 在加载文档或图像时发生错误
onfocus: 元素获得焦点
onkeydown: 某个键盘按键被按下
onkeypress: 某个键盘按键被按下并松开
onkeyup: 某个键盘按键被松开
onload: 一张页面或一副图像完成加载
onmousedown: 鼠标按钮被按下
onmousemove: 鼠标被移动
onmouseout: 鼠标从某元素移开
onmouseover: 鼠标移到某元素之上
onmouseup: 鼠标按键被松开

表格隔行颜色

1
2
3
4
5
6
<tr>
<td>
<input type="checkbox"/>
</td>
<td><a href="#">修改</a> | <a href="#">删除</a></td>
</tr>
1
2
3
4
5
6
7
8
9
<tr bgcolor="red">
</tr>

<body onload="init()">
<table border="1px" width="600px" id="tab">

function init(){
var tab = document.getElementById("tab");
}
1
2
3
4
5
6
7
table对象

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

代码

表格全选和全不选

1
2
getElementById()方法
getElementById()方法返回带有指定ID的元素
1
var element = document.getElementById("tag");
1
2
3
4
5
6
appendChild(node): 插入新的子节点
removeChild(node):删除子节点
innerHTML: 节点元素的文本值
parentNode:节点的父节点
childNodes:节点元素的子节点
attributes:节点的属性节点
1
2
3
4
5
6
7
8
9
10
11
12
getElementById(): 返回带有指定ID的元素
getElementsByTagName(): 返回包含带有指定标签名称的所有元素的节点列表
getElementsByClassName(): 返回包含带有指定类名的所有元素的节点列表
appendChild(): 把新的子节点添加到指定节点
removeChild(): 删除子节点
replaceChild():替换子节点
insertBefore(): 在指定子节点前面插入新的子节点
createAttribute(): 创建属性节点
createElement(): 创建元素节点
createTextNode(): 创建文本节点
getAttribute(): 返回指定的属性值
setAttribute(): 把指定属性设置值

效果

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img.gif" />
<p>文本</p>
</body>
</html>

省市联动

1
2
3
4
5
<select>
<option></option>
<option></option>
<option></option>
</select>

DOM:

1
2
3
4
5
Document Object Model
HTML DOM定义了访问和操作的html文档的标准
DOM是标准,定义了访问html和xml文档的标准
DOM是
Document Object Model 文档对象模型的缩写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>

选择城市

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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>

案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!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 点赞`
-------------本文结束感谢您的阅读-------------
达叔小生 wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!
0%