点餐界面

点餐界面运用到Bootstrap开发框架， json 数组的运用 ，css 的静态修饰，  js的交互界面

body 部分主要由div曾组成的界面 菜品由json数据保存
        <!--导航-->
        <nav class="navbar navbar-fixed-top navbar-default" style="background: white;">
            <div class="container-fluid" style="padding:0 5%">
                <div class="row" style="padding: 5% 0;">
                    <div class="col-xs-3 navicon" id="hotDish">
                        <div class="outsideCircle" id="1">
                            <span class="iconfont icon-heart icon"></span>
                        </div>
                        <div class="navtext">热销菜品</div>
                    </div>
                    <div class="col-xs-3 navicon" id="orderedDishes">
                        <div class="outsideCircle" id="2">
                            <span class="iconfont icon-list icon"></span>
                        </div>
                        <div class="navtext">点过的菜</div>
                    </div>
                    <div class="col-xs-3 navicon" id="recentActivity">
                        <div class="outsideCircle" id="3">
                            <span class="iconfont icon-bugle2 icon"></span>
                        </div>
                        <div class="navtext">近期活动</div>
                    </div>
                    <div class="col-xs-3 navicon">
                        <div class="outsideCircle" id="4">
                            <span class="iconfont icon-bell icon"></span>
                        </div>
                        <div class="navtext">服务铃</div>
                    </div>
                </div>
            </div>
        </nav>
        <!--侧面导航按钮-->
        <div class="sideNav btn-primary" data-toggle="modal" data-target="#myModal">
            <div class="sideNavCircle">
                <div class="sideNavText" style="float: left;">
                    <
                </div>
                <div class="sideNavText1" style="float: left;writing-mode:tb-rl">菜品分类</div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <!--侧面导航-->
        <div class="modal fade modal1" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog sideMenuDialog" role="document">
                <div class="modal-content sideMenucontent">
                    <div class="modal-body menuCount"></div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <!--菜单-->
        <div class="container menu">
            <div id='menutitle1' class='anmao'></div>
            <div id="menu"></div>
        </div>
        <!--购物车-->
        <div class="iconfont icon-cart bottomIcon cart" data-toggle="modal" data-target="#myt">
            <div class="cartSuperscript"></div>
        </div>
        <!--购物车的模态框-->
        <div class="modal fade cartModal " id="myt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog cartDialog" role="document">
                <div class="modal-content cartModalContent">
                    <div class="modal-header cartHeader" style="background:#d2d2d2;">
                        <span>已选菜品</span>
                        <span class="pull-right clearCart">清空全部</span>
                    </div>
                    <div class="modal-body" id="cartBody">
                        
                    </div>
                </div>
                <!--<div style="clear: both;"></div>-->
            </div>
        </div>
        <!--结账-->
        <div class="iconfont icon-RMB bottomIcon"></div>
        <script src="js/order.js" type="text/javascript" charset="utf-8"></script>

  css部分的修饰

*{
    margin: 0;
    padding: 0;
}
/*导航样式*/
.outsideCircle{
    display: inline-block;
    border: 2px solid #f70;
    border-radius:50% ;
}
.icon{
    color: white;
    display: inline-block;
    text-align: center;
    background: #f70;
    border-radius: 50%;
    padding-top: 5%;
    }
