一、引言
随着电子商务的发展，用户对在线购物平台的要求也越来越高。小米商城作为一个知名的电商平台，不仅提供丰富的产品选择，还通过先进的前端技术为用户提供流畅、便捷的购物体验。本文将探讨在小米商城项目中，如何利用JavaScript实现多种交互功能，以增强用户体验。
二、首页功能详解
1. 搜索栏模糊查询
在小米商城首页，用户可以通过搜索栏快速找到所需商品。当用户输入关键字时，系统会实时匹配并显示与关键字相关的建议结果。这项功能是通过DOM操作和数组遍历实现的，确保了即使用户输入不完全准确，也能获得相关产品推荐。
let keyword = document.querySelector('.keyword');//获取输入框let searchHelper = document.querySelector('.search-helper'); // 获取搜索的下拉列表//定义数组，存搜索的内容let searchArr =['小米手机', '小米手表', '小米电脑', '小米电视', '小米平板', '红米手机', '红米显示器', '红米笔记本'];keyword.oninput=function(){searchHelper.innerHTML='';//在遍历显示之前 要把旧的之前显示的都清除掉for(let i=0;i<searchArr.length;i++){if(searchArr[i].indexOf(keyword.value)!=-1){searchHelper.innerHTML +='<p>'+searchArr[i]+'</p>';searchHelper.style.display='block';}}}keyword.onblur=function(){ //鼠标失去交点之后就取消掉显示searchHelper.style.display='none';}
2. 搜索功能实现
当用户点击搜索按钮后，系统使用GET请求将关键词发送至小米官方商城的后端接口，并展示相应的搜索结果。这种即时反馈机制大大提升了用户的搜索效率。
let search = document.getElementById('search');search.onclick = function () {location.href="https://www.mi.com/shop/search?keyword="+keyword.value;}
3. 轮播图切换广告/海报
首页的轮播图每3秒自动切换一次广告，同时支持手动切换至上一张或下一张。鼠标悬停在图片上时，播放暂停，移开后继续播放。这一功能增强了页面的动态性和吸引力。
let box =document.querySelector('.banner-box');let prev = document.querySelector('.prev');let next = document.querySelector('.next');let imgArr =['https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3d1c941b152d5d41042f9c1e1b7509a.jpg?w=2452&h=920','https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/19f12ce5a1770c2a23188f1055258967.jpg?thumb=1&w=2452&h=920&f=webp&q=90','https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=2452&h=920&f=webp&q=90'];let i=0;//切换图片的函数function banner(){//设置图片路径box.style.backgroundImage="url('"+imgArr[i]+"')";}//自动切换的方法function autoBanner(){if(++i>imgArr.length-1){i=0;}banner();}//设置定时器，3秒调用自动切换函数let timer = setInterval(autoBanner,3000);//鼠标移入就停止定时器box.onmouseover = function(){clearInterval(timer);}//鼠标移开开始定时器box.onmouseout = function(){timer = setInterval(autoBanner,3000);}//下一张next.onclick=function(){if(++i>imgArr.length-1){i=0;}//设置图片路径banner();}//上一张prev.onclick=function(){if(--i<0){i=imgArr.length-1;}//设置图片路径banner();}
4. 秒杀倒计时功能
针对限时秒杀活动，页面展示了精确到秒的倒计时。基于设定的结束时间，系统计算剩余时间并更新页面上的显示，激发用户的购买欲望。
var hour=document.getElementById('hour');var minute=document.getElementById('minute');var second=document.getElementById('second');//停止时间var date = new Date('2022-12-5 00:00:00');//执行函数function fCountDown() {//现在的时间var now=new Date();//结束减去现在的时间var times = (date-now)/1000;//差的小时var h=parseInt(times/60/60%24);h=h<10?'0'+h:h;hour.innerHTML=h;//差的分钟var m=parseInt(times/60%60);m=m<10?'0'+m:m;minute.innerHTML=m;//差的小时var s=parseInt(times%60);s=s<10?'0'+s:s;second.innerHTML=s;}//上来先执行一次 如果只有定时器 1s后执行用户体验不好fCountDown();//设置定时器 没1000毫秒执行这个函数setInterval(fCountDown,1000);
5. 吸顶效果
顶部标签的搜索栏随页面滚动而固定，确保用户随时可以访问搜索功能。这不仅提高了易用性，也提升了网站的专业形象。
var nav=document.querySelector('.nav');//给页面绑定滚动监听事件window.onscroll=function(){//获取滚动条距上面的距离let top=document.documentElement.scrollTop || document.body.scrollTop;nav.style.position='fixed';//吸顶效果if(top>=400){nav.style.position='fixed';nav.style.top='0';nav.style.borderBottom='1px solid #333';nav.style.animation='searchTop .5s ease-in-out';}else{nav .style.position='relative';nav.style.borderBottom='0px solid #333';nav.style.animation='';}}
三、商品详情页面外观
放大镜功能
当用户将鼠标悬停在商品主图上时，会出现一个放大的视图，使用户能够查看更详细的图像信息。此功能增强了产品的可视化呈现，帮助用户做出更好的购买决策。
//获取小盒子var smallBox=document.getElementsByClassName('img-left')[0];//阴影var shadow=document.getElementsByClassName('shadow')[0];//大盒子var bigBox=document.getElementsByClassName('img-big')[0];//大图片var bigImg=document.getElementById('bigImg');//主盒子节点var main = document.getElementById('glass');//给小盒子加鼠标移入事件smallBox.onmouseover=function() {shadow.style.display='block';bigBox.style.display='block';}//鼠标移动改变阴影位置和大图片显示smallBox.onmousemove=function( e ) {//当前鼠标的位置-盒子距离浏览器左侧的偏移-阴影宽度的一半var x=e.clientX-main.offsetLeft-shadow.offsetWidth/2;var y=e.clientY-main.offsetTop-shadow.offsetHeight/2;//限制阴影的移动范围if(x<0){x=0;}else if(x>smallBox.offsetWidth-shadow.offsetWidth){x=smallBox.offsetWidth-shadow.offsetWidth;}if(y<0){y=0;}else if(y>smallBox.offsetHeight-shadow.offsetHeight){y=smallBox.offsetHeight-shadow.offsetHeight;}//赋值shadow.style.left=x+'px';shadow.style.top=y+'px';//大图片的位置bigImg.style.left = -x*2+'px';bigImg.style.top = -y*2+'px';}//鼠标移出 影藏大图片smallBox.onmouseout=function () {shadow.style.display='none';bigBox.style.display='none';}
四、购物车页面功能分析
购物车页面允许用户全选或单选商品，并根据所选项自动计算总数量和总价。此外，用户可以直接编辑商品数量，系统会即时更新小计金额。还提供了删除商品及确认购买等功能，极大地简化了购物流程。
//所有复选框var check=document.querySelectorAll('.check');var checkLen=check.length;//获取到单个复选框var single=document.querySelectorAll('.single');//获取每一行var itemBox = document.querySelectorAll('.goods');var itemBoxLen = itemBox.length;var buy=document.getElementById('buy');var remove=document.getElementById('remove');//全选 让每个选择框都选上for(var i=0;i<checkLen;i++){check[i].onclick=function (e) {//选择的记录数var count=0;if (e.target.getAttribute('id')=='all'){ //判断得到全选框//遍历每个元素 把全选的选择状态赋值给他们for(var j=0;j<single.length;j++){single[j].checked = this.checked; //监听全选然后循环遍历赋值给每个元素}}//遍历所有选择框是不是全选 如果不是全选框不选for(var k=0;k<single.length;k++){if( single[k].checked){count++;}if(count==single.length){check[0].checked=true;}else{check[0].checked=false;}}//每次改完就调用这个计算总数量和总价格fTotal();}}//给商品每行添加事件for(var i=0;i<itemBoxLen;i++){//点击事件itemBox[i].onclick = function (e) {var input = this.getElementsByTagName('input')[1];switch (e.target.className) {case "add":input.value=parseInt(input.value)+1;fTotalSum(this); //要把点击的这行传进去break;case 'reduce':input.value=parseInt(input.value)-1<=1 ? 1 : parseInt(input.value)-1;fTotalSum(this);break;case 'btn1':var con=confirm('确定要删除这件商品吗');if(con){this.parentNode.removeChild(this); //删除该节点 用父节点删除子节点}break;}//计算总数量和总价格fTotal();}//输入数量itemBox[i].onkeyup=function (e) {fTotalSum(this);fTotal();}}buy.onclick=function () {var con=confirm('确定要购买选择的这些商品吗');if(con){//获取每一行的商品var itemBox = document.querySelectorAll('.goods');var itemBoxLen = itemBox.length;for (var i=0;i<itemBoxLen;i++){if(itemBox[i].getElementsByTagName('input')[0].checked){itemBox[i].parentNode.removeChild(itemBox[i]);}}}}remove.onclick=function () {var con=confirm('确定要清除的这些商品吗');if(con){//获取每一行的商品var itemBox = document.querySelectorAll('.goods');var itemBoxLen = itemBox.length;for (var i=0;i<itemBoxLen;i++){if(itemBox[i].getElementsByTagName('input')[0].checked){itemBox[i].parentNode.removeChild(itemBox[i]);}}}}//计算小计function fTotalSum(That) { //That参数就是this表示商品的每一行//获取到当前行的数量var num=parseInt(That.getElementsByTagName('input')[1].value);//获取当前行的单价var price=parseInt(That.getElementsByClassName('singlePrice')[0].innerHTML);//算出结果赋值That.getElementsByClassName('singlePriceTotal')[0].innerHTML= num * price+"";}//总数量 和 合计function fTotal() {//获取总价节点var totalPrice=document.getElementById('totalPrice');//获取总件节点var totalNum=document.getElementById('totalNum');//数量总合var num=0;//总价var price=0;//获取每一行的商品var itemBox = document.querySelectorAll('.goods');var itemBoxLen = itemBox.length;for (var i=0;i<itemBoxLen;i++){if(itemBox[i].getElementsByTagName('input')[0].checked){num+=parseInt(itemBox[i].getElementsByTagName('input')[1].value);price+=parseInt(itemBox[i].getElementsByClassName('singlePriceTotal')[0].innerHTML);}}totalNum.innerHTML=num;totalPrice.innerHTML=price;}
五、注册表单校验
为了保证数据的有效性和安全性，注册表单中的每个输入框都经过严格的验证。通过正则表达式判断用户输入是否符合规范，如用户名格式、邮箱地址等，不符合要求的信息将被标记，指导用户进行修正。
六、结论
通过对小米商城项目的介绍，我们可以看到JavaScript在现代Web开发中的关键作用。它不仅仅用于实现基本的交互功能，更是提升用户体验、增加用户粘性的有效工具。从小米商城的具体案例中，我们学习到了如何巧妙地应用这些技术来创建更加友好、高效的用户界面。未来，随着技术的不断进步，我们有理由相信，更多的创新功能将会被引入到电子商务平台中，进一步改变我们的购物方式。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
