一、页面密码框点击眼睛显示密码功能
css代码:
.head {
width: 180px;
height: 30px;
position: relative;
}
input {
width: 180px;
height: 30px;
border: 1px solid black;
}
.head i {
width: 20px;
height: 16px;
position: absolute;
top: 9px;
right: 3px;
}
.head i.open {
background: url(./img/open.png);
}
.head i.close {
background: url(./img/close.png);
}
html代码:
<div class="head">
<input type="password">
<i class="close"></i>
</div> -->
js代码:
var pass = document.querySelector("input");
var img = document.querySelector(".close");
var flag = true;
img.onclick = function () {
flag = !flag;
if (flag) {
this.className = "open";
pass.type = "text";
} else {
this.className = "close";
pass.type = "password";
}
效果:
二、关闭广告与打开广告
css代码:
.back {
position: fixed;
top: 30%;
right: 10%;
background-color: palegreen;
width: 100px;
height: 300px;
}
html代码:
<div class="back">
<a href="#" id="aaa">关闭</a>
</div>
js代码;
<script>
//3
var close = document.getElementById("aaa");
var img1 = document.querySelector(".back");
close.onclick = function () {
img1.style.display = "none";
}
4
var id = document.getElementById("name");
id.onfocus = function () {
if (id.value == "输入名字") {
id.value = "";
}
}
id.onblur = function () {
if (id.value == "") {
id.value = "输入名字"
}
}
</script>
效果:
三、文本框获得焦点时,里面的默认文字隐藏,焦点离开文本时显示文字。
html代码:
<input type="text" value="请输入用户名" id="name">
JS代码:
<script>
var username = document.getElementById("name");
//获得焦点事件
username.onfocus = function () {
if (this.value == "请输入用户名") {
this.value = "";
}
}
//失去焦点事件
username.onblur = function () {
if (this.value == "") {
this.value = "请输入用户名";
}
}
</script>
效果:
四:全选按钮
1:点击全选按钮,其他所有复选框都被选中。
2:复选框中有一个未选中,全选按钮选中状态也消失。
html代码:
<table border="1" cellspacing="0" align="center">
<tr>
<th id="aaa">
<input type="checkbox">全选/全不选
</th>
</tr>
<tr>
<td id="bbb">
<input type="checkbox">1
</td>
</tr>
<tr>
<td id="bbb">
<input type="checkbox">2
</td>
</tr>
<tr>
<td id="bbb">
<input type="checkbox">3
</td>
</tr>
<tr>
<td id="bbb">
<input type="checkbox">4
</td>
</tr>
</table>
JS代码:
<script>
var all = document.querySelector("#aaa input");
var one = document.querySelectorAll("#bbb input");
//全选/全不选
all.onclick = function () {
var check = this.checked;
for (var i = 0; i < one.length; i++) {
one[i].checked = check;
}
}
//one按钮
for (var i = 0; i < one.length; i++) {
one[i].onclick = function () {
var flag = true;//默认为true
for (var i = 0; i < one.length; i++) {
if (!one[i].checked) {
flag = false;
}
}
all.checked = flag;
}
}
</script>
效果:
五、鼠标放入列表上变颜色
css代码:
td {
width: 60px;
text-align: center;
}
HTML代码:
<table border="1" cellspacing="0" align="center">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
JS代码:
<script>
var back = document.querySelector("table");
var back = document.querySelectorAll("tr");
for (var i = 0; i < back.length; i++) {
back[i].onmouseover = function () {
this.style.background = "pink";
}
for (var j = 0; j < back.length; j++) {
back[i].onmouseout = function () {
this.style.background = "white";
}
}
}
</script>
效果:
六、页面上有N张图片,单击任意一张,body背景图片也随之更换。
css代码:
.hezi {
text-align: center;
}
.hezi img {
width: 200px;
height: 150px;
}
html代码:
<div class="hezi">
<img src="./img/Kitchen Open Late.png" alt="">
<img src="./img/wyy1.png" alt="">
<img src="./img/wyy5.png" alt="">
<img src="./img/wyy6.png" alt="">
<img src="./img/与一月想谁.png" alt="">
</div>
JS代码:
<script>
var box = document.querySelectorAll(".hezi img");
for (var i = 0; i < box.length; i++) {
box[i].onclick = function () {
var src = this.src;
document.body.style.backgroundImage = "url(' " + src + " ')";
}
}
</script>
效果:
七、Tab交互思路
1:点击nav a标签,都把样式改为灰色。
2:当前的这个a变色。
css代码:
.box a {
display: block;
float: left;
margin-right: 10px;
width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #999;
color: white;
text-decoration: none;
}
.box .hover {
background-color: black;
}
html代码:
<div class="box">
<a href="#">一二三四</a>
<a href="#">一二三四</a>
<a href="#">一二三四</a>
<a href="#">一二三四</a>
<a href="#">一二三四</a>
</div>
JS代码:
<script>
var all = document.querySelectorAll(".box a");
for (var i = 0; i < all.length; i++) {
all[i].onclick = function () {
for (var j = 0; j < all.length; j++) {
all[j].className = "";
}
this.className = "hover";
}
}
</script>
效果: