master

分支 (1)

管理

管理

master

ceshi2
/
2.html

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
    <title>bootstrap 4</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        #end{
            background-color: #3DC2CA;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            margin-top: 5px;
            width: 100%;
            display: flex;
            border-radius:5px  5px 0px 0px;
            padding: 3px 0px;
            position: fixed;
            bottom: 0px;
        }
        #end a{
            flex: 1;
            text-align: center;
            text-decoration: none;
        }
        #end a:first-of-type::before{
            content: "";
            display: block;
            background-image: url("images/shouye.png");
            background-repeat: no-repeat;
            background-position:3px 0px;
            background-size: 87% auto;
            width: 30px;
            height: 25px;
            margin: 0 auto;
        }
        #end a:nth-of-type(2)::before{
            content: "";
            display: block;
            background-image: url("images/gouwudai.png");
            background-repeat: no-repeat;
            background-position: 3px 0px;
            background-size: 87%, auto;
            width: 30px;
            height: 25px;
            margin: 0 auto;}
        #end a:nth-of-type(3)::before{
            content: "";
            display: block;
            background-image: url("images/gouwu.png");
            background-repeat: no-repeat;
            background-position: 3px 0px;
            background-size: 87%, auto;
            width: 30px;
            height: 25px;
            margin: 0 auto;}
        #end a:last-of-type::before{
            content: "";
            display: block;
            background-image: url("images/wode.png");
            background-repeat: no-repeat;
            background-position: 3px 0px;;
            background-size: 87% auto;
            width: 30px;
            height: 25px;
            margin: 0 auto;}
        .dibu1{
            font-size: 25px;
            padding-top: 2rem;
            margin-left: 2rem;
            margin-bottom: 2rem;
        }
        .dibu p:not(:first-of-type){
            margin-left: 2rem;
            margin-bottom: 0.5rem;
        }
        .dibu p input{
            border: none;
            border-bottom: 1px solid white;
            background-color: transparent;
            width: 90%;
            height: 45px;
            color: #ffffff;
            outline: none;
        }
        .dibu span{
            font-size: 20px;
            display: inline-block;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 50%;
            height: 2rem;
            text-align: center;
            background-color: #3DC2CA;
            margin-top: 10px;
            border: none;
            border-radius: 5px;
        }
        .cont{width: 100%;margin: 0 auto;border: 1px solid white;overflow: hidden;}
        .cont .goods{width:100%;border: 1px solid white;box-sizing: border-box;text-align: center;}
        .goods img{width: 80%;}
        .goods span{display: block;margin: 10px 0;color: red;font-weight: bold}
        .goods p{height: 20px;line-height: 20px;overflow: hidden;}
        .goods input{display: block;margin: 0 auto;font-size: 20px;margin-bottom: 5px;background-color: #009966;color: white;border-radius: 5px}
        .goods a{
            color: #17a2b8;
        }
        #bs1{
            padding: 0.2rem 1rem;
            background-color: #3DC2CA;
        }
        #h2{
            text-align: center;
        }
    </style>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light  sticky-top "id="bs1">
    <a class="navbar-brand" href="#">玩具网</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="index.html">主页<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="2.html">商城</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="3.html">购物车</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="6.html">我的</a>
            </li>
        </ul>
    </div>
</nav>
<div id="h2"></div>
<input type="text" id="sousuo" placeholder="搜索" style="margin-top: 1px;position: relative;left: 50%;transform: translateX(-50%)">
<div id="xianshi"></div>
<div class="cont"></div>
<div class="dibu" style="background-color: #203247;color: white;height: auto">
    <p class="dibu1"><strong>Address</strong></p>
    <p>地址:南昌市</p>
    <p>电话:123456789</p>
    <p>邮箱:[email protected]</p>
    <p class="dibu1">Info</p>
    <p style="margin-right: 1rem">necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful</p>
    <p class="dibu1">Links</p>
    <p><a href="index.html" style="color: white">主页</a></p>
    <p><a href="2.html" style="color: white">商城</a></p>
    <p><a href="3.html" style="color: white">购物车</a></p>
    <p><a href="4.html" style="color: white">我的</a></p>
    <p class="dibu1">Subscribe</p>
    <p><input type="text" placeholder="邮箱"></p>
    <span>Subscribe</span>
    <p style="height: 5rem"></p>
</div>
<!--底部-->
<div style="width: 100%"></div>
<div id="end" style="width: 100%">
    <a href="index.html" style="color: white">主页</a>
    <a href="2.html" style="color: red">商城</a>
    <a href="3.html" style="color: white">购物车</a>
    <a href="6.html" style="color: white">我的</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../jquery-1.12.4.js"></script>
<script src="template-web.js"></script>
<!--
  可以用来实现  弹出框  下拉菜单  提示框功能
  如果说不需要这些功能  可以直接引入bootstrap.min.js  很小 只有62k
-->
<!--<script src="bootstrap4/dist/js/popper.min.js" ></script>
<script src="bootstrap4/dist/js/bootstrap.min.js"></script>-->

<!--如果 想要 popper的功能  可以直接引入 bundle.js 包含所有的功能-->
<script src="./bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js"></script>


