字符串渲染页面——购物车

最新推荐文章于 2023-08-17 23:00:00 发布

弯道超车的小破车

最新推荐文章于 2023-08-17 23:00:00 发布

阅读量182

点赞数

分类专栏：字符串渲染购物车文章标签：字符串 js javascript css html

本文链接：https://blog.csdn.net/LVHA529/article/details/118639872

版权

字符串渲染购物车专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
* {
    margin: 0;
    padding: 0;
  }
  body{
      background-color: #ccc;
  }
  
  ul, ol, li {
    list-style: none;
  }
  
  input, button, textarea {
    outline: none;
    border: none;
  }
  
  a, a:hover, a:target, a:link, a:active {
    text-decoration: none;
    color: #333;
  }
  
  a, img {
    width: 100%;
    height: 100%;
    display: block;
  }
  header,footer{
      width: 1200px;
      height: 200px;
      background-color: blueviolet;
      font-size:50px;
      text-align: center;
      line-height: 200px;
      margin: 0 auto;
      border-radius: 10px;
  }
  .content{
      width: 1200px;
      height: 100%;
      margin: 10px auto;
  }
  .top,.bottom{
      width: 1200px;
      height: 50px;
      margin: 8px 0;
      border-radius: 10px;
      background-color: darkmagenta;
  }
  .top{
      position: relative;
  }
  .top span{
      position: absolute;
      left: 60px;
      top: 15px;
      color: #FFF;
  }
  .container{
      width: 1200px;
      height: 100%;
      /* background-color: darkorange; */
  }
  
   li{
       font-size: 20px;
       display: flex;
       border: 2px solid black;
       border-radius: 10px;
       margin-bottom: 10px;
       justify-content: space-around;
       align-items: center;
       justify-items: center;
       background-color: darkorange;
   }
   .container .select>input{
       width: 20px;
       height: 20px;
   }
   .container .img{
    width: 150px;
    height: 150px;
    background-color: slateblue;
   }
   .name{
       width: 200px;
       font-size: 18px;
   }
  .pice span{
      color: red;
  }
  .pice_total span{
      color: red;
  }
  .number button{
      width: 30px;
      height: 20px;
      font-size: 20px;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
  }
  .del_btn button{
      width: 100px;
      font-size: 20px;
      cursor: pointer;
      border-radius: 5px;
      background-color: #ccc;
      
  }
  .top > input{
      width: 30px;
      height: 20px;
      display: flex;
      justify-items: center;
      display: inline-block;
      margin: 15px 0 0 20px ;
      cursor: pointer;
  }
  .bottom{
      display: flex;
      justify-content: space-around;
      justify-items: center;
      align-items: center;
      cursor: pointer;
      font-size: 20px;
      color: #fff;
  }
  .bottom button{
      font-size: 20px;
      background-color: #CCC;
      border-radius: 5px;
      cursor: pointer;
  }
</style>
</head>
<body>
    <header>TOP</header>
    <div class="content">
        
    </div>
    <footer>Bottom</footer>
    
</body>
<script src="./data.js"></script>
<script>
var contentBox = document.querySelector('.content') ;
//渲染页面
// 封装函数
bindHtml() ;
function bindHtml(){
    //定义总数量
    var totalNum = 0 ;
    // 定义总价格
    var totalPrice = 0 ;
    // 定义选中的个数
    var selectNum = 0 ;
    //遍历数组
    list.forEach(function(item){
        // 判断每一项是否选中 item.select 获取状态
        if( item.select === true ){
            totalNum += item.buy_num ;
            totalPrice += item.price*item.buy_num ;
            selectNum ++ ;
        }

    })
        var str = `
            <div class="top">
                <input class="select_all" type="checkbox" ${selectNum >= list.length ? 'checked' : ''}> <span>全选</span>
            </div>
        `
        list.forEach(function(item){
            str +=`
                <div class="container">
                <ul>
                    <li>
                        <div class="select">
                            <input data-id="${item.id}" class="select_one" type="checkbox" ${item.select ? 'checked' : ''}>
                        </div>
                        <div class="img">
                            <img src="${item.pic}" alt="">
                        </div>
                        <div class="name">
                            ${item.name}
                        </div>
                        <div class="pice">
                            ￥<span>${(item.price - 0).toFixed(2)}</span>
                        </div>
                        <div class="number">
                            <button class="sub_btn" data-id="${item.id}">-</button>
                            <span>${item.buy_num}</span>
                            <button class="add_btn" data-id="${item.id}">+</button>
                        </div>
                        <div class="pice_total">
                            ￥<span>${(item.buy_num*item.price).toFixed(2)}</span>
                        </div>
                        <div class="del_btn">
                            <button class="delet_btn" data-id="${item.id}">删除</button>
                        </div>
                    </li>
                </ul>
                </div>
            `
        })
        str +=`
            <div class="bottom">
                <div class="bottom_left">总购买数量：<span>${totalNum}</span></div>
                <div class="bottom_center">
                <button class="pay" data-price="${totalPrice.toFixed(2)}">去结算</button>
                <button class="clear">清空购物车</button>
                <button class="clear_select" >删除所有以选中</button>
                <button class="list">返回列表页</button>
                </div>
                <div class="bottom_right">总价格：￥<span>${totalPrice.toFixed(2)}</span></div>
            </div>
        ` 
        contentBox.innerHTML = str ;
}
//绑定点击事件  找到 公共的父级元素
contentBox.addEventListener('click',function(e){
    //事件兼容
    e = e || window.event ;
    //事件目标
    var target = e.target || e.srcElement ;
    //全选框
    if( target.className === 'select_all'){
        var type = target.checked ;
        list.forEach(function(item){
            item.select = type ;
        })
        bindHtml() ;
    }
    //获取单个单选框
    if( target.className === 'select_one'){
        var id = target.dataset.id - 0 ;
        var goods = list.find(function(item){ return item.id === id}) ;
        goods.select = !goods.select ;
        bindHtml() ;
    }
    //获取减框
    if( target.className === 'sub_btn' ){
        var id = target.dataset.id - 0 ;
        var sub = list.find(function(item){ return item.id === id}) ;
        if( sub.buy_num <= 1) return ;
        sub.buy_num -- ;
        bindHtml();
    }
    //获取加框
    if( target.className === 'add_btn' ){
        var id = target.dataset.id - 0;
        var add = list.find(function(item){ return item.id === id}) ;
        if( add.buy_num >= add.number) return ;
        add.buy_num ++ ;
        bindHtml() ;
    }
    // 获取 删除
    if( target.className === 'delet_btn'){
        var id = target.dataset.id - 0 ;
        list = list.filter(function(item){ return item.id !== id}) ;
        bindHtml();

    }
    //获取结算按钮
    if( target.className === 'pay'){
        var price = target.dataset.price - 0
        window.alert(`你总共需要支付${price}`) ;
        bindHtml() ;
    }
    //获取清空购物车
    if( target.className === 'clear'){
        list = [] ;
        bindHtml() ;
    }
    //删除所有选中
    if( target.className === 'clear_select'){
        list = list.filter( function(item){ return item.select === false}) ;
        bindHtml();
    }
    //返回列表
    if( target.className === 'list'){
        window.location.href = 'https://www.jd.com'
    }
    
})
</script>
</html>

作为小白级别的我们，应该换一种思维思考当我们页面中随时需要改变的东西，我们都需要动态渲染出来，所以我们可以把页面动态部分全部以字符串渲染的形式渲染出来，而不是把它写在HTML和CSS中。这样更有助于我们对字符串渲染更深一步了解。欢迎大家留言希望对像我一样的小白有帮助，一起加油未来的各位老板