分享工作实践（首页）

这是一个基本的HTML页面，其中包含一个搜索框、一个轮播图、一个商品分类按钮、商品列表、和一个底部导航栏。页面中引入了jQuery库和自定义的CSS和JS文件。其中，轮播图使用了JavaScript实现。底部导航栏包含了四个选项，分别对应首页、分类、购物车和我的页面。

	
		
		
		
	
	
	
	
		

			
			
			
			搜索
		

		

		    

		       
		        
		        
				
				
		    
		    

		        

		        

		        

				

				

		    
		

		

			
		
		

			
			
商品列表
		

		

			
		

		
		

			
				

					
					
首页
				
			
			
				

					
					
分类
				
			
			
				

					
					
购物车
				
			
			
				

					
					
我的
				
			
		

		
提示
		
	

 

 

这是一个购物车页面的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 += `
		

		

		

		

		

		`
		
	}
	$(".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 += `
		

			

				
			
			
${data[i].name}
		
		`
		$(".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 += `
		

			

				
			
			
${data[i].name}
			

				
￥${data[i].price}
				
${data[i].stock}
			
		
		`
		$(".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)
}