? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?用JS做购物车的计数器
第一步：写好html框架
? ? ? ? ? ? <div class="bigBox">
? ? ? ? ? ? ? ? ? <button id="minus">-
? ? ? ? ? ? ? ? ? ?<span type="text">0
? ? ? ? ? ? ? ? ? ?<button id="add">+
? ? ? ? ? ? </div>
第二步：给框架添加样式
? ? ?//使div里面的东西全部处于一行 ?
? ? div{
? ? ? ? ? ? ? ?float:left;
? ? ? ?}
?//给减号按钮设置宽高、字体大小、文本居中、定位
#minus{
? ? ? ?width:30px;
? ? ? ? height:30px;
? ? ? ? font-size:32px;
? ? ? ? line-height:20px;
? ? ? ? text-align:center;
? ? ? ? position:absolute;
? ? ? ? top:20px;
? ? ? ? left:20px;
? ? }
//给加号按钮设置宽高、字体大小、文本居中、定位
#add{
? ? ? ? width:30px;
? ? ? ? height:30px;
? ? ? ? font-size:32px;
? ? ? ? line-height:20px;
? ? ? ? text-align:center;
? ? ? ? position:absolute;
? ? ? ? top:20px;
? ? ? ? left:104px;
? ? }
//给数字框设置宽高、字体大小、文本居中、定位
span{
? ? ? ? float:left;
? ? ? ? width:55px;
? ? ? ? height:28px;
? ? ? ? text-align:center;
? ? ? ? border:1px solid #000;
? ? ? ? font-size:20px;
? ? ? ? position:absolute;
? ? ? ? top:20px;
? ? ? ? left:50px;
? ? }
第三步：编写js
//定义函数
? ? var oMinus=document.getElementById('minus');
? ? var oInp=document.getElementsByTagName('span');
? ? var oAdd=document.getElementById('add');
? ? var num=parseInt(oInp[0].innerHTML);
//给减号设置点击事件
? ? oMinus.onclick=function () {
? ? ?if (num==0) return;
? ? ? ? num--;
? ? ? ? oInp[0].innerHTML=num;
? ? ? };
//给加号设置点击事件
? ? oAdd.onclick=function () {
? ? if(num>=100) return;
? ? ? ? num++;
? ? ? ? oInp[0].innerHTML=num;
? ? ? ?}
? ? </script>
