| 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢） | 您所在的位置：网站首页 › 淘宝购物选项变成大图 › 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢） |
购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）
|
之前在写商品详情页时，需要写一个数字加减框，如下图 因为自己嫌麻烦，就去看其他网站是怎么写的，想直接拿来用，后来看来看去觉得写得很麻烦， 于是决定自己写，附上HTML+CSS+JS代码，一条龙一站式贴心服务2333
HTML 数量 - + （库存:54）
CSS * { margin: 0; padding: 0; border: 0; outline: 0 } ul, li { list-style: none; } a { text-decoration: none; } a:hover { cursor: pointer; text-decoration: none; } a:link { text-decoration: none; } img { vertical-align: middle; } .btn-numbox { overflow: hidden; margin-top: 20px; } .btn-numbox li { float: left; } .btn-numbox li .number, .kucun { display: inline-block; font-size: 12px; color: #808080; vertical-align: sub; } .btn-numbox .count { overflow: hidden; margin: 0 16px 0 -20px; } .btn-numbox .count .num-jian, .input-num, .num-jia { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; font-size: 18px; color: #999; cursor: pointer; border: 1px solid #e6e6e6; } .btn-numbox .count .input-num { width: 58px; height: 26px; color: #333; border-left: 0; border-right: 0; }
JS var num_jia = document.getElementById("num-jia"); var num_jian = document.getElementById("num-jian"); var input_num = document.getElementById("input-num"); num_jia.onclick = function() { input_num.value = parseInt(input_num.value) + 1; } num_jian.onclick = function() { if(input_num.value |
【本文地址】
公司简介
联系我们