</body>
</html>
<script type="text/javascript">
    //		定义一个商品数组
    function fun(){
    var data = [{
        img:"images/img1.jpg",
        price:"100",
        name:"红色积木男孩",
        goodsId:"sp1",
        html:"xq1.html"
    },{
        img:"images/img2.jpg",
        price:"50",
        name:"小丑竟是我自己？",
        goodsId:"sp2",
        html:"xq2.html"
    },{
        img:"images/p3.png",
        price:"80",
        name:"恐龙玩具",
        goodsId:"sp3",
        html:"xq3.html"
    }, {
        img:"images/p1.png",
        price:"50",
        name:"起飞",
        goodsId:"sp4",
        html:"xq4.html"
    }];
    class GoodsList{
//  	构造函数
        constructor(){
            this.data = data;
            this.cont = document.querySelector(".cont");
        }
        //  事件绑定
        init(){
//      	准备一个空字符串
            var str = "";
            for(var i = 0;i<this.data.length;i++){
//  	  	通过遍历商品数组,把商品属性添加到空数组中
                str += `<div class="goods"  index="${this.data[i].goodsId}">
                            <img src=${this.data[i].img} alt="">
                            <span>${this.data[i].price}</span>
                            <a href=${this.data[i].html}>查看详情</a>
                            <p>${this.data[i].name}</p>
                            <input type="button" value="加入购物车" class="add">
                     </div>`
            }
//  	  把商品添加后显示
            this.cont.innerHTML = str;
        }

//      点击购买商品时,把数据本地储存
//      点击购买
        addEvent(){
            var that = this;
            this.cont.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target ||e.srcElement;
//       		判断如果选择到input元素,获取它的父元素的属性“index";
                if(tar.className == "add"){
                    that.goodsId = tar.parentNode.getAttribute("index");
//              开始进行本地存储数据
                    that.setData();
                }
            }
        }

//       本地存储数据
        setData(){
//       	读取shop数据
            var gm = localStorage.getItem("shop");
//       	判断本地是否有这个数据,没有就存储
            if(gm == null){
//         没有就创建
                gm = [{
                    goodsId:this.goodsId,
                    num:1,
                    msg:this.getData(this.goodsId)
                }]
            }
            else{
//          把数组json变成对象类型
                gm = JSON.parse(gm);
                var zhuangtai = 0;
//             判断存入的数据是否在数组中有,有的话加数量,没有的话把这个数据放到数组中
                for(var i = 0;i<gm.length;i++){
                    if(gm[i].goodsId == this.goodsId){
                        gm[i].num++;
                        zhuangtai = 1;
                        break;
                    }
                }
//             如果数组中没有此数据,添加进去
                if(zhuangtai == 0){
                    gm.push({
                        goodsId:this.goodsId,
                        num:1,
//                    通过传入的goodsid数据是否在getData中有,如果传入的数据=对应数据的id,就把对应的数据拿过来
                        msg:this.getData(this.goodsId)
                    })
                }
            }
            //将数据存到本地存储中
            localStorage.setItem("shop",JSON.stringify(gm));
        }

//      主要的作用是可以通过点击对应商品,获取商品id,然后遍历整个数据然后找到对应id所贮备的数据
//        // 单独封装为了方便获取所有数据中，某个数据的功能
//       // 根据传入的id获取
        getData(id){
            //遍历的时候，比较，有符合的数据就返回这个数据
            for(var i = 0;i<this.data.length;i++){
                if(this.data[i].goodsId ==id){
                    return this.data[i];
                }
            }
            //没有符合的，返回空
            return {};
        }
//
    }
    var gl = new GoodsList();
    gl.init();
    gl.addEvent();}

    //搜索功能
    var cont = document.querySelector(".cont")
    var bool=false
    var h2=document.getElementById("h2")
    var add=document.querySelector(".add")
    var ss=document.getElementById("sousuo")
    var xs=document.getElementById("xianshi")
    var name=localStorage["用户名"]?localStorage["用户名"]:"请"
    h2.innerHTML=name+"登录后购买"
    window.onload=function () {
        if (localStorage["用户名"]){
            h2.innerHTML=name+"欢迎您"
            bool=false;
            fun()
        }else {
            bool=true;
        }
    }
    //给搜索框一个失焦事件
    ss.onblur=function () {
        //把原来的商城商品隐藏
        cont.style.display="none"
        var data = [{
            img:"images/img1.jpg",
            price:"100",
            name:"红色积木男孩",
            goodsId:"sp1",
            html:"xq1.html"
        },{
            img:"images/img2.jpg",
            price:"50",
            name:"小丑竟是我自己？",
            goodsId:"sp2",
            html:"xq2.html"
        },{
            img:"images/p3.png",
            price:"80",
            name:"恐龙玩具",
            goodsId:"sp3",
            html:"xq3.html"
        }, {
            img:"images/p1.png",
            price:"50",
            name:"起飞",
            goodsId:"sp4",
            html:"xq4.html"
        }];
        this.data = data;
        var key=data;
        key=key; //转换为数组
        console.log(key);
        var newArr=[];// 动态的搜索的匹配的数据
        for (var i=0;i<key.length;i++){
            //如果 有对应的关键字
            if(key[i].name.indexOf(this.value)!=-1){
                newArr.push(key[i]); //压入新的数组
            }
        }

        var newObj={
            list:newArr,  //已经筛选过的数据
        }
        var html=template("tem1",newObj);
        xs.innerHTML=html;
    }

</script>
<script type="text/html" id="tem1">
    <!--1、定义好 模板-->
    {{each  list}}
    <div class="goods"  index="{{$value.goodsId}}">
        <img src="{{$value.img}}" alt="">
        <span>{{$value.price}}</span>
        <a href="{{$value.html}}">查看详情</a>
        <p>{{$value.name}}</p>

    </div>
    {{/each}}
</script>