首页）"/>
分享工作实践（首页）
这是一个基本的HTML页面，其中包含一个搜索框、一个轮播图、一个商品分类按钮、商品列表、和一个底部导航栏。页面中引入了jQuery库和自定义的CSS和JS文件。其中，轮播图使用了JavaScript实现。底部导航栏包含了四个选项，分别对应首页、分类、购物车和我的页面。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><title>首页</title></head><script src="./js/jquery-3.7.0.js"></script><link rel="stylesheet" href="./css/home.css" /><body><div class="header"><input type="search" id="search_input" placeholder="Search" value="" onkeydown="searchBox(event)" /><!-- <img src="./img/Search.png" class="search_left"> --><!-- <img src="./img/213麦克风.png" class="search_right"> --><button onclick="search(event)" id="search_btn">搜索</button></div><div class="slider"><div class="slider-container"><img class="slide" src="img/10001.png"" alt="Image 1"><img class="slide" src="img/10002.png" alt="Image 2"><img class="slide" src="img/10003.png"" alt="Image 3"><img class="slide" src="img/10002.png" alt="Image 2"><img class="slide" src="img/10003.png"" alt="Image 3"></div><div class="indicators"><div class="indicator active"></div><div class="indicator"></div><div class="indicator"></div><div class="indicator"></div><div class="indicator"></div></div></div><div class="content"><!-- <div class="content_item"><div class="content_type"><img src="./img/10003.jpg" onerror="" /></div><p>商品分类</p></div> --></div><div class="classify"><img src="img/10010.png" /><p>商品列表</p></div><div class="goods_list"><!-- <div class="product" onclick="proCli()"><div class="img_goods"><img src="./img/10002.jpg" /></div><p>xxxxxxxx(商品介绍)</p><div class="text_goods"><p style="color: red;">16666$</p><p style="color: gray;">库存</p></div></div> --></div><!-- 首页 /分类 /购物车/我的--><div class="footer"><a><div class="bar"><img src="./img/10046.png" /><p style="color: red;">首页</p></div></a><a href="./classify.html"><div class="bar"><img src="img/10004.png" /><p>分类</p></div></a><a href="buy.html"><div class="bar"><img src="img/10008.png" /><p>购物车</p></div></a><a href="./my.html"><div class="bar"><img src="img/10006.png" /><p>我的</p></div></a></div><div id="hint">提示</div><script src="./js/home.js"></script></body></html>
这是一个购物车页面的CSS样式表。其中，包含了购物车顶部的样式、商品列表的样式、全选、删除、商品、合计、购买等按钮的样式、底部导航栏的样式以及一个提示框的样式。购物车内容的样式采用了flex布局，方便实现排版。同时，CSS中也使用了一些较为常用的样式属性，例如width、height、display、background-color、border等。
这是一个购物车页面的JavaScript代码。其中，使用了jQuery框架进行了AJAX请求，从指定的接口获取了相应的数据，并利用获取到的数据进行了页面的渲染，包括轮播图、商品分类、商品列表等。同时，代码还实现了搜索栏的功能，根据用户输入的关键字进行搜索，并跳转到搜索页面。另外，点击商品列表中的商品，可跳转到相应的商品详情页。
值得注意的是，在轮播图的实现中，使用了原生JS代码，并对其进行了一些修改，实现了自动轮播的功能。
最后，代码中还包括一个提示框的功能，用于提示用户一些信息，例如搜索关键字不存在、搜索信息不完整等。
$.ajax({type: 'post',url: url,success: function(res) {if (res.code == 1) {console.log(res);radersBanner(res.data.banner)contentTypes(res.data.types)classifyGoods(res.data.goods)} else {console.log("请求失败")// 请求失败的处理逻辑}},}); // 搜索栏 let search_input = document.getElementById('search_input'); let search_btn = document.getElementById('search_btn');function searchBox(event) {if (event.keyCode === 13) {search();;$('#hint').text("正在进入搜索页面")setTimeout(function() {$('hint').slideToggle(200);}, 1200);} }function search(event) {if (search_input.value === "") {$('#hint').text("缺少信息")$('#hint').slideToggle(200);setTimeout(function() {$('#hint').slideToggle(200);}, 1200);} else {$('#hint').text("正在进入搜索页面")$('#hint').slideToggle(200);setTimeout(function() {$('#hint').slideToggle(200);window.location.href = "search.html";}, 1200);}}// 轮播图 function radersBanner(data) {console.log(data);let str = '';for (let i = 0; i < 5; i++) {str += `<img src="${data[i].imgs}" alt=""><div class="indicator active"></div><div class="indicator"></div><div class="indicator"></div><div class="indicator"></div><div class="indicator"></div>`}$(".slider-container").html(str); } window.addEventListener('DOMContentLoaded', function() {let slider = document.querySelector('.slider');let sliderContainer = document.querySelector('.slider-container');let slides = Array.from(document.querySelectorAll('.slide'));let indicators = Array.from(document.querySelectorAll('.indicator'));let currentSlide = 0;function showSlide(index) {sliderContainer.style.transform = 'translateX(-' + ((index * 113.5) + 0) + '%)'; // 修改这一行indicators.forEach(function(indicator) {indicator.classList.remove('active');});indicators[index].classList.add('active');currentSlide = index;}function nextSlide() {currentSlide++;if (currentSlide >= slides.length) {currentSlide = 0;}showSlide(currentSlide);}function prevSlide() {currentSlide--;if (currentSlide < 0) {currentSlide = slides.length - 1;}showSlide(currentSlide);}indicators.forEach(function(indicator, index) {indicator.addEventListener('click', function() {showSlide(index);});});setInterval(nextSlide, 3000);}); //商品分类 function contentTypes(data) {console.log(data);let str = '';for (let i = 0; i < 8; i++) {str += `<div class="content_item"><div class="content_type"><img src="${data[i].imgs}" onerror="good(event)" /></div><p>${data[i].name}</p></div>`$(".content").html(str);} }function good(e) {e.target.src = "./img/10014 (1).jpg" } // 商品列表// 商品列表的内容function classifyGoods(data) {console.log(data);let str = '';for (let i = 0; i < 20; i++) {str += `<div class="product" onclick="proCli(${data[i].id})"><div class="img_goods"><img src="${data[i].imgs}" /></div><p>${data[i].name}</p><div class="text_goods"><p style="color: red;">￥${data[i].price}</p><p style="color: gray;">${data[i].stock}</p></div></div>`$(".goods_list").html(str);} }// 商品详情 let goods_List=document.getElementsByClassName('goods_list')[0] function proCli(id){console.log(id);window.location.href="goods.html"sessionStorage.setItem('id',id) }
更多推荐
分享工作实践（首页）
发布评论