1. 仿淘宝二维码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
淘宝二维码
<img src="tb.png" alt="">
<i class="close-btn">x</i>
</div>
<script>
//1.获取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
//2.注册事件
btn.onclick = function () {
box.style.display = 'none';
}
</script>
</body>
</html>
点击x就可以使二维码隐藏起来
2. 循环精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
list-style: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(jlt.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
//1.获取元素
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
//索引号乘以44就是每个li的背景y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
</html>
3. 显示隐藏文本框内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="FG">
<script>
//1.获取元素
var text = document.querySelector('input');
//2.注册事件
text.onfocus = function () {
//console.log('得到了焦点');
if (this.value === 'FG') {
this.value = '';
}
//获得焦点需要把文本框里的文字颜色变黑
this.style.color = '#333';
}
text.onblur = function () {
//console.log('失去了焦点');
if (this.value === '') {
this.value = 'FG';
//失去焦点颜色变浅
this.style.color = '#999';
}
}
</script>
</body>
</html>
点击文本框颜色变黑,点击外面则恢复
4. 密码框验证信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
padding-left: 20px;
}
.wrong {
color: red;
}
.right {
color: green;
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
//1.获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//2.注册事件 失去焦点
ipt.onblur = function () {
//根据表单里面值的长度 ipt.value.length
if (this.value.length < 6 || this.value.length > 16) {
//console.log('错误');
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对要求6~16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入的正确';
}
}
</script>
</body>
</html>
4. 百度换肤效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.HC5KIYPIjGVXI7RUf_fEZgHaEo?w=262&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7')no-repeat center top;
background-size: 100%;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
height: 58px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.HC5KIYPIjGVXI7RUf_fEZgHaEo?w=262&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
alt=""></li>
<li><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.CCMkE1B7kaWGMU1d_Db4mgHaEK?w=316&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
alt=""></li>
<li><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Lx5ngcKxN_LiK7na2zdfbAHaFQ?w=259&h=184&c=7&r=0&o=5&dpr=1.25&pid=1.7"
alt=""></li>
<li><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.vJKLktOxJ2PZ_cAnBaM7HgHaHa?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7"
alt=""></li>
</ul>
<script>
//1。获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
//2.循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
//把路径this.src给body
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>
5. 表格隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
th,
td {
border: 1px solid #d0d0d0;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农行金蕙3个月开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农行金蕙3个月开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农行金蕙3个月开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农行金蕙3个月开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农行金蕙3个月开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农行金蕙3个月开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
//1.获取元素
var trs = document.querySelector('body').querySelectorAll('tr');
//2.利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
//3.鼠标经过事件 onmouseover
trs[i].onmouseover = function () {
this.className = 'bg';
}
//4.鼠标离开事件 onmouseout
trs[i].onmouseout = function () {
this.className = '';
}
}
</script>
</body>
</html>
6. 表单全选取消全选案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font-size: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iphone13</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>3000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
//1.获取元素
var j_cbAlls = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
//2.注册事件
j_cbAlls.onclick = function () {
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function () {
//flag控制全选按钮是否选中
var flag = true;
//每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; //退出for循环 提高效率
}
}
j_cbAlls.checked = flag;
}
}
</script>
</body>
</html>