JavaScript经典案例练习
P1：支付10秒倒计时
效果：
功能：
- 点击立即支付弹出确认款
- 确认付款后跳转到支付成功页面并开始计时
- 计时结束或者点击立即返回按钮返回首页
知识点：
-
window.confirm()
用于显示一个带有指定消息和确认及取消按钮的对话框，如果访问者点击‘确认’，此方法返回true，否则返回false
-
window.onload()
用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
-
setInterval()
计时器，第一个参数是回调函数，第二个参数是间隔时间（ms），每过间隔时间就再次调用指定函数，经常搭配箭头函数使用
-
window.location.href
用于返回标签页的链接
-
onclick()
标签的点击事件
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>是否支付</title>
<style>
.content{
width: 400px;
height: 500px;
background-color: #cbcbcb;
margin: 100px auto 0;
line-height: 64px;
text-align: center;
border-radius: 2%;
box-shadow: 1px 2px 8px #6d6d6d;
}
</style>
</head>
<body>
<div class="content">
<p>商品：RTX3090Ti</p>
<p>原价：12000元</p>
<p>现价：2000元</p>
<p>购买人：pillow</p>
<p>地址：河南科技学院</p>
<p>
<button>取消支付</button>
<button>立即支付</button>
</p>
</div>
<script>
//点击支付出现确认框
document.getElementsByTagName('button')[1].onclick = function(){
let res = window.confirm('是否确认支付？');
if(res){
location.href = './支付倒计时跳转.html';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>支付倒计时</title>
</head>
<body>
<div>
<h2>支付成功！</h2>
<span id="jumpTo">10</span>秒后将返回首页
<p><button>立即返回</button></p>
</div>
<script>
//加载页面时触发定时器
window.onload = function(){
let timer = 10;
setInterval(()=>{
timer--;
document.getElementById('jumpTo').innerHTML = timer;
if(timer===0){
location.href = './P1支付倒计时.html';
}
},1000)
}
let back = document.getElementsByTagName('button')[0];
back.onclick = function(){
location.href = './P1支付倒计时.html';
}
</script>
</body>
</html>
P2：验证码生成及校验
效果：
功能：
- 刷新页面或者点击更换链接时重新随机验证码
- 验证输入是否正确
知识点：
-
Math.round()
四舍五入取整
-
Math.random()
取0到1之间的随机数
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>验证码</title>
<style>
.code {
width: 200px;
height: 80px;
display: inline-block;
margin: 20px;
background-color: #c5c5c5;
text-align: center;
line-height: 80px;
font-size: 50px;
color: #477021;
font-style: italic;
}
</style>
</head>
<body>
<div class="v_code">
<div class="code_show">
<span id="checkCode" class="code">
4486
</span>
<a href="javascript:void(0)" id="change">换一串数字</a>
</div>
<div class="input_code">
<label for="inputCode">验证码：</label>
<input type="text" id="inputCode" />
<span id="text_show"></span>
</div>
<input type="button" id="Button1" value="确认">
</div>
<script>
//生成验证码
window.onload = function() {
var res = getCode();
function getCode() {
var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
var str = '';
for (var i = 0; i < 4; i++) {
var num = Math.round(Math.random() * (9 - 0) + 0);
str += arr[num];
}
return str;
}
document.getElementById('checkCode').innerHTML = res;
document.getElementById('change').onclick = function() {
document.getElementById('checkCode').innerHTML = getCode();
}
document.getElementById('Button1').onclick = function() {
var getCode = document.getElementById('checkCode').innerText;
var Code = document.getElementById('inputCode').value;
if (getCode != Code) {
alert('验证码错误');
document.getElementById('inputCode').value = '';
return false;
}else {
alert('验证成功！');
return;
}
}
}
</script>
</body>
</html>
P3：百度搜索数据展示
效果：
功能：
- 搜索框内容匹配显示
- 搜索框无内容显示请输入
- 数据库内无匹配内容显示无结果
知识点：
-
onkeyup事件
当用户释放键盘按钮时执行Javascript代码
-
onblur事件
当用户离开input输入框时执行一段Javascript代码
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度搜索数据展示</title>
<style>
.search {
width: 1000px;
height: 10px;
margin: 50px auto;
}
.search #val {
width: 400px;
height: 32px;
border: 1px solid #949494;
}
.search #sub {
width: 64px;
height: 32px;
}
.show {
width: 400px;
margin: 0 0 0 260px;
background-color: #cbcbcb;
border-radius: 0 0 10% 10%;
}
.show p {
margin: -25px 0 20px 20px;
font-size: 20px;
line-height: 32px;
}
</style>
</head>
<body>
<div class="content">
<div class="search">
<input type="text" id="val" placeholder="请输入">
<input type="submit" id="sub">
</div>
<div class="show" id="show">
</div>
</div>
<script>
let arr = ['31省份一季度GDP排名', '北京12个区域将开展3天3轮核酸', '长沙塌楼近88小时后救出第9名被困者', '上海5人因错转未死亡老人被问责', '上海新增本土“274+5395” 死亡20例',
'长沙塌楼为何不“揭盖子”救?'
];
let input = document.getElementById('val');
let show = document.getElementById('show');
input.onkeyup = function() {
show.style.display = 'block';
let str = '';
arr.forEach((item) => {
let res = item.indexOf(input.value);
if (res != -1) {
str += '<p>' + item + '<p>';
}
})
if(!input.value){
show.innerHTML = '<p>请输入查询内容<p>';
}else if(!str){
show.innerHTML = '<p>暂无结果<p>';
}else{
show.innerHTML = str;
}
}
input.onblur = function() {
show.style.display = 'none';
input.value = '';
}
</script>
</body>
</html>
P4：tab选项卡功能
效果：
功能：
当鼠标滑动到对应的标签上时标签盒子变色并且显示对应的图片
知识点：
-
onmouseover
鼠标移动到某个元素之上时触发
-
onmouseout
鼠标从某个元素上移开时触发
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab选项卡功能</title>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
li {
width: 100px;
height: 40px;
background-color: #eee;
border: 1px solid #CCC;
float: left;
line-height: 40px;
text-align: center;
}
div {
width: 406px;
height: 406px;
border: 1px solid #CCC;
}
img {
width: 406px;
height: 406px;
display: none;
}
</style>
</head>
<body>
<ul>
<li>红</li>
<li>绿</li>
<li>蓝</li>
<li>黑</li>
</ul>
<div>
<img src="" alt="红" style="background-color: red;">
<img src="" alt="绿" style="background-color: green;">
<img src="" alt="蓝" style="background-color: blue;">
<img src="" alt="黑" style="background-color: black;">
</div>
<script>
let li = document.getElementsByTagName('li');
let img = document.getElementsByTagName('img');
for (let i = 0; i < li.length; i++) {
//元素数组下标设置
li[i].index = i;
li[i].onmouseover = function() {
this.style.backgroundColor = 'yellow';
for(let j = 0; j < img.length; j++){
img[j].style.display = 'none';
}
img[this.index].style.display = 'block';
}
li[i].onmouseout = function() {
li[i].style.backgroundColor = '#EEE';
}
}
</script>
</body>
</html>
P5：全选、全不选、反选
效果：
功能：
全选、全不选、反选功能实现
知识点：
checkbox选中的三种方式：
- 用户点击选中
- 对标签添加checked的属性
- 在js中令标签的checked的值为true
onclick或者其他只添加一次的事件可以直接写在标签内指向封装好的函数，可一定程度简化代码
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>P5全选、全不选、反选</title>
</head>
<body>
<form action="">
<p><input type="checkbox" name="box" id="box">Java</p>
<p><input type="checkbox" name="box" id="box">HTML</p>
<p><input type="checkbox" name="box" id="box">CSS</p>
<p><input type="checkbox" name="box" id="box">JavaScript</p>
</form>
<button onclick="select(0)">全选</button>
<button onclick="select(1)">全不选</button>
<button onclick="select(2)">反选</button>
<script>
//选中的三种方式：1、用户点击选中 2、对标签添加checked属性 3、在js中令标签checked的值为true
let input = document.getElementsByTagName('input');
function select(num) {
for (var i = 0; i < input.length; i++) {
switch (num) {
case 0:
input[i].checked = true;
break;
case 1:
input[i].checked = false;
break;
case 2:
input[i].checked = !input[i].checked;
break;
default:
alert('unuseful input');
}
}
}
</script>
</body>
</html>
P6：相册选择功能
效果：
功能：
鼠标移动到图片缩略图时进行展示
知识点：
遍历图片缩略图添加onmouseover属性更改展示图的src即可
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相册选择功能</title>
<style>
.big {
width: 500px;
height: 400px;
}
.small>img {
margin-left: 16px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./img/32.jpg" alt="" class="big">
</div>
<div class="small">
<img src="./img/32.jpg" alt="">
<img src="./img/33.jpg" alt="">
<img src="./img/34.jpg" alt="">
<img src="./img/35.jpg" alt="">
</div>
<script>
let imgs = document.getElementsByTagName('img');
for (var i = 1; i < imgs.length; i++) {
imgs[i].onmouseover = function(){
imgs[0].src = this.src;
}
}
</script>
</body>
</html>
P7：敏感词过滤
效果：
功能：
将用户输入的数据中在数组中出现的敏感词全部变成星号
知识点：
replace(被替换的内容，替换的内容)
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>敏感词过滤</title>
<style>
#res {
width: 300px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>敏感词过滤</h2>
<p>
<textarea name="" id="area" cols="30" rows="10"></textarea>
</p>
<p>
<input type="submit" value="发布" id="input">
</p>
<p id="res"></p>
<script>
//用到replace方法，获得用户输入的值，如果正则匹配到了，则进行替换
let area = document.getElementById('area');
let input = document.getElementById('input');
let res = document.getElementById('res');
// let reg = /fuck|shit|金三胖|妈的/;
let reg = ['fuck', 'shit', '金三胖', '妈的'];
input.onclick = function() {
let newValue = area.value;
for (var i = 0; i < reg.length; i++) {
newValue = newValue.replace(reg[i], '***');
}
res.innerText = newValue;
}
</script>
</body>
</html>
P8：进度条功能
效果：
功能：
点击安装，进度条开始运行；多次点击安装只会触发一次
知识点：
计时器的使用和防止计时器的多次触发
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条</title>
<style>
.father {
width: 400px;
height: 30px;
border: 1px solid black;
border-radius: 2%;
}
.father .son {
width: 0px;
height: 30px;
background-color: red;
line-height: 30px;
text-align: center;
}
.father .son .percent {
width: 400px;
height: 30px;
}
#button {
width: 64px;
height: 36px;
border-radius: 16%;
margin: 20px 168px 0 168px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="percent">
<span>0</span>
<span>%</span>
</div>
</div>
</div>
<input type="submit" value="安装" id="button">
<script>
//利用定时器来控制递增的操作，递增的值为width和百分数，当width到达father的width大小时停止定时器
let but = document.getElementById('button');
let div = document.getElementsByTagName('div');
let span = document.getElementsByTagName('span');
let timer = null;
but.onclick = function() {
let num = 0;
if (timer == null) {
timer = setInterval(() => {
num += 1;
div[1].style.width = num + 'px';
if (num == 400) {
clearInterval(timer);
}
span[0].innerHTML = Math.round(num / 4);
}, 20);
}
}
</script>
</body>
</html>
P9：返回首屏功能
效果：
功能：
当页面向下滚动到一定程度的时候出现返回顶部的按钮，点击即可返回顶部
知识点：
document.body.scrollTop和document.document.documentElement.scrollTop获得此时到页面顶部的距离
位于HTML文档的首行，注明了**即告诉浏览器使用W3C的标准解析渲染页面，这里使用的规范是CSS1Compat，此时document.documentElement.scrollTop**可以使用，document.body.scrollTop不行；
如果顶部没有注明，则为怪异模式，浏览器使用自己的怪异模式解析渲染页面，使用的规范是BackCompat，此时document.documentElement.scrollTop无效，document.body.scrollTop有效；
鉴于兼容问题，通常会将两个都给写上，能用哪个用哪个
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>返回首屏功能</title>
<style>
body {
margin: 0;
padding: 0;
}
.content {
height: 5000px;
}
.goTop {
width: 100px;
height: 100px;
background-color: #bbb;
text-align: center;
line-height: 100px;
position: fixed;
bottom: 100px;
right: 0px;
display: none;
}
</style>
</head>
<body>
<div class="content">
<h2>返回首屏</h2>
<div class="goTop">返回</div>
</div>
<script>
//返回顶部按钮在用户滚动页面向下一定程度时显现出来，反之隐藏，因此需要获取滚动位置
//点击返回按钮时返回页面顶部
window.onscroll = function() {
let res = document.body.scrollTop || document.documentElement.scrollTop;
if (res >= 1000) {
document.getElementsByClassName('goTop')[0].style.display = 'block';
} else {
document.getElementsByClassName('goTop')[0].style.display = 'none';
}
}
let goTop = document.getElementsByClassName('goTop')[0];
goTop.onclick = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
P10：电影票选座
效果：
功能：
点击座位出现背景颜色变化和文字提示，再次点击取消
知识点：
setAttribute()方法和 getAttribute() 方法
setAttribute()
setAttribute() 方法为一个或一组元素添加指定的属性，并且为其赋指定的值。（主要针对自定义属性）
如果这个属性已经存在，仅仅设置或是修改属性值。
element.setAttribute(attributename,attributevalue)
attributename：添加的属性名。必需
attributevalue：添加的属性值。必需
getAttribute()
getAttribute() 方法返回元素上一个指定的属性值。
如果指定的属性值不存在，就返回 null 或是 “”（空字符串）。
element.getAttribute(attributename)
attributename：需要获得属性值的属性名称。必需
首先对每个li添加点击事件（onclick），判断每个li是否有class属性（getAttribute），没有则添加class属性为click（setAttribute），有则使其class属性为空
在click类选择器中添加样式修改
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电影票选座位</title>
<style>
.content {
border: 1px solid black;
border-radius: 10%;
}
ul,
li {
list-style: none;
}
ul {
margin-left: 80px;
}
li {
float: left;
margin: 10px;
width: 192px;
height: 108px;
border: 1px solid black;
border-radius: 10%;
background-color: #c5c5c5;
}
.click {
font-size: 10px;
text-align: center;
line-height: 108px;
font-family: '微软雅黑';
font-weight: bold;
color: #333;
background-color: #ff6f71;
border: 1px solid red;
font-size: 24px;
}
.content ul div {
width: 80%;
height: 200px;
border: 1px solid black;
margin: 0 auto;
border-radius: 10%;
line-height: 200px;
text-align: center;
font-size: 50px;
}
</style>
</head>
<body>
<div class="content">
<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>
<li></li><li></li><li></li><li></li><li></li><li></li>
<p style="clear: both;"></p>
<div>屏幕中央</div>
</ul>
</div>
<script>
let lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
let isSelected = this.getAttribute('class');
if (!isSelected) {
this.setAttribute('class', 'click');
this.innerText = '座位已选';
} else {
this.setAttribute('class', '');
this.innerText = '';
}
}
}
</script>
</body>
</html>
P11：移动的小盒子
效果：
功能：
点击 点击开始 按钮小方框开始向左移动，碰到左边界或者右边界会进行反向运动，点击 点击暂停 按钮小方框停止
知识点：
计时器的使用和简单的逻辑设计
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动的小盒子1</title>
<style>
* {
margin: 0;
padding: 0;
}
#div {
width: 100px;
height: 100px;
background-color: rebeccapurple;
position: absolute;
}
button {
position: relative;
top: 120px;
}
</style>
</head>
<body>
<div id="div"></div>
<button value="">点击开始</button>
<button value="">点击暂停</button>
<script>
let buts = document.getElementsByTagName('button');
let div = document.getElementById('div');
let body = document.body;
let num = 0;
let timer = null;
buts[0].onclick = function() {
let speed = 1;
if (timer == null) {
timer = setInterval(() => {
num += speed;
div.style.left = num + 'px';
if (num >= body.offsetWidth - div.offsetWidth || num <= 0) {
speed = -speed;
}
}, 1)
}
}
buts[1].onclick = function() {
clearInterval(timer);
timer = null;
}
</script>
</body>
</html>
P12：鼠标导航器
效果：
功能：
将盒子与鼠标进行绑定，鼠标到哪，盒子到哪，点击时更改盒子样式
知识点：
event.clientX和event.clientY、clientWidth和clientHeight
获取鼠标相对于浏览器窗口的左上角的X坐标和Y坐标、获取标签的宽度和高度（附带padding）
获取鼠标坐标并赋值给盒子的left属性和top属性（前提盒子有position）
拓展：
event.client、event.screen与event.offset
JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标绑定小盒子</title>
<style>
h2 {
position: relative;
line-height: 100%;
text-align: center;
}
div {
width: 20px;
height: 20px;
background-color: #abc;
position: absolute;
left: -100px;
top: -100px;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>鼠标绑定小盒子</h2>
<div id="div"></div>
<script>
let div = document.getElementById('div');
document.onmousemove = function(e) {
let event = window.event;
div.style.left = event.clientX - div.clientWidth / 2 + 'px';
div.style.top = event.clientY - div.clientHeight / 2 + 'px';
}
div.onmousedown = function(){
this.style.backgroundColor = '#38007d'
}
div.onmouseup = function(){
this.style.backgroundColor = '#abc'
}
</script>
</body>
</html>
P13：学生录入系统
效果：
功能：
输入数据，点击按钮时，存入列表并且展示，点击删除进行删除数据
知识点：
如何方便的将数据一一传到下方表格中，先将所有输入的数据作为属性存储到一个对象中，然后将对象push入数组中，遍历数组将属性连同列表标签一起进行累加，传入下方自定义列表内，令原框内的值清空。另外增加一个删除方法，供onclick调用
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生录入系统</title>
<style>
#app {
width: 61.8%;
margin: 0 auto;
font-size: 20px;
}
table {
width: 100%;
margin: 0 auto;
}
table thead tr th {
padding: 8px;
border: 1px solid black;
border-right: 0;
background-color: #ffff7f;
}
table .tbody tr td {
padding: 6px;
border: 1px solid black;
border-right: 0;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>学生录入系统</legend>
<p><span>姓名：</span><input type="text" name="username" class="username"></p>
<p><span>年龄：</span><input type="text" name="age" class="age"></p>
<p><span>性别：</span><select name="sex" id="sex">
<option value="未知">未知</option>
<option value="男">男</option>
<option value="女">女</option>
</select></p>
<p><span>手机：</span><input type="text" name="phonenumber" class="phonenumber"></p>
<p><button id="but">确认提交</button></p>
</fieldset>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>手机</th>
<th>删除</th>
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
</div>
<script>
let but = document.getElementById('but');
let sex = document.getElementById('sex');
let inputs = document.getElementsByTagName('input');
let tbody = document.getElementsByClassName('tbody')[0];
let stus = [];
but.onclick = function() {
let obj = {
name: inputs[0].value,
age: inputs[1].value,
sex: sex.value,
phone: inputs[2].value
};
stus.push(obj);
let tr = '';
stus.forEach((item, index) => {
tr += "<tr class='newtr'>" +
"<td>" + item.name + "</td>" +
"<td>" + item.age + "</td>" +
"<td>" + item.sex + "</td>" +
"<td>" + item.phone + "</td>" +
"<td οnclick='del(" + index + ")'>删除</td>" +
"</tr>"
});
tbody.innerHTML = tr;
inputs[0].value = '';
inputs[1].value = '';
inputs[2].value = '';
}
function del(index) {
stus.splice(index, 10);
let newtr = document.getElementsByClassName('newtr')[index];
tbody.removeChild(newtr);
}
</script>
</body>
</html>
P14：抽奖器功能
效果：
功能：
点击开始抽奖按钮进行随机抽奖
知识点：
增加一个计时器，到一定事件的时候停止，使用随机函数使随机的盒子背景颜色变换，但在此之前遍历所有抽奖盒子使其背景色为默认颜色；
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖！</title>
<style>
.content {
width: 600px;
height: 600px;
margin: 0 auto;
background-color: #d9d9d9;
}
.content div {
float: left;
width: 33%;
height: 33%;
border: 1px solid black;
background-color: #393939;
border-radius: 50%;
line-height: 200px;
text-align: center;
font-size: 60px;
color: #ffffff;
}
#start {
background-color: #ff007f;
}
</style>
</head>
<body>
<div class="content">
<div class="option">Java</div>
<div class="option">PS</div>
<div class="option">PR</div>
<div class="option">AI</div>
<div id="start">Start</div>
<div class="option">AE</div>
<div class="option">HTML5</div>
<div class="option">CSS3</div>
<div class="option">JavaScript</div>
</div>
<script>
let but = document.getElementById('start');
let options = document.getElementsByClassName('option');
let timer = null;
but.onclick = function() {
let num = 0;
if (timer == null) {
timer = setInterval(() => {
num++;
let ran = Math.round(Math.random() * (7 - 0) + 0);
for (var i = 0; i < options.length; i++) {
options[i].style.backgroundColor = '#393939';
}
options[ran].style.backgroundColor = 'orange';
if (num >= 50) {
clearInterval(timer);
timer = null;
}
}, 100)
}
}
</script>
</body>
</html>
P15：轮播图
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-03wAgGHh-1658134517747)(JavaScript经典案例练习.assets/GIF 2022-5-8 15-28-01.gif)]
功能：
图片进行自动轮播，当鼠标聚焦在图片上的时候，图片停止轮播。
知识点：
jQuery的知识：
eq() 方法返回带有被选元素的指定索引号的元素。
索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。
addClass() 方法向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
siblings() 方法返回被选元素的所有同级元素。
同级元素是共享相同父元素的元素。
还有removeClass()用于移除类属性，mouseover()鼠标划入时的事件，mousseout()鼠标划出时的事件；
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./jquery-3.6.0.min.js"></script>
<title>轮播图</title>
<style>
*,
a,
ul,
li {
text-decoration: none;
list-style: none;
margin: 0;
padding: 0;
}
.wrap {
margin: 100px auto;
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.wrap .navs {
width: 4200px;
height: 100%;
position: absolute;
top: 0;
left: -600px;
}
.wrap .navs li {
width: 600px;
height: 100%;
float: left;
}
.wrap .navs li img {
width: 100%;
height: 100%;
}
#bots {
display: inline-block;
width: 600px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
#bots li {
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #cccccc;
top: 10px;
left: 220px;
float: left;
margin-left: 10px;
}
#bots .active {
background-color: #ff6063;
}
</style>
</head>
<body>
<div class="wrap" id="box">
<ul id="navs" class="navs">
<li><a href="javascript:"><img src="./img/35.jpg" alt="none"></a></li>
<li><a href="javascript:"><img src="./img/32.jpg" alt="none"></a></li>
<li><a href="javascript:"><img src="./img/33.jpg" alt="none"></a></li>
<li><a href="javascript:"><img src="./img/34.jpg" alt="none"></a></li>
<li><a href="javascript:"><img src="./img/35.jpg" alt="none"></a></li>
<li><a href="javascript:"><img src="./img/32.jpg" alt="none"></a></li>
</ul>
<ul id="bots">
<li class="bot active"></li>
<li class="bot"></li>
<li class="bot"></li>
<li class="bot"></li>
</ul>
</div>
<script>
let num = 1;
let i = 0;
let timer = null;
swiper();
function swiper() {
timer = setInterval(() => {
num++;
if (num > 5) {
$("#navs").css('left', -600);
num = 2;
}
$("#navs").animate({
left: -num * 600
}, 500);
i++;
if (i > 3) {
i = 0;
}
$("#bots li").eq(i).addClass('active').siblings().removeClass('active');
}, 1000)
}
$(".wrap").mouseover(() => {
clearInterval(timer);
});
$(".wrap").mouseout(() => {
swiper();
});
</script>
</body>
</html>
P16：放大镜功能
效果：
功能：
鼠标移入图片，显示放大区域以及放大图片
知识点：
放大图、原图的比例和原图、方法区域框的比例要相同，本例是3：1
获取鼠标移动的X，Y坐标，判定移出图片时不显示以及放大框与原图边界的碰撞
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜功能</title>
<style>
* {
margin: 0;
padding: 0;
}
#smallImg {
width: 300px;
height: 300px;
background-image: url(./img/36.jpg);
background-size: cover;
}
#smallDiv {
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, .2);
display: none;
position: absolute;
}
#bigDiv {
width: 300px;
height: 300px;
position: absolute;
left: 300px;
top: 0;
overflow: hidden;
display: none;
}
#bigImg {
width: 900px;
height: 900px;
position: absolute;
}
</style>
</head>
<body>
<div class="fang">
<div id="smallImg">
<div id="smallDiv"></div>
</div>
<div id="bigDiv"><img src="./img/36.jpg" id="bigImg"></div>
</div>
<script>
let smallImg = document.getElementById('smallImg');
let smallDiv = document.getElementById('smallDiv');
let bigImg = document.getElementById('bigImg');
let bigDiv = document.getElementById('bigDiv');
smallImg.onmouseover = function() {
smallDiv.style.display = 'block';
bigDiv.style.display = 'block';
}
smallImg.onmouseout = function() {
smallDiv.style.display = 'none';
bigDiv.style.display = 'none';
}
smallImg.onmousemove = function(event) {
var event = event || window.event;
var x = event.clientX - 50;
var y = event.clientY - 50;
if (x >= 200) {
x = 200;
}
if (y >= 200) {
y = 200;
}
if (x <= 0) {
x = 0;
}
if (y <= 0) {
y = 0;
}
smallDiv.style.left = x + 'px';
smallDiv.style.top = y + 'px';
bigImg.style.left = -3 * x + 'px';
bigImg.style.top = -3 * y + 'px';
}
</script>
</body>
</html>
P17：购物车
效果：
功能：
非常正常的购物车功能
知识点：
find() 方法返回被选元素的后代元素。
后代是子、孙、曾孙，依此类推。
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
所有功能按照顺序实现
首先点击加号减号进行小计计算，数量需要进行限制，不得小于1
其次是总计的计算，总计的计算加入选框的条件，并且将总计的计算封装，在点击加号减号的时候调用
最后是全选和删除按钮的实现，在前面的例子中已经实现
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<table>
<tr>
<th><button class="selectAll">全选</button></th>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="getGoods"></td>
<td>电脑</td>
<td class="price">200</td>
<td>
<button class="jian">-</button>
<span>1</span>
<button class="jia">+</button>
</td>
<td class="total">200</td>
<td class="delete">删除</td>
</tr>
<tr>
<td><input type="checkbox" class="getGoods"></td>
<td>手机</td>
<td class="price">100</td>
<td>
<button class="jian">-</button>
<span>1</span>
<button class="jia">+</button>
</td>
<td class="total">100</td>
<td class="delete">删除</td>
</tr>
</table>
<div>
<span>总计：</span>
<span class="sum"></span>
</div>
<script>
//小计
$(".jia").click(function() { //加法
let num = parseInt($(this).prev().text());
num++;
$(this).prev().text(num);
let price = parseInt($(this).parent().prev().text());
$(this).parent().next().text(price * num);
getSum(); //总计计算
})
$(".jian").click(function() { //减法
let num = parseInt($(this).next().text());
num--;
if (num <= 1) num = 1;
$(this).next().text(num);
let price = parseInt($(this).parent().prev().text());
$(this).parent().next().text(price * num);
getSum(); //总计计算
})
//总计
getSum();
function getSum() {
let sum = 0;
for (var i = 0; i < $('.total').length; i++) {
if ($('.total').eq(i).parent().find('input').prop('checked')) {
sum += parseInt($('.total').eq(i).text());
}
}
$('.sum').text(sum);
}
//全选按钮
$('.selectAll').click(function() {
$('.getGoods').prop('checked', true);
getSum();
});
//用户点击计算总价
$('.getGoods').click(function() {
getSum();
});
//删除功能
$('.delete').click(function() {
$(this).parent().remove();
getSum();
});
</script>
</body>
</html>
2975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
