1-前端 - 作业集
京东商城选项卡切换页面
各版本实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东选项卡</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.tab-main {
background-color: #f7f7f7;
border-bottom: 1px solid #e4393c;
display: block;
height: 37px;
}
.tab-main ul {
list-style: none;
margin: 0 auto;
padding-left: 0;
}
.tab-main ul li:hover {
color: #e4393c;
}
.tab-main ul li {
display: inline-block;
text-decoration: none;
float: left;
font-size: 14px;
cursor: pointer;
color: #666;
text-align: center;
line-height: 37px;
padding: 0 25px;
}
.active {
background-color: #e4393c;
color: #fff !important;
}
p {
margin: 0 auto;
width: 100%;
height: 500px;
text-align: center;
line-height: 500px;
background: #e4393c;
color: #fff;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="tab-main">
<ul>
<li class="active" co='aa'>商品介绍</li>
<li co='bb'>规格与包装</li>
<li co='cc'>售后保障</li>
<li co='dd'>商品评价</li>
<li co='ee'>本店好评商品</li>
</ul>
</div>
<div>
<p class="aa">商品介绍</p>
<p class="hide bb">规格与包装</p>
<p class="hide cc">售后保障</p>
<p class="hide dd">商品评价</p>
<p class="hide ee">本店好评商品</p>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
// 第四种实现方式
$("ul li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
$("." + $(this).attr("co")).removeClass("hide").siblings().addClass("hide");
})
/*
// 第三种实现方式
var li_list = document.getElementsByTagName('li');
var p_list = document.getElementsByTagName('p');
console.log(li_list, p_list)
// 下面for 循环做两件事，
// 1： 为当前的标签绑定一个属性(值就是该标签的所属li_list中的索引值)
// 2： 为当前的标签对象绑定一个 onclick 事件
// let 禁止变量提升，在局部作用域定义的变量，禁止全局作用域下引用
for(let i = 0; i < li_list.length; i++){
console.log(2222222, i, li_list[i])
// 在循环中，为当前的标签对象绑定一个属性
// li_list[i].index = i;
li_list[i].onclick = function(){
// 为所有的 li 标签移除 active 类属性
for(var j = 0; j < li_list.length; j++){
li_list[j].classList.remove("active");
p_list[j].classList.add("hide");
}
// 为当前的标签添加 active 类属性
// this.classList.add('active');
// li_list[this.index].classList.add('active');
// // p_list[this.index].classList.remove("hide");
li_list[i].classList.add('active');
p_list[i].classList.remove("hide");
}
}
console.log(11111111, i)
*/
/*
// 第二种实现方式
var li_list = document.getElementsByTagName('li');
var p_list = document.getElementsByTagName('p');
console.log(li_list, p_list)
// 下面for 循环做两件事，
// 1： 为当前的标签绑定一个属性(值就是该标签的所属li_list中的索引值)
// 2： 为当前的标签对象绑定一个 onclick 事件
for(var i = 0; i < li_list.length; i++){
console.log(2222222, i, li_list[i])
// 在循环中，为当前的标签对象绑定一个属性
li_list[i].index = i;
li_list[i].onclick = function(){
// 为所有的 li 标签移除 active 类属性
for(var j = 0; j < li_list.length; j++){
li_list[j].classList.remove("active");
p_list[j].classList.add("hide");
}
// 为当前的标签添加 active 类属性
// this.classList.add('active');
li_list[this.index].classList.add('active');
p_list[this.index].classList.remove("hide");
}
}
console.log(11111111, i)
*/
/*
// 第一种实现方式
var li_list = document.getElementsByTagName('li');
console.log(li_list)
for(var i = 0; i < li_list.length; i++){
li_list[i].onclick = function(){
// 当前标签添加 类属性 active， 让标签的背景和字体颜色发生变化
this.classList.add("active");
// 获取当前标签的co属性值，然后查找标签：根据类属性是 co的值的标签
var co = document.getElementsByClassName(this.getAttribute('co'))[0];
co.classList.remove("hide");
//console.log(111111, co, this.getAttribute('co'))
for(var j = 0; j < li_list.length; j++){
// if 条件 过滤出除了自己之外的标签
if(li_list[j] != this){
// 为其他的 li 标签移除类属性, 排他性
li_list[j].classList.remove("active");
// 让其他的 p 标签 添加上 hide 属性，目的是不显示该标签
var co = document.getElementsByClassName(li_list[j].getAttribute('co'))[0];
co.classList.add("hide");
}
}
}
}
*/
</script>
</html>
跑马灯
跑马灯-文字版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跑马灯-文字版</title>
<style>
.container{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
color: #ff6700;
background-color: #b0b0b0;
}
</style>
</head>
<body>
<h1 class="container">
听雨危楼的博客欢迎你
</h1>
</body>
<script >
function run(){
// 获取h1标签
var oH1 = document.getElementsByClassName("container")[0];
// 获取h1标签的文本
var oH1Content = oH1.innerText;
// 获取文本的第一个字符
var firstText = oH1Content.charAt(0);
// 获取文本的后续字符
var laterText = oH1Content.substring(1, oH1Content.length);
// 将第一个字符拼接到后续字符的最后面
var newContent = laterText + firstText;
// 重新赋值到标签中
oH1.innerText = newContent;
}
// 每秒钟执行一次函数，达到跑马灯效果
setInterval(run, 1000);
</script>
</html>
跑马灯-图片版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯-图片版</title>
<style>
body {
padding: 0;
margin: 0;
position: relative;
}
#div {
height: 200px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#div1 {
position: absolute;
display: flex;
height: 200px;
}
img {
width: 200px;
}
</style>
</head>
<body>
<div id="div">
<div id="div1">
<img src="./img/1.JPG" alt="">
<img src="./img/2.JPG" alt="">
<img src="./img/3.JPG" alt="">
<img src="./img/4.JPG" alt="">
<img src="./img/5.JPG" alt="">
<img src="./img/6.JPG" alt="">
<!--<img src="./img/7.JPG" alt="">-->
<!--<img src="./img/8.JPG" alt="">-->
<!--<img src="./img/9.JPG" alt="">-->
</div>
</div>
</body>
<script>
window.onload = function() {
let innerWidth = window.innerWidth;
var speed = 10;
var div = document.getElementById("div");
var div1 = document.getElementById("div1");
div1.innerHTML += div1.innerHTML;
div.style.width = div1.offsetWidth > innerWidth ? innerWidth + 'px' : div1.offsetWidth / 2 + 'px';
var left = 0;
function foo() {
if (left <= -div1.offsetWidth / 2) {
left = 0
} else {
left -= 1
}
div1.style.left = left + "px";
}
setInterval(foo, speed);
}
</script>
</html>
参考:js实现走马灯效果（无缝衔接） | 使用JS实现图片轮播滚动跑马灯效果
轮播图
为了更好的效果，尽量找些比较宽的图片，或者去华为官网下载：https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent
本示例就是用的华为官网的图。
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图-张开</title>
<style>
* {
padding: 0;
margin: 0;
}
#container {
position: relative;
width: 100%;
overflow: hidden;
}
ul {
list-style: none;
}
#ul1 {
display: flex;
}
#ul2 {
position: absolute;
left: 50%;
margin-left: -155px;
bottom: 20px;
}
#ul2 li {
background-color: #b0b0b0;
display: inline-block;
width: 100px;
height: 3px;
position: relative;
}
#ul2 span {
width: 0;
height: 3px;
display: flex;
position: absolute;
left: 0;
top: 0;
background: #fff;
}
</style>
</head>
<body>
<div id="container">
<ul id="ul1">
<li><a href=""><img src="https://www-file.huawei.com/-/media/corp2020/home/banner/4/vmall.jpg" alt=""></a></li>
<li><a href=""><img src="https://www-file.huawei.com/-/media/corp2020/home/banner/4/hwcloud-618-2.jpg" alt=""></a></li>
<li><a href=""><img src="https://www-file.huawei.com/-/media/corp2020/home/banner/4/hwcloud-618-2.jpg" alt=""></a></li>
</ul>
<ul id="ul2">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
window.onload = function () {
var speed = 3000;
var ul1 = document.getElementById('ul1');
var ul1Li = ul1.getElementsByTagName('li');
var ul2 = document.getElementById('ul2');
var ul2Li = ul2.getElementsByTagName('li');
// 实现自动轮播
$("img").width($(document.body).width());
var index = 0;
function foo() {
if (index == ul1Li.length) {
index = 0
}
$("#ul1 li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
$("#ul2 li span").eq(index).css("width", "100px").css('transition', 'all 3s linear');
$("#ul2 li span").eq(index).parent().siblings().find('span').css("width", "0").css('transition', 'none');
index++;
}
foo();
var t = setInterval(foo, speed);
// 设置鼠标离开和经过时定时器操作
$("#container").mouseover(function () {
clearInterval(t);
});
$("#container").mouseout(function () {
t = setInterval(foo, speed);
});
// 绑定点击事件
$("#ul2 li").click(function () {
$("#ul2 li span").eq($(this).index()).css("width", "100px").css('transition', 'none 3s linear');
$("#ul2 li span").eq($(this).index()).parent().siblings().find('span').css("width", "0").css('transition', 'none');
$("#ul1 li").eq($(this).index()).fadeIn(1000).siblings().fadeOut(1000);
});
$("#ul2 li").mouseover(function () {
$(this).css("cursor", "pointer")
})
};
// 将图片的宽根据窗口宽度自适应
window.onresize = function () {
$("img").width($(document.body).width());
}
</script>
</html>
table增删改查作业
纯手工版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>周末作业讲解</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #616161;
opacity: 0.4;
z-index: 998;
}
.modal {
height: 200px;
width: 300px;
background-color: white;
position: absolute;
margin-top: -100px;
margin-left: -150px;
top: 50%;
left: 50%;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>街舞</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
<td>烫头</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>苑局</td>
<td>日天</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="myCover" class="cover hide"></div>
<div id="myModal" class="modal hide">
<div>
<p>
<label for="modal-name">姓名</label>
<input type="text" id="modal-name">
</p>
<p>
<label for="modal-hobby">爱好</label>
<input type="text" id="modal-hobby">
</p>
<p>
<button id="modal-submit">提交</button>
<button id="modal-cancel">取消</button>
</p>
</div>
</div>
<script src="./jquery-3.2.1.min.js"></script>
<script>
// 定义一个弹出模态框的函数
function showModal() {
$("#myCover,#myModal").removeClass("hide");
}
// 关闭模态框
function closeModal() {
// 1. 清空模态框中的input
$("#myModal").find("input").val("");
$("#myCover,#myModal").addClass("hide");
}
// 给新增按钮绑定事件
$("#add").on("click", function () {
// 把模态框弹出!
// $("#myCover").removeClass("hide");
// $("#myModal").removeClass("hide");
showModal()
});
// 模态框中的取消按钮绑定事件
$("#modal-cancel").on("click", function () {
// 2. 隐藏模态框
closeModal();
});
// 模态框中的提交按钮绑定事件
$("#modal-submit").on("click", function () {
// 1. 取到 用户 填写的 input框的值
var name = $("#modal-name").val(); // 把用户在模态框里输入的姓名获取到,保存在name变量中
var hobby = $("#modal-hobby").val(); // 把用户在模态框里输入的爱好获取到,保存在hobby变量中
var $myModalEle = $("#myModal");
// 判断,按需操作
var $currentTrEle = $myModalEle.data("currentTr");
if ($currentTrEle !== undefined) {
// 说明是编辑状态
$currentTrEle.children().eq(1).text(name);
$currentTrEle.children().eq(2).text(hobby);
// 清空之前保存的当前行
$myModalEle.removeData();
} else {
// 创建tr标签把数据填进去
var trEle = document.createElement("tr");
var number = $("tr").length;
$(trEle).html("<td>" + number + "</td>" +
"<td>" + name + "</td>" +
"<td>" + hobby + "</td>" +
'<td><button class="edit-btn">编辑</button> <button class="delete-btn">删除</button></td>'
);
// 把创建好的tr添加到tbody中
$("tbody").append(trEle);
}
// 隐藏模态框
closeModal();
});
// 2. 根据是编辑 还是新增 做不同的操作
// 2.1 如果是新增操作,就生成一条新的tr,加到table的最后
// 2.2 如果是编辑操作, 根据先前 编辑 按钮那一行
// 难点在于 如何确定 编辑的是哪一行? --> 利用data()可以存具体的jQuery对象
// 给每一行的编辑按钮绑定事件
// 要使用事件委托,基于已经存在的元素(页面加载完之后存在的标签)绑定事件
$("tbody").on("click", ".edit-btn", function () {
// 把模态框弹出来
showModal();
// 把原来的数据填写到模态框中的input
var $currentTrEle = $(this).parent().parent();
// 把当前行的jQuery对象保存起来
$("#myModal").data("currentTr", $currentTrEle);
var name = $currentTrEle.children().eq(1).text();
var hobby = $currentTrEle.children().eq(2).text();
// 填
$("#modal-name").val(name);
$("#modal-hobby").val(hobby);
});
// 给每一行的删除按钮绑定事件
$("tbody").on("click", ".delete-btn", function () {
// 删除被点击的删除按钮的那一行
var $currentTrEle = $(this).parent().parent();
// 更新序号
// 找到当前行后面所有的tr,依次更新序号
$currentTrEle.nextAll().each(function () {
// 取到原来的序号
var oldNumber = $(this).children().first().text();
// 将原来的序号-1,再赋值回去
$(this).children().first().text(oldNumber - 1);
});
$currentTrEle.remove();
});
</script>
</body>
</html>
bootstrap版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap版</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
<button class="btn btn-default" data-toggle="modal" data-target="#myModal" id="add">新增</button>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody id="content">
<tr>
<td>1</td>
<td>张伟</td>
<td>33</td>
<td>
<button class="btn btn-info btn-sm edit" data-toggle="modal" data-target="#myModal">编辑</button>
<button class="btn btn-sm btn-danger del">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>庆侠兄弟</td>
<td>16</td>
<td>
<button class="btn btn-info btn-sm edit" data-toggle="modal" data-target="#myModal">编辑</button>
<button class="btn btn-sm btn-danger del">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>王小二</td>
<td>20</td>
<td>
<button class="btn btn-info btn-sm edit" data-toggle="modal" data-target="#myModal">编辑</button>
<button class="btn btn-sm btn-danger del">删除</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">新增/编辑模态框</h4>
</div>
<div class="modal-body">
<form action="">
<input type="text" class="form-control" placeholder="username" id="username">
<br>
<input type="text" class="form-control" placeholder="age" id="age">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="close">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="save">Save changes</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
// 点击新增按钮，首先清空input的值
$("#add").click(function () {
$("#username").val("");
$("#age").val("");
$("#myModalLabel").text("新增");
// 无论currentTr属性值存在不或者不存在，都给删除，防止点击编辑按钮却不保存而是点击close的情况，导致这个属性也被添加了
$("#save").removeData("currentTr");
});
// 实现添加功能
$("#save").on("click", function () {
var $currentTr = $(this).data("currentTr");
// console.log(1111111, $currentTr);
var $userName = $("#username");
var $age = $("#age");
if ($currentTr != undefined) { // 表示是编辑操作
$currentTr.find('td').eq(1).text($userName.val());
$currentTr.find('td').eq(2).text($age.val());
} else { // 表示是新增操作
var num = $("#content tr").length + 1;
var trHtml = '<tr>\n' +
' <td>' + num + '</td>\n' +
' <td>' + $userName.val() + '</td>\n' +
' <td>' + $age.val() + '</td>\n' +
' <td>\n' +
' <button class="btn btn-info btn-sm edit" data-toggle="modal" data-target="#myModal">编辑</button>\n' +
' <button class="btn btn-sm btn-danger del">删除</button>\n' +
' </td>\n' +
' </tr>';
$("#content").append(trHtml);
}
// 每次新增后都要清空input框内容
$userName.val("");
$age.val("");
// 清空 $(this).data(currentTr)
$(this).removeData("currentTr");
});
// 编辑功能，当点击编辑按钮的时候，应该将内容添加到input框中，编辑后再保存,这里的重点要用到事件委派
$("#content").on("click", '.edit', function () {
$("#myModalLabel").text("编辑");
// 将当前行的内容放到input中
var username = $(this).parent().parent().find('td').eq(1).text();
var age = $(this).parent().parent().find('td').eq(2).text();
$("#username").val(username);
$("#age").val(age);
// 由于新增和编辑按钮共用modal框，所以，通过加属性的方式做区分
var $currentTr = $(this).parent().parent();
$("#save").data("currentTr", $currentTr);
});
// 删除功能，点击删除按钮，删除当前行,也要用到事件委派
$("#content").on("click", '.del', function () {
// 删除当前行之前，要重新对序号列进行整理
// var currentNum = $(this).parent().siblings(":first").text();
$(this).parent().parent().nextAll().each(function () {
var currentNum = $(this).find("td").eq(0).text();
$(this).find("td").eq(0).text(currentNum - 1);
});
$(this).parent().parent().remove();
})
</script>
</html>
that's all
