一、❤ ❤前言
1.该项目页面使用css+html编写，各个功能模块使用jquery编写，数据大多用jquery的ajax发送请求json文件 ，所以最好安装有Wampserver，Wampserve是windows平台下的PHP集成开发工具包（W:Windows，A：apache server，M：MySQL，P:PHP），使用wampserve可以省去在window中搭建php的繁琐步骤，从而快速搭建环境，安装方式方法指路https://blog.csdn.net/yingshuangtu/article/details/119787388
2.食用方式
目录结构，从绿色框框这个elm.html打开整个项目啊！！！不是index.html!!!
按Fn+f12或者f12出现控制栏，点击图中手机按钮会调到移动端模式，
可以选择手机模式
我用的是这个
二、❤ ❤实现功能模块
前言
1.首页地址栏功能：
点击跳二级菜单，可以输入地址，点击确定输入的地址会插入带有收货地址栏的页面
功能模块代码
滑入滑出代码
// =================一级菜单============
// 头部点击滑动事件
$(".h_part1").click(function(){
$(".shouhuo").animate({"left":"0px"},400)
console.log("111111");
})
// 定位滑出
$(".dw_back").click(function(){
$(".shouhuo").animate({"left":"100%"},400)
})
//================== 二级菜单====================
// 头部点击滑动事件
$("#addBtn").click(function(){
$(".add").animate({"left":"0px"},400)
})
// 定位滑出
$(".add_back").click(function(){
$(".add").animate({"left":"100%"},400)
})
写入数据代码，输入不能为空
// 在中写入数据
// //前置追加
$(".queding").click(function(){
if($(".Aname").val()!='' && $(".Asex").val()!='' && $(".Atel").val()!='' && $(".Adizhi").val()!=''){
$("<div class='dz_detail'></div>").html('<span>'+$(".Aname").val()+'</span><span>'+$(".Asex").val()+'</span><span>'+$(".Atel").val()+'</span><p>'+$(".Adizhi").val()+'</p>').appendTo($("#dz_detail"));
$(".add").animate({"left":"100%"},400)
}else{
alert("输入不能为空")
}
})
2.搜索栏下拉框使用jquery组件–jQuery Autocomplete
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
非常推荐这个组件，直接引入插件以及html代码，
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
js代码（写数据）
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
就可以使用了，具体的使用指路：https://www.runoob.com/jquery/jquery-plugin-autocomplete.html
实现情况
3.iframe
iframe为页面嵌套常用的标签，使用起来非常的便捷，我在我的项目中使用了这个标签将所用html页面嵌套到了一个页面中
格式
<iframe name="my-iframe" id="my-iframe" src="初始显示的页面或者图片" frameborder="边框（一般为0）" width="宽" height="高" scrolling="是否滚动（一般为“no”）"></iframe>
我的嵌套代码
<iframe src="./index1.html" class="Module"></iframe>
<iframe src="./liebiao.html" class="Module"></iframe>
<iframe src="./dingdan.html" class="Module"></iframe>
<iframe src="./user.html" class="Module"></iframe>
这样点击到底部的item,相应的页面就被iframe使用嵌套方式显示在index页面中
$(".f-item").click(function(){
var index=$(this).index();
console.log(index);
$(".Module").eq(index).show().siblings(".Module").hide();
// $(this).attr("src","./img/ft1.png");
})
3.首页（index.html）数据加载
index.html页面使用jquery的ajax向index.json请求数据
var a=$.ajax({
type:"get",
url:"./js/index.json",
async:false,
success:function(response){
$.each(response.label,function(i,e){
$("<div class='list-item'></div>").html('<img src="'+e.src1+'" alt=""><p>'+e.p1+'</p> <img src="'+e.src2+'" alt=""><p>'+e.p2+'</p> ').appendTo($("#list"));
});
$.each(response.sp,function(i,e){
$("<div class='product' οnclick='go(this)' hashId="+e.hashId+"></div>").html(' <div class="pro_l"><img src="'+e.src1+'" alt=""></div><div class="pro_r"><span>品牌</span><span>'+e.title+'</span><div class="pj"><div class="xingxing"><img src="./img/xingxing.png" alt=""><img src="./img/xingxing.png" alt=""><img src="./img/xingxing.png" alt=""><img src="./img/xingxing.png" alt=""><img src="./img/xingxing.png" alt=""></div><span>'+e.pingjia+'</span><span>月售'+e.yueshou+'单</span></div><div class="juli"><div><span>￥15元起送</span><span>|</span><span>远距离配送￥1.5</span></div><div><a href="./liebiao.html">'+e.juli+'km</a><a href="./liebiao.html">|</a><a href="./liebiao.html">'+e.shijian+'分钟</a></div></div><p class="lx">'+e.leixing+'</p><p class="jian">'+e.biaoqian1+'</p><p class="pei">'+e.biaoqian2+'</p></div>').appendTo($("#product"));
});
$.each(response.Shaixuan,function(i,e){
$("<tr></tr>").html('<td>'+e.one+'</td><td>'+e.two+'</td><td>'+e.three+'</td>').appendTo("#shaixuan");
});
$.each(response.paixu,function(i,e){
$("<li></li>").html(e.text).appendTo(".paixu");
});
// $(".zuijin").click(function(){
// })
},
error:function(){
console.log("出错了！");
}
})
渲染出的数据的页面情况为
4.index.html页面跳转并传输数据
点击下面的店家列表，实现带数据页面跳转
function go(t){
window.location.href="跳转的页面.html?hashId="+$(t).attr("hashId");
}
跳转的页面.htm
接受页面跳转传过来的hashId对json文件查询
将查询到hashid相同的数组内的数据渲染到页面上
function getUrlParam(name,param){
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r=param.substr(1).match(reg);
if(r!=null) return unescape(r[2]);
return null;
}
// console.log(getUrlParam("id",window.location.search));
var hashId=getUrlParam("hashId",window.location.search);
$.ajax({
type:"get",
url:"./js/index.json",
success:function(response){
// console.log(response.sp);
$.each(response.sp,function(i,e){
if(e.hashId==hashId){
// console.log(123);
$("<div></div>").html(' <img src="'+e.src1+'" alt=""><p class="dianming">'+e.title+'</p><span>￥15元起送</span><span>|</span><span>￥3元配送</span><a href="">'+e.leixing+'</a>').appendTo($(".container"));
return null;
// console.log(e.title);
console.log(111);
console.log(".dianming");
}
});
},
error:function(){
console.log(999);
}
})
5.结算页面
如果为零还点击减号会弹出“不要再点击了”的提示
点击“去结算”按钮，页面使用a标签跳转，将总价account存在浏览器本地local Storge,页面刷新以后数据还在
local Storge永久保存，永不消失，除非手动删除，使用起来也非常的简单
跳转的页面.html 写入操作
// 数据库中写入 account 在订单页面获取
$("#account").click(function(){
localStorage.setItem("account", total);
dingdan.html 获取操作
<script>
$(function(){
$(".account").html( localStorage.getItem("account"));
})
</script>
就这两行代码就实现了页面传值
6.支付
zhfu.html 实现复选框单选功能，红色总价也为local Storge中account的值
//checkbox实现单选
$("input:checkbox").each(function(){
$(this).click(function(){
if($(this).prop('checked')){
$('input:checkbox').prop('checked',false);
$(this).prop('checked',true);
}
});
});
最后支付完成跳转已支付的结算页面
该页面为死页面
7.个人中心页面
当前为未登录界面，
点击蓝色头部进入登录界面
点击注册按钮进入注册页面
以上所有输入框设置输入不能为空两次密码输入一致，输入为空会弹出提示，使用的是正则校验
正则js代码
$(".register").click(function(){
// 手机号
var value2 = $(".tel").val();
var filter = /^1[3-9]\d{9}$/; //验证手机号码匹配的正则表达式
if(value2 == '') {
$(".shouji_error").text('手机号码不能为空').show();
} else if(!filter.test(value2)) {
$('.shouji_error').text('手机号码输入格式错误').show();
} else {
var flag1=1;
$('.shouji_error').hide();
}
// 密码
var value3 = $(".mima").val();
var filter=/^[a-zA-Z\d_]{8,}$/;
if(value3==''){
$(".mima_error").text('密码不能为空').show();
}else if(!filter.test(value3)) {
$(".mima_error").text('密码输入格式错误').show();
}else{
var flag2=1;
$('.mima_error').hide();
}
// 重复密码
var value4 = $(".remima").val();
if(value4==value3){
var flag3=1;
$('.remima_error').hide();
}else if(value4==''){
$(".remima_error").text('密码不能为空').show();
}
else{
$(".remima_error").text('两次输入不相等').show();
}
// 跳转
if(flag1 && flag2 && flag3){
console.log("success!!");
alert("恭喜您注册成功！");
// window.location.href="login.html";
localStorage.setItem("tel", value2);
localStorage.setItem("password", value3);
}
})
输入格式正确以后 会将输入手机号的值与浏览器中tel的值做对比，如果相等则证明已经注册过了，提示“已经注册过了”，否则证明没有注册过，此时，将各个input框中的输入内容写入浏览器的local Storge
注册成功以后，用注册的账号进行登录，输入不能为空，输入必须与刚刚注册成功的信息一样
输入为空会提示“输入错误晴重新输入！”
登录成功，
，登录成功后，在 local Storge里设置一个标签loginFlag标记登录状态（登录状态为true，未登录状态为false），当前登录成功loginFlag为true
登录成功点击左上角返回按钮，此时的用户页面user.html已经由刚开始的未登录状态变成了登录状态，浏览器刷新也为登录状态，代码重新运行也为登录状态
点击用户界面头部，进去的不再是登录注册界面，是个人中心页面，显示的是之前注册操作填写的信息，
点击小眼睛可以查看密码，主要的思路是，当loginFlag为true时，设置头部点击跳转的连接为个人中心页面，（ window.location.href="./userInfo.html";）为false时跳转的连接为登录界面（ window.location.href="./login.html";），点击小眼睛显示密码，主要思路是点击时将input密码框的属性设置为text类型，再点击时设置为password类型
点击退出登录按钮，清除浏览器中local Storge保存的用户信息并且设置loginFlag为false未登录状态
，user页面恢复未登录状态
js代码
$(function(){
var flag = localStorage.getItem("loginFlag");
var tel = localStorage.getItem("tel");
var pwd = localStorage.getItem("password");
if(flag=='true'){
$(".tel").html("用户："+tel);
$(".welcome").html("欢迎您！！！");
// 登录中的状态 点击头部进入个人中心页面
$(".user").click(function(){
window.location.href="./userInfo.html";
})
// 登录中状态 点击退出登录清除数据
$(".tuichu").click(function(){
if(confirm("是否退出登录？")){
localStorage.removeItem("tel");
localStorage.removeItem("password");
localStorage.setItem("loginFlag", false);
$(".tel").html("登录/注册");
$(".welcome").html("登录后享受更多权益");
}
})
}//没登录状态
else{
$(".tel").html("登录/注册");
$(".welcome").html("登录后享受更多权益");
// 未登录状态 点击头部进入登录注册界面
$(".user").click(function(){
window.location.href="./login.html";
})
// 没登录状态 点击提示没登录
$(".tuichu").click(function(){
alert("亲亲还没登录哦！");
})
}
});
密码查看的js代码
$(".chakan").click(function(){
if($(this).hasClass("see")){
// 看不见密码
$(this).removeClass("see");
$(".password").attr("type","password");
}else{
// 看见密码
$(this).addClass("see");
$(".password").attr("type","text");
}
})
8.商家列表页面
9.首页导航条
使用粘性定位，position: sticky;点击的时候导航栏定位到顶部并且出现下拉栏，筛选的下拉栏点击各个内容会变蓝，如下图所示
功能代码
// 点击综合排序
$(".tab div").eq(0).click(function(){
$(".shaixuan").hide();
$(".tab").css({"position":"fixed","left":"0rem","top":"5.2rem","border-bottom":"1px solid #eee"});
$(".h_part2").css("position","fixed");
$(".tab_cover").show();
$(".paixu").slideDown(1000);
})
// 点击筛选 总合排序消失
$(".tab div").eq(3).click(function(){
$(".paixu").hide();
$(".tab").css({"position":"fixed","left":"0rem","top":"5.2rem","border-bottom":"1px solid #eee"});
$(".h_part2").css("position","fixed");
$(".tab_cover").show();
$(".shaixuan").slideDown(500);
})
// 点击排序页面 弹出来的都消失
$(".paixu").click(function(){
$(".tab").css({"position":"sticky","left":"0rem","top":"5.2rem","border-bottom":"none"});
$(".h_part2").css("position","sticky");
$(".tab_cover").hide();
$(".paixu").hide();
$(".shaixuan").hide();
})
// 点击筛选中的按钮 才会弹出来的都消失
$(".shaixuan_submit").click(function(){
$(".tab").css({"position":"sticky","left":"0rem","top":"5.2rem","border-bottom":"none"});
$(".h_part2").css("position","sticky");
$(".tab_cover").hide();
$(".paixu").hide();
$(".shaixuan").hide();
})
// 点击tab文字变蓝
$(".tab div").click(function(){
$(this).css("color","#008eff").siblings().css("color","#000");
})
// 筛选中 点击文字背景变蓝
$("td").click(function(){
// $(this).css({"background":"#edf5ff","color":"#3190e8"});
if($(this).hasClass("tdColor")){
$(this).removeClass("tdColor");
}else{
$(this).addClass("tdColor");
}
})
// 点击清空 全部变回原样
$(".shaixuan_clear").click(function(){
$("td").each(function(i,e){
if($(this).hasClass("tdColor")){
$(this).removeClass("tdColor");
}
})
})
三、❤ ❤全部源码
源码在此：链接：https://pan.baidu.com/s/1UDcMpyRs5fE08mFL8suFxA
提取码：c32s
四、❤ ❤总结
最后唠叨一句，记得安装Wampserver，然后在他的目录www下运行elm.html !!!
不会的指个路[https://blog.csdn.net/yingshuangtu/article/details/119787388]
Wampserver是学jquery ajax必安装的哈
码字不易，喜欢就点个赞吧！！！❤ ❤❤ ❤❤ ❤
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
