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
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页</title>
<style>
input{
border-radius: 4px;
box-shadow: none;
}
button{
border-radius: 4px;
box-shadow: none;
}
div{
width: 180px;
height: 210px;
border: 1px solid black;
color: orange;
font-size: 28px;
margin: 100px auto;
position: relative;
text-align: center;
}
div span{
display: block;
border: solid #ccc 2px;
width: 35px;
height: 35px;
line-height: 35px;
position: absolute;
top: -2px;
left: -39px;
cursor: pointer;
}
*{
padding: 0;
margin: 0;
}
body{
background: url("img/1.jpg") no-repeat;
background-size: cover;
}
li img{
width: 100px;
}
ul{
width: 400px;
margin: 100px auto;
border: solid #fff 2px;
height: 65px;
}
li{
list-style: none;
float: left;
margin: 3px 0px;
}
</style>
</head>
<body>
<h1>这是第一节课的内容</h1>
<input type="password" id ='1'/>
<img src="img/mess.png" />
<span>请输入6-16位密码</span>
<input type="text" id ='2'/>
<br>
<br>
<button onclick="qc()">清空</button>
<button onclick="tc()">弹出</button>
<h1>这是第二节课的内容</h1>
<div>
淘宝二维码
<img src="img/tao.png">
<span>X</span>
</div>
<h1>这是第三节课的内容</h1>
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
</ul>
<script>
var imgs = document.querySelectorAll("img")
for(var i = 0;i <imgs.length; i++){
imgs[i].onclick = function(){
var src = this.src;
document.body.style.background = 'url("'+src+'")';
document.body.style.backgroundSize = 'cover';
}
}
var inp = document.getElementsByTagName("input")[0];
var img = document.querySelector("img");
var span = document.querySelector("span")
var inp2 = document.getElementsByTagName("input")[1];
// onfocus是聚焦
// span.innerHTML是往span更改html元素
inp.onfocus = function(){
img.src="img/mess.png";
span.innerHTML = "请回到输入框输入6-16位密码";
span.style.color = "purple";
}
// onblur是失去焦点
inp.onblur = function(){
var inpvalue = inp.value.length;
if(inpvalue >= 6 && inpvalue <= 16){
img.src="img/right.png";
span.innerHTML = "你输入正确";
span.style.color = "green";
}
else{
img.src="img/wrong.png";
span.innerHTML = "你输入的位数不对";
span.style.color = "red";
}
}
function qc(){
inp.value = "";
img.src="img/mess.png";
span.innerHTML = "请输入6-16位密码";
span.style.color = "black";
}
function tc(){
alert(inp.value);
}
inp.oninput = function(){
inp2.innerHTML = inp.value;
}
var div = document.querySelector("div");
var span = document.getElementsByTagName("span")[1];
span.onclick = function(){
div.style.display = "none";
}
</script>
</body>
</html>
|