.navicon{
    padding: 2%;
}
nav .col-xs-3{
    text-align: center;
}
.navtext{
    padding: 5px;
}
/*侧面导航图标样式*/
.sideNav{
    border: 2px solid red;
    position: fixed;
    z-index: 1260;
    border-radius:50% ;
    background: white;
}
.sideNavCircle{
    background-color: red;
    border-radius:50%;
}
.sideNavText{
    display: inline-block;
    color: white;
}
/*导航菜单样式*/
.sideMenuDialog{
    float: right;
    width: 35%;
}
.sideMenucontent{
    right: 0;
    opacity: 0.9;
}
.sideMenuText{
    text-align: center;
    padding: 25px;
    border-bottom: 1px solid #d2d2d2;
}
.anchor{
    text-decoration: none;
    color: #313131;
}
/*菜单样式*/
.menuicon{
    color: red;
    padding: 2px;
}
.menutitle{
    padding-left:0px;
    margin-top: 10px;
}
.menupicture{
    padding: 0px;
    margin: 0px;
    padding-bottom: 5px;
}
.menutext{
    padding: 1px;
    padding-bottom: 5px;
}
/*购物车*/
.bottomIcon{
    display: inline-block;
    position: fixed;
    background: black;
    color: white;
    border-radius:50%;
    text-align: center;
    opacity: 0.85;
}
/*购物车上标*/
.cartSuperscript{
    border-radius:50% ;
    position: relative;
    padding: 3.5px;
}
/*购物车模态框样式*/
.cartDialog{
    width: 100%;    
    position: absolute;
    bottom: 0;
    z-index: 1000;    
}
.cartPrice{
    display: inline-block;
    padding-left: 20%;
}
.cartIcon1{
    color: red;
    padding-right:15px;
}
.cartCount{
    padding-right:15px;
}
.cartIcon2{
    color: red;
}
.cartMenu{
    margin: 2%;
    padding: 10px;
    border-bottom: 1px solid #7d7d7d;
}
.cartModalContent>.modal-body{
    max-height:330px;
    overflow-y:auto;
}
/*价格合计样式*/
.JiageHeji{
    float:left;
    padding-left: 15px;
    background:black;
    width: 80%;
}
.sureMenu{
    float:left;
    padding-right: 15px;
    background:red;
    width:20%;
}
 

js部分

function change(id) {
    $(".outsideCircle").each(function() {
        if ($(this).attr("id") == id) {
            $(this).css("border-color", "#f00");
            $(this).children().css("background", "#f00");
        } else {
            $(this).css("border-color", "#f70");
            $(this).children().css("background", "#f70");
        }
    });
}
    var t = 0,
        s = 0;
//购物车添加内容、上角标等功能
function changeCart(){
        $(".addMenu").click(function() {
            $(".cartSuperscript").empty();
            t++;
            $("<span>" + t + "</span>").appendTo(".cartSuperscript");
            $(".cartSuperscript").css("background-color", "red");
            $("<div  class='cartMenu'>"
                +"<span class='cartName'>" + $($($(this).prev())).prev()[0].innerText + "</span>"
                +"<span class='cartPrice' aria-hidden='true'>当前价 <span class='fa fa-jpy'>"
                +"</span>" + $($(this).prev())[0].innerHTML + "</span>"
                +"<span class='pull-right'><span class='fa fa-minus-circle cartIcon1' aria-hidden='true' ></span>"
                +"<span class='cartCount'>1</span><span class='fa fa-plus-circle cartIcon2 addMenu' aria-hidden='true'></span></span>"
            +"</div>").appendTo("#cartBody");
            s = s + ($($(this).prev())[0].innerHTML - 0);
            $(".heji").empty();
            $("<div class='heji'>合计：<span class='fa fa-jpy'></span>"
                +"<span class='hejiPrice'>" + s + "</span>"
                +"<span class='pull-right sureMenu'>确认订单 </span>"
            +"</div>").appendTo("#cartBody");
        })
}
var maodianid=[];
$.get('data/caipin.json',
    /*获得json数据*/
    function(data) {
        //热销菜品
        $("#hotDish").click(function() {
            $("#menu").empty();
            change($(this).children()[0].id);
            $.each(data, function(index, value) {
                $(  "<div class='munurow' id='menurow" + index + "'>"                
                    +"<div class='col-xs-12 menutitle' style='margin-left:-10px'>"
                    +"<div class='maodian-hidden' id='menutitle"+(index+2)+"'></div>"
                    +"<i class='fa fa-gratipay menuicon'  aria-hidden='true'></i>"
                    +"<span>" + value.type + "</span></div>"
                +"</div>").appendTo("#menu");
                $.each(value.caipin, function(index1, value1) {
                    $("<div class='col-xs-4 menutext'>"
                        +"<a href='details.html'><img class='menupicture col-xs-12' src='" + value1.img + "'/></a>"
                        +"<span>" + value1.name + "&nbsp;</span>"
                        +"<span class='fa fa-jpy menuicon1 priceFont' aria-hidden='true'>" + value1.price + "</span>"
                        +"<span class='fa fa-plus-circle menuicon pull-right addMenu' style='display:inline-block;' aria-hidden='true'></span>"
                    +"</div>").appendTo("#menurow" + index);
                })
            });
            $(".menutext").css("padding", $(".row").width() * 0.01 + "px");
            changeCart();
        });
        $("#hotDish").trigger("click");
        //近期活动
        $("#recentActivity").click(function() {
                $("#menu").empty();
                change($(this).children()[0].id);
                $.each(data, function(index, value) {
                    $("<div>" + value.type + "</div>").appendTo("#menu");
                });
            })
        //侧面菜单
        $(".menuCount").empty();
        $.each(data, function(i, o) {
            $("<a href='#menutitle" + (i + 1) + "' class='anchor' id='#menutitle" + (i + 1) + "'>"
                +"<div class='sideMenuText'>" + o.type + "</div>"
             +"</a>").appendTo(".menuCount");
        })
        $(".menutext").css("padding", $(".row").width() * 0.01 + "px");
        $(".anchor").click(function () {
            $("#myModal").modal("hide");
        })
    })
$.get("data/dianguodecai.json",function (data) {
    //点过的菜
    $("#orderedDishes").click(function() {
        $("#menu").empty();
        change($(this).children()[0].id);
        $.each(data, function(index, value) {
            $("<div class='col-xs-4' style='padding:5px;'>" 
                +"<a href='details.html'><img class='menupicture col-xs-12' src='" + value.img + "'/></a>"
                +"<span>" + value.name + "&nbsp;</span>"
                +"<span class='fa fa-jpy menuicon1 priceFont' aria-hidden='true'>" + value.price + "</span>"
                +"<span class='fa fa-plus-circle menuicon pull-right addMenu' style='display:inline-block;' aria-hidden='true'></span>"
            + "</div>").appendTo("#menu");
        });
        changeCart();
    })
    
})
    $('#myModal').on('show.bs.modal', function(e) {
        $(".sideNav").attr("hidden", "hidden");
        $(".navbar").css("z-index","1");
    });
    $('#myModal').on('hidden.bs.modal', function(e) {
        $(".navbar").css("z-index","1070");
        $(".sideNav").removeAttr("hidden", "hidden");
    })
window.onload = window.onresize = function() {
    /*导航样式*/
    $(".navicon").height($(".navicon").width());
    $(".outsideCircle").css( {
        "width":$(".navicon").width() * 0.85 + "px",
        "height":$(".navicon").width() * 0.85 + "px"
    });
    $(".icon").each(function() {
        this.style.width = this.style.height = $(".outsideCircle").width() * 0.75 + "px";
        this.style.fontSize = $(".outsideCircle").width() * 0.45 + "px";
        this.style.margin = ($(".outsideCircle").width() - $(".icon").width()) / 2 + "px";
    });
    $(".navtext").css("font-size",$(".icon").width() / 4 + "px")
    /*菜单样式*/
    $(".anmao").css({
        "height":$("nav").height() * 1.04 + "px"
    })
    $(".menu").css("fontSize",$(".icon").width() / 4 + "px")
    $(".menutext").css("padding",$(".row").width() * 0.01 + "px")
    $(".priceFont").css("font-size",$(".icon").width() / 5 + "px")
    /*购物车和买单样式*/
    $(".bottomIcon").css({
        "fontSize":$(".icon").width() * 0.7 + "px",
        "padding-top":$(".icon").width() / 10 + "px",
        "width" :$(".icon").width() * 1.1 + "px",
        "height":$(".icon").width() * 1.1 + "px",
        "bottom": $(".row").width() / 10 + "px"
    })
    $(".icon-cart").css("left",$(".row").width() / 35 + "px")
    $(".icon-RMB").css("right",$(".row").width() / 35 + "px")
    /*购物车上标*/
    $(".cartSuperscript").width($(".icon-cart").width() * 0.4);
    $(".cartSuperscript").height($(".cartSuperscript").width());
    $(".cartSuperscript").css({
            "fontSize" : $(".icon").width() * 0.35 + "px",
            "top" : -$(".icon").width() * 1.25 + "px",
            "left" : $(".icon").width() * 0.68 + "px"
        })
    /*侧面导航样式*/
    $(".sideNav").css({
        "margin-top": $(".navbar").width() /3.7 + "px",
        "width": $(".navicon").width() * 0.95 + "px",
        "height": $(".navicon").width() * 0.95 + "px",
        "right": -$(".navicon").width() * 0.48 + "px"
    });
    $(".sideNavCircle").css({
        "width": $(".sideNav").width() * 0.9 + "px",
        "height": $(".sideNav").width() * 0.9 + "px",
        "margin-top": $(".navicon").width() * 0.0425 + "px",
        "margin-left": $(".navicon").width() * 0.0425 + "px"
    });
    $(".sideNavText").css({
        "fontSize": $(".sideNavCircle").width() / 4+"px",
        "marginTop": $(".sideNavCircle").width() / 3 + "px",
        "marginLeft": 4 + "px"
    });
    $("#myModal").css("z-index", "1111");
    $(".sideNavText1").css({
        "font-size": $(".sideNavCircle").width() / 5 + "px",
        "padding-top": ($(".sideNavCircle").height()) / 10 + "px"
    });
    /*购物车模态框样式*/
    $(".cartBody").css("fontSize", $(".icon").width() / 4 + "px");
    $(".cartHeader").each(function() {
        this.style.fontSize = $(".icon").width() / 4.5 + "px";
        this.style.padding = $(".icon").width() / 6 + "px";
    })
}

 

json数据

[
  {
      "id":1,
      "type":"热销菜品",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"红油抄手","img":"img/1.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","img1":"shaitu.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"农家小炒","img":"img/1.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":2,
      "type":"店长推荐",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","img1":"shaitu.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":3,
      "type":"荤菜",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","img1":"shaitu.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":4,
      "type":"素菜",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":5,
      "type":"卤菜",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":6,
      "type":"凉菜",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":7,
      "type":"主食",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":8,
      "type":"面食",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","img1":"shaitu.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":9,
      "type":"小吃",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":10,
      "type":"果汁",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":11,
      "type":"酒水",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  },
  {
      "id":12,
      "type":"甜品",
      "caipin":
          [
          {"id":1,"name":"凉拌黄瓜","img":"img/1.png","price":28.00,"salecount":200,"tuijian":true,"pingjia":[{"username":"Tom","img":"user1.jpg","coutent":"太好吃了！","data":"2017-6-24"}]},
          {"id":2,"name":"凉拌黄瓜","img":"img/2.png","price":38.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Jerry","img":"user2.jpg","coutent":"味道不错，就是等位置等了很久 ","data":"2017-7-12"}]},
          {"id":3,"name":"凉拌黄瓜","img":"img/3.png","price":48.00,"salecount":1200,"tuijian":true,"pingjia":[{"username":"Alice","img":"user3.jpg","coutent":"特别的好吃","data":"2017-7-14"}]}
          ]
  }
]

转载于:https://my.oschina.net/u/3631458/blog/1581909