面试 以太坊 Morecoin 正则表达式 idea date curl Component Uploadify flowjs vue实例 管理后台ui swift视频教程 kb转mb mysql自连接 webapp打包 java手机验证码 vue使用bootstrap matlab取实部 python环境 python运算符优先级 java编程基础 java实现接口 java的数据类型 java8函数式接口 java自学教程 java的泛型 java版本查看 java创建文件夹 linux中grep python教程视频 pyh groupy 电子书制作软件 生存猎人属性 tar解压 iar下载 苹果x银色 粉碎文件工具 键盘指法练习游戏
当前位置: 首页 > 学习教程  > 编程语言

购物车商品数量加减

2020/9/19 14:40:42 文章标签:

购物车商品数量加减

Html

<link rel='stylesheet' type='text/css' media='screen' href='../css/bootstrap.min.css'>
<script src="../js/jquery-1.12.4.js"></script>


<div style="width: 300px;margin: 30px auto 0;">
        <form class="form-inline">
            <div class="form-group">
                <div class="input-group">
                    <div onclick="minus()" class="input-group-addon">-</div>
                    <input type="text" class="form-control" id="exampleInputAmount">
                    <div onclick="add()" class="input-group-addon">+</div>
                </div>
            </div>
        </form>
    </div>

Css

    <style>
        .list a {
            display: block;
            margin: 30px;
            padding: 0 20px;
            height: 100px;
        }

        .list .list-img {
            width: 180px;
            height: 100px;
            border-radius: 6px;
            object-fit: cover;
        }

        .list .title {
            font-size: 16px;
            font-weight: bold;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 10px 0 0;
        }

        .list .content {
            font-size: 14px;
            line-height: 26px;
            margin: 10px 0 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    </style>

Js

<script>
	var num = 0;
        // 对表单进行初始赋值
        $('#exampleInputAmount').val(num);
        // 点击添加时
        function add() {
            // 方法体
            if (num >= 5) {
                alert('最多可添加5个');
                return;
            }
            num++;
            console.log(num);
            $('#exampleInputAmount').val(num);
        }
        // 点击删除时
        function minus() {
            if (num < 1) {
                alert('已减到最低了');
                return;
            }
            num--;
            console.log(num);
            $('#exampleInputAmount').val(num);
        }
</script>

本文链接: http://www.dtmao.cc/news_show_200142.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?