zoukankan      html  css  js  c++  java
  • ECSHOP 商品详情页购买数量 添加加减按钮 实用版

    打开模板文件goods.dws 查找代码

    <input name="number" type="text" id="number" value="1" size="4" onblur="changePrice()" style="border:1px solid #ccc; "/>

    修改为

    <span class="goods_cut" onclick="goods_cut();changePrice();"><img src="images/plus1.gif" alt="减少" width="15" height="15" /></span>
    <input name="number" type="text" id="number" value="1" size="4" onblur="changePrice()" style="border:1px solid #ccc; "/>
    <span class="goods_add" onclick="goods_add();changePrice();"><img src="images/plus2.gif" alt="增加" width="15" height="15" /></span>

    再添加js脚本

    <script language="javascript" type="text/javascript">
    
    function goods_cut(){
    
    var num_val=document.getElementById('number');
    
    var new_num=num_val.value;
    
    var Num = parseInt(new_num);
    
    if(Num>1)Num=Num-1;
    
    num_val.value=Num;
    
    }
    
    function goods_add(){
    
    var num_val=document.getElementById('number');
    
    var new_num=num_val.value;
    
    var Num = parseInt(new_num);
    
    Num=Num+1;
    
    num_val.value=Num;
    
    }
    </script>

    再添加CSS样式

    /*--------------商品详情页增加减少-------------*/
    .goods_gds {
        height:35px;
        display:block;
        overflow:hidden;
    }
    .goods_font {
        display:block;
        float:left;    
        height:15px;
        margin:8px 3px 0;
        font-size:12px;
    }
    .goods_cut {
        border:0 none;
        cursor:pointer;
        display:block;
        float:left;
        font-size:0;
        height:15px;
        line-height:0;
        margin:8px 3px 0;
        width:15px;
        padding-right:0px;
        _padding-right:0px;
    }
    input.goodsBuyBox,input.number {
        border:1px solid #DDDDDD;
        float:left;
        font-size:10px;
        height:18px;
        line-height:18px;
        margin:5px 5px 5px 5px;
        padding:0;
        text-align:center;
    }
    .goods_add {
        border:0 none;
        cursor:pointer;
        display:block;
        float:left;
        font-size:0;
        height:15px;
        line-height:0;
        margin:8px 3px 0;
        width:15px;
    }
    .goods_number_tit{
        display: block;
        background:none;
        text-align:left;
        padding-left:5px; 
    }

    把下面的图片放进模板的图片文件夹,注意图片名称。

    ------------------------------------------华丽丽的分割线--------------------- ------------------------------------

    源厂制造10-10000级洁净无尘车间防静电防尘用品!网址:http://www.lgfjd.com 微信号:614412
  • 相关阅读:
    燃尽的一个不便之处修改
    jquery给元素添加样式表的方法
    http协议
    春节读书
    file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known
    jQuery on(),live(),trigger()
    jquery ui中的dialog,官网上经典的例子
    问题:循环元素,被选中元素个数,全选
    3.5星|《小学问》:年轻人思维与婚恋常见误区解析
    正念疗法入门介绍,作者是日籍美国正念疗法医生:3星|《高效休息法》
  • 原文地址:https://www.cnblogs.com/wangblognet/p/2883499.html
Copyright © 2011-2022 走看看