js案例练习
Kw_Chng
于 2023-01-12 15:07:17 发布
阅读量544
收藏
3
点赞数
于 2023-01-12 15:07:17 发布
阅读量544
收藏
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=., initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<script>
let imgArr = [
"./images/1.webp",
"./images/2.webp",
"./images/3.webp",
"./images/4.webp",
"./images/5.webp",
];
let imgList = document.querySelectorAll('img');
//伪数组是不能直接设置src的，必须拿到每一项才能设置
for (let i = 0; i < imgList.length; i++) {
imgList[i].src = imgArr[i];
}
</script>
</body>
</html>
<!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>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script>
let nameArr = ['1','2','3','4','5'];
let pList = document.querySelectorAll('p');
for (let i = 0; i < nameArr.length; i++) {
pList[i].innerHTML = nameArr[i];
}
</script>
</body>
</html>
<!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>
</head>
<style>
.one {
width: 300px;
height: 300px;
background-color: red;
}
.two {
width: 300px;
height: 300px;
background-color: blue;
}
.three {
width: 300px;
height: 300px;
background-color: green;
}
</style>
<body>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<script>
let classArr = ['one', 'two', 'three'];
let classList = document.querySelectorAll('div');
for (let i=0; i<classArr.length;i++) {
classList[i].className = classArr[i];
}
</script>
</body>
</html>//设置颜色
<!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>
</head>
<body>
<script>
//每次打开网页都是不同的背景色
let colorArr = ["red", "green", "yellow","blue"];
//设置随机数，(3-0+1)+0：3是数组下标最大值，0是数组下标最小值，1是每次下标加1
let randNum1 = Math.floor(Math.random() * (3 - 0 + 1) + 0);
//随机数写法2
let randNum2 = Math.floor(Math.random() * colorArr.length);
document.body.style.backgroundColor = colorArr[randNum2];
console.log(randNum2);
console.log(document.body.style.backgroundColor);
</script>
</body>
</html>
<!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>
</head>
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<script>
let inpueList = document.querySelectorAll('input');
for (let i = 0; i < inpueList.length; i++){
inpueList[i].checked = true;
}
</script>
</body>
</html>//循环设置复选框选中
<!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>
</head>
<body>
<input type="checkbox" />
<script>
let inputLabel = document.querySelector("input");
let flag = false;
setInterval(function () {
flag = !flag;
inputLabel.checked = flag;
}, 1000);
</script>
</body>
</html>
<!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>
</head>
<body>
<span></span>
<script>
//获取标签
let spanLabel = document.querySelector("span");
//菜名数组
let nameArr = ["锅包肉", "地三鲜", "铁锅炖", "大拉皮"];
//封装随机数函数，随机数公式Math.random() * (max - min + 1) + min
function randNum(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
//计时器
setInterval(function () {
//span显示
spanLabel.innerHTML = nameArr[randNum(0, nameArr.length-1)];
}, 1000);
</script>
</body>
</html>
<!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 {
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div></div>
<script>
let divLabel = document.querySelector("div");
function randNum(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
//封装函数：产生随机色
function randomColor() {
//每次调用randNum函数，得到的数都是随机的
//rgb(255,255,255)
let red = randNum(0, 255);
let green = randNum(0, 255);
let blue = randNum(0, 255);
return `rgb(${red}, ${green}, ${blue})`;
}
setInterval(function () {
divLabel.style.backgroundColor = randomColor();
}, 1000);
</script>
</body>
</html>
<!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: 100px;
height: 50px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
let arr = [
"red",
"blue",
"green",
"yellow",
"orange",
"pink",
"gray",
"purple",
];
let divList = document.querySelectorAll("div");
setInterval(function () {
arr.push(arr[0]); //开头元素加至末尾
arr.shift(); //删除开头元素
//将新的div数组下标与颜色数组下标一一对应就可显示颜色
for (let i = 0; i < divList.length; i++) {
divList[i].style.backgroundColor = arr[i];
}
}, 1000);
//经验：关心数据变化，将值赋予给标签
</script>
</body>
</html>
<!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>
</head>
<body>
<input type="button" value="切换" />
<img src="" alt="" />
<script>
let imgSrc = [
"./images/b01.jpg",
"./images/b02.jpg",
"./images/b03.jpg",
"./images/b04.jpg",
"./images/b05.jpg",
];
function randNum(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
let myBtn = document.querySelector("input");
let myImg = document.querySelector("img");
myBtn.addEventListener("click", function () {
myImg.src = imgSrc[randNum(0, imgSrc.length - 1)];
});
</script>
</body>
</html>
<!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>
</head>
<body>
用户名：<input type="text" placeholder="用户名" /> 邮箱：<input
type="text"
placeholder="邮箱"
/>
登录密码：<input type="text" placeholder="登录密码" /> 确认密码：<input
type="text"
placeholder="确认密码"
/>
<input type="checkbox" id="check" /> 同意协议并注册
<input type="button" id="btn" value="完成注册" />
<script>
let box = document.querySelector("#check");
let btn = document.querySelector("#btn");
box.addEventListener("click", function () {
//获取复选框状态，this指向的是box
//如果选中
if (this.checked === true) {
btn.disabled = false;
} else {
btn.disabled = true;
}
//简写：
// btn.disabled = !this.checked;
});
</script>
</body>
</html>
<!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: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box label {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
height: 24px;
background-color: pink;
cursor: pointer;
background: url(./images/close.png) no-repeat;
background-size: cover;
}
.box label.active {
background-image: url(./images/open.png);
}
</style>
</head>
<body>
<div class="box">
<!-- 图标 -->
<label for=""></label>
<input type="password" name="" id="pwd" placeholder="请输入密码" />
</div>
<script>
let tuBiao = document.querySelector(".box label");
let myInput = document.querySelector("#pwd");
tuBiao.addEventListener("click", function () {
//换背景图
//classList.toggle这个方法可以给dom元素添加类，消除类
tuBiao.classList.toggle("active"); //点击标签时，会给这个标签添加和消除“active类
if (myInput.type === "text") {
myInput.type = "password";
} else {
myInput.type = "text";
}
});
</script>
</body>
</html>
<!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>
body {
padding: 40px;
}
ul {
padding: 0;
list-style: none;
}
li {
margin: 10px 0;
line-height: 26px;
display: flex;
}
input,
button {
padding: 0;
margin-left: 10px;
display: block;
}
input {
width: 190px;
outline: none;
}
button {
width: 120px;
}
.verify {
width: 60px;
}
</style>
</head>
<body>
<ul>
<li>
手机号:
<input type="text" />
</li>
<li>
验证码:
<input type="text" class="verify" />
<button id="btn">获取验证码</button>
</li>
</ul>
<script>
//获取元素
let myBtn = document.querySelector('button');
//设置变量暂存计时器
let timer;
//按钮点击事件
myBtn.addEventListener('click', function(){
//点击按钮，马上禁用
myBtn.disabled = true;
//设置倒计时
let time = 5;
function myTime(){
time --;
myBtn.innerHTML = `${time}秒后重新获取`;
//如果倒计时时间为0，销毁计时器
if (time < 0) { //若条件写成time === 0，time变为0后很快就销毁计时器，此时按钮看不到文字出现0秒
clearInterval(timer); //销毁计时器后，按钮上的文字为“0秒后重新获取”且不变
//按键内容恢复且取消禁用
myBtn.innerHTML = '获取验证码';
myBtn.disabled = false;
}
}
//立即执行1次函数，否则页面会延迟1秒
myTime();
timer = setInterval(myTime, 1000) //myTime不加括号，在这里执行的是函数体，而不是调用
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="css/hero.css" />
</head>
<body>
<a href="javascript:" id="create">创建英雄列表</a>
<ul class="list">
<!--根据此条创建标签 <li><img src="uploads/heros/01.jpg" title="司马懿"></li> -->
</ul>
<script type="text/javascript">
// 2. 准备数据
let datas = [
{ name: "司马懿", imgSrc: "01.jpg" },
{ name: "女娲", imgSrc: "02.jpg" },
{ name: "百里守约", imgSrc: "03.jpg" },
{ name: "亚瑟", imgSrc: "04.jpg" },
{ name: "虞姬", imgSrc: "05.jpg" },
{ name: "张良", imgSrc: "06.jpg" },
{ name: "安其拉", imgSrc: "07.jpg" },
{ name: "李白", imgSrc: "08.jpg" },
{ name: "阿珂", imgSrc: "09.jpg" },
{ name: "墨子", imgSrc: "10.jpg" },
{ name: "鲁班", imgSrc: "11.jpg" },
{ name: "嬴政", imgSrc: "12.jpg" },
{ name: "孙膑", imgSrc: "13.jpg" },
{ name: "周瑜", imgSrc: "14.jpg" },
{ name: "XXX", imgSrc: "15.jpg" },
{ name: "XXX", imgSrc: "16.jpg" },
{ name: "XXX", imgSrc: "17.jpg" },
{ name: "XXX", imgSrc: "18.jpg" },
{ name: "XXX", imgSrc: "19.jpg" },
{ name: "XXX", imgSrc: "20.jpg" },
];
//获取a标签
let createA = document.querySelector("#create");
//获取ul标签
let theUl = document.querySelector(".list");
//点击事件
createA.addEventListener("click", function () {
//循环遍历数据，有多少个英雄就创建多少套li标签
for (let i = 0; i < datas.length; i++) {
//获取datas
let objData = datas[i];
//创建li标签
let theLi = document.createElement("li");
//创建img标签
let theImg = document.createElement("img");
//添加标签
//将img放到li里面
theLi.appendChild(theImg);
//将li标签放到ul标签里
theUl.appendChild(theLi);
//给img标签设置内容和图片
theImg.src = "./uploads/heros/" + objData.imgSrc;
theImg.title = objData.name;
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>练习 - 网页时钟</title>
<style>
* {
box-sizing: border-box;
}
.clock {
width: 600px;
height: 600px;
background: url(./images/clock.jpg) no-repeat;
margin: 50px auto 0;
position: relative;
}
.hh,
.mm,
.ss {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(./images/hour.png) no-repeat center;
}
.mm {
background-image: url(./images/minute.png);
transform: rotate(270deg);
}
.ss {
background-image: url(./images/second.png);
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="clock">
<div class="hh" id="h"></div>
<div class="mm" id="m"></div>
<div class="ss" id="s"></div>
</div>
<script>
//获取标签
let hourDiv = document.querySelector("#h");
let minutesDiv = document.querySelector("#m");
let secondsDiv = document.querySelector("#s");
//解决每次刷新页面后，时钟都指向原图片的时间（原因是：计时器里的代码不会马上执行，需要等待时间到达才会执行）
//解决办法：参考之前案例（案例14）中将计时器里的事件用函数封装起来，先执行一次函数，再在计时器里调用
function clock() {
//创建时间对象，获取当前电脑的时间
let dataObj = new Date();
//获取对象里的当前时间
let h = dataObj.getHours();
let m = dataObj.getMinutes();
let s = dataObj.getSeconds();
//套用公式，设置指针的旋转角度
hourDiv.style.transform = `rotate(${h * 30 + (m / 60) * 30}deg)`; //rotate是旋转的css，deg是单位
minutesDiv.style.transform = `rotate(${m * 6 + (s / 60) * 6}deg)`;
secondsDiv.style.transform = `rotate(${s * 6}deg)`;
}
clock();
setInterval(clock, 1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>购物车全选功能</title>
<!-- 引入初始化 -->
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
body {
background: #fff;
color: #666;
font-size: 14px;
}
input {
outline: none;
}
.clearfix::before,
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<!-- 引入购物车样式 -->
<style>
table {
width: 800px;
margin: 0 auto;
border-collapse: collapse;
}
th {
font: normal 14px/50px "宋体";
color: #666;
}
th,
td {
border: none;
text-align: center;
border-bottom: 1px dashed #ccc;
}
input[type="checkbox"] {
width: 13px;
height: 13px;
}
tbody p {
position: relative;
bottom: 10px;
}
tbody .add,
tbody .reduce {
float: left;
width: 22px;
height: 22px;
border: 1px solid #ccc;
text-align: center;
background: none;
outline: none;
cursor: pointer;
}
tbody input[type="text"] {
width: 50px;
float: left;
height: 18px;
text-align: center;
}
tbody .count-c {
width: 98px;
margin: 0 auto;
}
button[disabled] {
color: #ddd;
cursor: not-allowed;
}
tbody tr:hover {
background: #eee;
}
tbody tr.active {
background: rgba(241, 209, 149, 0.945);
}
.controls {
width: 790px;
margin: 10px auto;
border: 1px solid #ccc;
line-height: 50px;
padding-left: 10px;
position: relative;
}
.controls .del-all,
.controls .clear {
float: left;
margin-right: 50px;
}
.controls p {
float: right;
margin-right: 100px;
}
.controls span {
color: red;
}
.controls .pay {
position: absolute;
right: 0;
width: 80px;
height: 54px;
background: red;
font: bold 20px/54px "宋体";
color: #fff;
text-align: center;
bottom: -1px;
}
.controls .total-price {
font-weight: bold;
}
</style>
</head>
<body>
<div class="car">
<table>
<thead>
<tr>
<th><input type="checkbox" id="all" />全选</th>
<th>商品</th>
<th>单价</th>
<th>商品数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="carBody">
<!-- <tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">35￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">70￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr> -->
</tbody>
</table>
<div class="controls clearfix">
<a href="javascript:" class="del-all">删除所选商品</a>
<a href="javascript:" class="clear">清理购物车</a>
<a href="javascript:" class="pay">去结算</a>
<p>
已经选中<span id="totalCount">0</span>件商品;总价：<span
id="totalPrice"
class="total-price"
>0￥</span
>
</p>
</div>
</div>
<script>
//需求1：将数据放入表格里
// 准备数据，对应的是标签里的tbody，有几个tr就有几条数据
let arr = [
{
name: "牛奶",
imgSrc: "./images/milk.jpg",
price: 35, // 单价
count: 1, // 数量
total: 35, // 小计
},
{
name: "牛奶",
imgSrc: "./images/milk.jpg",
price: 35, // 单价
count: 1, // 数量
total: 35, // 小计
},
{
name: "牛奶",
imgSrc: "./images/milk.jpg",
price: 35, // 单价
count: 1, // 数量
total: 35, // 小计
},
];
//获取tbody标签
let tbody = document.querySelector("#carBody");
//封装函数，实现遍历数据、添加标签、覆盖标签内容、重铺页面
function load() {
//遍历数组arr
for (let i = 0; i < arr.length; i++) {
//取出数组里的每个对象，填充标签内容
let obj = arr[i];
//每一条数据就创建一个tr标签
let myTr = document.createElement("tr");
//将每个tr标签的内容放到标签里，并且用arr对应的数据替换原来的死数据 注意！为了后续功能的实现，要区分每个tr，通过循环动态的给每个按钮加上自己的id，id即为当前索引 //在这里用表达式来动态让-号按钮的禁用功能生效或消失(count大于1)
myTr.innerHTML = `<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="${obj.imgSrc}" />
<p>${obj.name}</p>
</td>
<td class="price">${obj.price}￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" id="${i}" ${
obj.count === 1 ? "disabled" : ""
}>-</button>
<input type="text" value="${obj.count}" />
<button class="add" id="${i}">+</button>
</div>
</td>
<td class="total">${obj.total}￥</td>
<td>
<a href="javascript:" class="del" id="${i}">删除</a>
</td>`;
//将tr标签放入tbody
tbody.appendChild(myTr);
}
getSum(); //将总价总数量的计算放在load函数里，因为每次点击+、-、删除按钮都会影响总数量和总价，所以在修改每一个tr的内容后进行总数和总价的计算，并显示到页面上
}
load(); //网页打开时先执行一次
//需求二：点击+号完成商品数量的添加
//由于tr和内部标签都是动态创建的，所以将事件委托给tbody
//tbody绑定点击事件
tbody.addEventListener("click", function (e) {
//不论点击tbody里的什么元素，都会向tbody冒泡，都会导致tbody触发，但是只想监测+号添加商品的效果
if (e.target.nodeName === "BUTTON" && e.target.className === "add") {
//判断事件的节点名称（标签名）是什么，注意！节点名称大写
//点击+号以后，该商品的-号的禁用要取消=》通过+号的标签找到与之对应的-号标签（由于下面重新铺设页面后，-号按钮的禁用取消就不管用了，所以在load函数里用表达式来动态修改-号按钮的disabled值）
//这里的-号标签是+号标签的上上个兄弟
e.target.previousElementSibling.previousElementSibling.disabled = false; //previousElementSibling：获取上一个兄弟元素节点；（只包含元素节点） 区别=》previousSibling：获取元素的上一个兄弟节点；（既包含元素节点、文本节点、注释节点）
//点击+号时，数组对象中的count要相应的+1
let obj = arr[e.target.id]; //用obj将id换出来 //生成标签时给标签添加id，令id=索引值
obj.count++; //修改数量
obj.total = obj.price * obj.count; //修改总价
//隐藏知识：对象是引用类型，在这里修改会影响原数组里对象的属性的值
//清空页面内容
tbody.innerHTML = "";
//用新数据铺设页面
load();
} else if (
e.target.nodeName === "BUTTON" &&
e.target.className === "reduce"
) {
//-号按钮的功能实现
//点击-号时，数组对象中的count要相应的-1
let obj = arr[e.target.id]; //用obj将id换出来
obj.count--; //修改数量
obj.total = obj.price * obj.count; //修改总价
//清空页面内容
tbody.innerHTML = "";
//用新数据铺设页面
load();
} else if (e.target.nodeName === "A" && e.target.className === "del") {
//删除按钮的功能实现
arr.splice(e.target.id, 1); //删除标签身上id保存的索引，删除数据里的对应元素
//清空页面内容
tbody.innerHTML = "";
//用新数据铺设页面
load();
}
});
//累计总数量和总价格的方法，并在页面中显示
function getSum() {
let allCount = 0;
let allPrice = 0;
for (let i = 0; i < arr.length; i++) {
let obj = arr[i];
allCount += obj.count;
allPrice += obj.total;
}
//标签显示数据内容
//获取标签
let totalCount = document.querySelector("#totalCount");
totalCount.innerHTML = allCount;
let totalPrice = document.querySelector("#totalPrice");
totalPrice.innerHTML = allPrice + "¥";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>手风琴</title>
<style>
ul {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
div {
width: 1200px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
transition: all 500ms;
}
div ul {
width: 1200px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a href="#">
<img src="./images/1.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="./images/2.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="./images/3.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="./images/4.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="./images/5.jpg" alt="" />
</a>
</li>
</ul>
</div>
</body>
<script>
//核心思想：li容器的宽度如何变化？图片本身是1200，但是容器宽度不够，只能显示一部分图片
//获取li标签
let theLi = document.querySelectorAll("#box li");
//用循环给每个li标签都有鼠标移入事件
for (let i = 0; i < theLi.length; i++) {
//li标签的鼠标移入事件
theLi[i].addEventListener("mouseenter", function () {
//排他思想：将所有图片宽度设为100px
for (let j = 0; j < theLi.length; j++) {
theLi[j].style.width = 100 + "px";
}
//将当前鼠标指向的图片宽度设为800px（800px=1200px-4*100px），this=theLi[i]
this.style.width = 800 + "px";
});
//鼠标移开图片时，所有图片恢复240px
theLi[i].addEventListener("mouseleave", function () {
for (let j = 0; j < theLi.length; j++) {
theLi[j].style.width = 240 + "px";
}
});
}
</script>
</html>
//login.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="./css19/common.css">
<link rel="stylesheet" href="./css19/login.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>
<body>
<!-- 登录头部 -->
<div class="xtx-login-header">
<h1 class="logo"></h1>
<a class="home" href="./index.html">进入网站首页</a>
</div>
<!-- 登录内容 -->
<div class="xtx-login-main">
<div class="wrapper">
<form action="">
<div class="box">
<div class="tab-nav">
<a href="javascript:;" class="active">账户登录</a>
<a href="javascript:;">二维码登录</a>
</div>
<div class="tab-pane">
<div class="link">
<a href="javascript:;">手机验证码登录</a>
</div>
<div class="input">
<span class="iconfont icon-zhanghao"></span>
<input required type="text" placeholder="请输入用户名称/手机号码" name="username">
</div>
<div class="input">
<span class="iconfont icon-suo"></span>
<input required type="password" placeholder="请输入密码" name="password">
</div>
<div class="agree">
<label for="my-checkbox">
<input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
<span class="iconfont icon-xuanze"></span>
</label>
我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
</div>
<div class="button clearfix">
<button type="submit" class="dl">登 录</button>
<!-- <a class="dl" href="./center.html">登 录</a> -->
<a class="fl" href="./forget.html">忘记密码？</a>
<a class="fr" href="./register.html">免费注册</a>
</div>
</div>
<div class="tab-pane" style="display: none;">
<img class="code" src="../images/code.png" alt="">
</div>
</div>
</form>
</div>
</div>
<!-- 登录底部 -->
<div class="xtx-login-footer">
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
<script>
//记住用户名和密码
//获取相关标签
let nameInput = document.querySelector('input[name=username]');
let passInput = document.querySelector('input[name=password]');
let agreeCheckBox = document.querySelector('.remenber');
let theForm = document.querySelector('.wrapper form');
//form标签提交事件
theForm.addEventListener('sumbit', function(e){
//组织form自己默认提交的行为
e.preventDefault();
//判断用户名框、密码框是否有值、是否勾选协议
if (agreeCheckBox.checked === false || nameInput.value.trim().length === 0 || passInput.value.trim().length === 0) { //两个input标签中有required属性，不填写时就会自动弹出提示信息，为了谨慎这里还是写一个判断
alert('请填写必填选项')
return ; //组织代码向下走，输入框为空，不能下去创建对象入本地
}
//账号和密码保存本地
let obj = {
userName: nameInput.value,
passWord: passInput.value //以后这里需要对密码加密
}
//由于本地存储只能存字符串，所以先将用户信息转换成json字符串
let jsonStr = JSON.stringify(obj);
//信息存储本地
localStorage.setItem('user', jsonStr);
//跳转页面
location.href = './19-记住用户名和密码-index.html';
})
//判断本地是否有值，如果有，说明之前登录过
let jStr = localStorage.getItem('user'); //user是存储时写的名称
let userObj = JSON.parse(jStr); //将json字符串转换为具体值
//判断本地是否有存储，如果没有存储，什么也不用做，如果有存储，将值显示到页面上
if (userObj !== null) {
nameInput.value = userObj.userName;
passInput.value = userObj.passWord;
agreeCheckBox.checked = true;
}
</script>
</body>
</html>//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="renderer" content="webkit" />
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/index.css" />
<link
rel="stylesheet"
href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css"
/>
<script>
// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent;
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = "http://m.itcast.cn";
}
})();
</script>
</head>
<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
<div class="wrapper">
<!-- 顶部导航 -->
<ul class="xtx_navs">
<li>
<a href="./login.html">请先登录</a>
</li>
<li>
<a href="./register.html">免费注册</a>
</li>
<li>
<a href="./center-order.html">我的订单</a>
</li>
<li>
<a href="./center.html">会员中心</a>
</li>
<li>
<a href="javascript:;">帮助中心</a>
</li>
<li>
<a href="javascript:;">在线客服</a>
</li>
<li>
<a href="javascript:;">
<i class="mobile sprites"></i>
手机版
</a>
</li>
</ul>
</div>
</div>
<!-- 头部 -->
<div class="xtx_header">
<div class="wrapper">
<!-- 网站Logo -->
<h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
<!-- 主导航 -->
<div class="xtx_navs">
<ul class="clearfix">
<li>
<a href="./index.html">首页</a>
</li>
<li>
<a href="./category01.html">生鲜</a>
</li>
<li>
<a href="./category01.html">美食</a>
</li>
<li>
<a href="./category01.html">餐厨</a>
</li>
<li>
<a href="./category01.html">电器</a>
</li>
<li>
<a href="./category01.html">居家</a>
</li>
<li>
<a href="./category01.html">洗护</a>
</li>
<li>
<a href="./category01.html">孕婴</a>
</li>
<li>
<a href="./category01.html">服装</a>
</li>
</ul>
</div>
<!-- 站内搜索 -->
<div class="xtx_search clearfix">
<!-- 购物车 -->
<a href="./cart-none.html" class="xtx_search_cart sprites">
<i>2</i>
</a>
<!-- 搜索框 -->
<div class="xtx_search_wrapper">
<input
type="text"
placeholder="搜一搜"
onclick="location.href='./search.html'"
/>
</div>
</div>
</div>
</div>
<!-- 分类及焦点图 -->
<div class="xtx_entry">
<div class="wrapper">
<!-- 分类 -->
<div class="xtx_category">
<!-- 顶级分类 -->
<ul class="xtx_category_super">
<li>
<a href="javascript:;">
生鲜
<small>水果</small>
<small>蔬菜</small>
</a>
<i class="sprites"></i>
</li>
<li class="active">
<a href="javascript:;">
美食
<small>面点</small>
<small>干果</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
电器
<small>数码产品</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
居家
<small>床品</small>
<small>四件套</small>
<small>被枕</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
洗护
<small>洗发洗护</small>
<small>美妆</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
孕婴
<small>奶粉</small>
<small>玩具</small>
<small>辅食</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
餐橱
<small>数码产品</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
服饰
<small>女装</small>
<small>男装</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
杂货
<small>户外</small>
<small>图书</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
品牌
<small>品牌制造</small>
</a>
<i class="sprites"></i>
</li>
</ul>
<!-- 子分类 -->
<div class="xtx_category_subset"></div>
</div>
<!-- 焦点图 -->
<div class="xtx_banner">
<ul>
<li>
<a href="javascript:;">
<img src="./uploads/banner_1.png" alt="" />
</a>
</li>
</ul>
<!-- 切换按钮 -->
<a href="javascript:;" class="prev sprites"></a>
<a href="javascript:;" class="next sprites"></a>
<!-- 指示器 -->
<div class="indicator">
<span></span>
<span></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<!-- 新鲜好物 -->
<div class="xtx_goods_new xtx_panel">
<div class="wrapper">
<!-- 面板头部 -->
<div class="xtx_panel_header">
<h3>新鲜好物<small>新鲜出炉 品质靠谱</small></h3>
<a href="./index-new.html" class="more">
查看全部<i class="sprites"></i>
</a>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/new_goods_1.jpg" alt="" />
<span class="name">睿米无线吸尘器F8</span>
<span class="price"><small>￥</small>899</span>
</a>
<a href="javascript:;">
<img src="./uploads/new_goods_2.jpg" alt="" />
<span class="name">智能环绕3D空调</span>
<span class="price"><small>￥</small>1299</span>
</a>
<a href="javascript:;">
<img src="./uploads/new_goods_3.jpg" alt="" />
<span class="name">广东软软糯米煲仔饭</span>
<span class="price"><small>￥</small>129</span>
</a>
<a href="javascript:;">
<img src="./uploads/new_goods_4.jpg" alt="" />
<span class="name">罗西机械智能手表</span>
<span class="price"><small>￥</small>3399</span>
</a>
</div>
</div>
</div>
<!-- 人气推荐 -->
<div class="xtx_goods_popular xtx_panel">
<div class="wrapper">
<!-- 面板头部 -->
<div class="xtx_panel_header">
<h3>人气推荐<small>人气爆款 不容错过</small></h3>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/popular_1.jpg" />
<span class="title">特惠推荐</span>
<span class="alt">我猜得到 你的需要</span>
</a>
<a href="./index-hot.html">
<img src="./uploads/popular_2.jpg" />
<span class="title">爆款推荐</span>
<span class="alt">人气好物推荐</span>
</a>
<a href="./index-one.html">
<img src="./uploads/popular_3.jpg" />
<span class="title">场景使用一站买全</span>
<span class="alt">编辑精心整理推荐</span>
</a>
<a href="javascript:;">
<img src="./uploads/popular_4.jpg" />
<span class="title">领券中心</span>
<span class="alt">发现更多超值优惠券</span>
</a>
</div>
</div>
</div>
<!-- 热门品牌 -->
<div class="xtx_goods_brand xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>热门品牌<small>国际经典 品质保证</small></h3>
<div class="page-bar">
<a href="javascript:;" class="prev sprites"></a>
<a href="javascript:;" class="next sprites active"></a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_goods">
<ul>
<li>
<a href="./index-brand.html">
<img src="./uploads/brand_goods_1.jpg" alt="" />
</a>
<a href="./brand-list.html">
<img src="./uploads/brand_goods_2.jpg" alt="" />
</a>
<a href="javascript:;">
<img src="./uploads/brand_goods_3.jpg" alt="" />
</a>
<a href="javascript:;">
<img src="./uploads/brand_goods_4.jpg" alt="" />
</a>
<a href="javascript:;">
<img src="./uploads/brand_goods_5.jpg" alt="" />
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 分类商品 -->
<div class="xtx_goods_category xtx_panel">
<div class="wrapper">
<!-- 生鲜 -->
<div class="xtx_panel_header">
<h3>生鲜</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果</a>
<a href="javascript:;">蔬菜</a>
<a href="javascript:;">肉禽蛋</a>
<a href="javascript:;">裤装</a>
<a href="javascript:;">衬衫</a>
<a href="javascript:;">内衣</a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/fresh_goods_cover.jpg" alt="" />
</a>
<div class="label">
<span>生鲜馆</span>
<span>全场3件8折</span>
</div>
</li>
<li>
<!-- 商品图片 -->
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_1.jpg" alt="" />
</div>
</a>
<!-- 商品信息 -->
<div class="meta">
<p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>59</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_2.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>
<p class="flag">火锅食材</p>
<p class="price"><small>￥</small>71.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_3.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
<p class="flag">海鲜水产</p>
<p class="price"><small>￥</small>49.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_4.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">
渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海
</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>899</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_5.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g</p>
<p class="flag"></p>
<p class="price"><small>￥</small>29</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_6.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">广西沃柑 柑橘1.5kg</p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>59</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_7.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">进口 牛油果 6个装 单果重约130-180g</p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>39.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_8.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">泰国进口山竹5A级 500g</p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>29.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
<!-- 服饰 -->
<div class="xtx_panel_header">
<h3>服饰</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">行李箱</a>
<a href="javascript:;">男士包袋</a>
<a href="javascript:;">女士包袋</a>
<a href="javascript:;">钱包及小提袋</a>
<a href="javascript:;">男鞋</a>
<a href="javascript:;">女鞋</a>
<a href="javascript:;">拖鞋</a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/clothes_goods_cover.jpg" alt="" />
</a>
<div class="label">
<span>服饰馆</span>
<span>3折狂欢</span>
</div>
</li>
<li>
<!-- 商品图片 -->
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_1.jpg" alt="" />
</div>
</a>
<!-- 商品信息 -->
<div class="meta">
<p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生</p>
<p class="flag"></p>
<p class="price"><small>￥</small>55</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_2.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">
迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带
</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>20.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_3.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
<p class="flag">海鲜水产</p>
<p class="price"><small>￥</small>209</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_4.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>
<p class="flag"></p>
<p class="price"><small>￥</small>274.5</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_5.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">拉夫劳伦t恤男正品</p>
<p class="flag">圆领短袖</p>
<p class="price"><small>￥</small>99</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_6.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">李宁跑步鞋男鞋空气 弧2018春季款</p>
<p class="flag"></p>
<p class="price"><small>￥</small>79</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_7.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮</p>
<p class="flag"></p>
<p class="price"><small>￥</small>179</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_8.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">北极绒春夏季纯棉背心 男士修身纯色打底</p>
<p class="flag"></p>
<p class="price"><small>￥</small>69</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
<!-- 餐厨 -->
<div class="xtx_panel_header">
<h3>餐厨</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果</a>
<a href="javascript:;">蔬菜</a>
<a href="javascript:;">肉禽蛋</a>
<a href="javascript:;">裤装</a>
<a href="javascript:;">衬衫</a>
<a href="javascript:;">内衣</a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/kitchen_goods_cover.jpg" alt="" />
</a>
<div class="label">
<span>餐厨馆</span>
<span>大额优惠<br />等你来拿</span>
</div>
</li>
<li>
<!-- 商品图片 -->
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_1.jpg" alt="" />
</div>
</a>
<!-- 商品信息 -->
<div class="meta">
<p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套</p>
<p class="flag"></p>
<p class="price"><small>￥</small>5.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_2.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装</p>
<p class="flag"></p>
<p class="price"><small>￥</small>20.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_3.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">
朴（TOPOTO）大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布
</p>
<p class="flag"></p>
<p class="price"><small>￥</small>129</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_4.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>
<p class="flag"></p>
<p class="price"><small>￥</small>274.5</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_5.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">金纺不伤手柔顺剂 妈妈的选择</p>
<p class="flag"></p>
<p class="price"><small>￥</small>29</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_6.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗</p>
<p class="flag"></p>
<p class="price"><small>￥</small>10.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_7.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布</p>
<p class="flag"></p>
<p class="price"><small>￥</small>159</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_8.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">斧头牌（AXE）去污地板 清洁剂2L 柠檬清香</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>22.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
<!-- 居家 -->
<div class="xtx_panel_header">
<h3>居家</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">咖啡具</a>
<a href="javascript:;">水具酒具</a>
<a href="javascript:;">锅具</a>
<a href="javascript:;">餐具</a>
<a href="javascript:;">功能厨具</a>
<a href="javascript:;">茶具</a>
<a href="javascript:;">清洁保鲜</a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/home_goods_cover.jpg" alt="" />
</a>
<div class="label">
<span>居家馆</span>
<span>全场满减</span>
</div>
</li>
<li>
<!-- 商品图片 -->
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_1.jpg" alt="" />
</div>
</a>
<!-- 商品信息 -->
<div class="meta">
<p class="name">菜鸟异常专用链接 非请 勿拍</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>8999</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_2.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">【中盐软水盐】汉斯希 尔家用软水机适配</p>
<p class="flag"></p>
<p class="price"><small>￥</small>65</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_3.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>129</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_4.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">ztk恒温调奶器配件玻璃壶 炖盅</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>129</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_5.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯</p>
<p class="flag"></p>
<p class="price"><small>￥</small>29</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_6.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动</p>
<p class="flag">料理机</p>
<p class="price"><small>￥</small>10.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_7.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛</p>
<p class="flag"></p>
<p class="price"><small>￥</small>159</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_8.jpg" alt="" />
</div>
</a>
<div class="meta">
<p class="name">美式双人实木床 红实木 显档次</p>
<p class="flag"></p>
<p class="price"><small>￥</small>22.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 最新主题 -->
<div class="xtx_goods_topic xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>最新专题</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
</div>
<div class="xtx_topic">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_1.jpg" alt="" />
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物</small>
</p>
<span class="price"><small>￥</small>29.9起</span>
</div>
</a>
<div class="social">
<span class="like"> <i class="sprites"></i>1220 </span>
<span class="view"> <i class="sprites"></i>1800 </span>
<span class="reply"> <i class="sprites"></i>1220 </span>
</div>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_2.jpg" alt="" />
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物</small>
</p>
<span class="price"><small>￥</small>29.9起</span>
</div>
</a>
<div class="social">
<span class="liked"> <i class="sprites"></i>1220 </span>
<span class="view"> <i class="sprites"></i>1800 </span>
<span class="reply"> <i class="sprites"></i>1220 </span>
</div>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_3.jpg" alt="" />
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物</small>
</p>
<span class="price"><small>￥</small>29.9起</span>
</div>
</a>
<div class="social">
<span class="like"> <i class="sprites"></i>1220 </span>
<span class="view"> <i class="sprites"></i>1800 </span>
<span class="reply"> <i class="sprites"></i>1220 </span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 公共底部 -->
<div class="xtx_footer clearfix">
<div class="wrapper">
<!-- 联系我们 -->
<div class="contact clearfix">
<dl>
<dt>客户服务</dt>
<dd class="chat">在线客服</dd>
<dd class="feedback">问题反馈</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd class="weixin">公众号</dd>
<dd class="weibo">微博</dd>
</dl>
<dl>
<dt>下载APP</dt>
<dd class="qrcode">
<img src="./uploads/qrcode.jpg" />
</dd>
<dd class="download">
<span>扫描二维码</span>
<span>立马下载APP</span>
<a href="javascript:;">下载页面</a>
</dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd class="hotline">
400-0000-000
<small>周一至周日 8:00-18:00</small>
</dd>
</dl>
</div>
</div>
<!-- 其它 -->
<div class="extra">
<div class="wrapper">
<!-- 口号 -->
<div class="slogan">
<a href="javascript:;" class="price">价格亲民</a>
<a href="javascript:;" class="express">物流快捷</a>
<a href="javascript:;" class="quality">品质新鲜</a>
</div>
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
</div>
</div>
<script>
let theLi = document.querySelector(".xtx_navs li:first-child");
//首页值的判断
let jStr = localStorage.getItem("user"); //user是存储时写的名称
let userObj = JSON.parse(jStr); //将json字符串转换为具体值
//判断本地是否有存储，如果没有存储，跳转登录页面登录，如果有存储，页面打招呼
if (userObj !== null) {
theLi.innerHTML = `<a href="javascript:;">你好 ${userObj.userName}</a>`;
} else {
theLi.innerHTML = `<a href="./19-记住用户名和密码-login.html">请登录</a>`;
}
</script>
</body>
</html>
2415
到【灌水乐园】发言
qq_36489355: 第四步出问题了 路径找不到src/main
CSDN-Ada助手: 恭喜你，获得了 2023 博客之星评选的入围资格，请看这个帖子 （https://bbs.csdn.net/topics/614962259?utmsource=blogger_star_comment）。 请在这里提供反馈： https://blogdev.blog.csdn.net/article/details/129986459?utmsource=blogger_star_comment。