zoukankan      html  css  js  c++  java
  • 模仿淘宝商品页面 数量选购

    HTML代码结构如下:

    <small><span class="minus">&minus;</span><label class="number">1</label><span class="plus">+</span></small>件(库存1869件)

    js代码结构如下:

    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
            $(function () {
                var n = parseInt($(".number")[0].innerText);
                $(".plus").on("click",function () {
                    n = n + 1;
                    $(".number")[0].innerText = n;
                    $(".minus").css({color:"#000000"});
                });
                $(".minus").on("click",function () {
                    if (n <= 1){
                        $(".minus").css({color:"#cccccc"});
                        $(".minus").removeAttr('onclick');
                    }
                    else {
                        n = n - 1;
                        $(".number")[0].innerText = n;
                    }
                })
            })
        </script>

    CSS样式代码结构如下:

    .dPri_count>small {
        display: inline-block;
        vertical-align: middle;
        margin: 0 10px 0 40px;
    }
    .dPri_count>small>span {
        display: inline-block;
        vertical-align: middle;
        background: #ededed;
        font-size: 24px;
        font-weight: bold;
        width: 29px;
        height: 29px;
        text-align: center;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        line-height: 25px;
        cursor: default;
    }
    .dPri_count>small>.minus{
        color: #cccccc;
    }
    .dPri_count>small>label {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        line-height: 27px;
        width: 48px;
        height: 27px;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        font-weight: bold;
    }

    O(∩_∩)O谢谢!!!!!

  • 相关阅读:
    C++ for(char c:s)遍历字符串||for (char c : s)和for (char& c : s)的区别
    二维数组的查找--剑指offer(C++)
    C++学习笔记之--boolalpha
    在C++中matrix.size()和matrix [0] .size()之间的区别是什么?
    C3_note
    用webpack4从零开始构建react脚手架
    php
    正则表达式基础
    DOM
    常用H5
  • 原文地址:https://www.cnblogs.com/zxn-9588/p/7477710.html
Copyright © 2011-2022 走看看