JS特效：数量增减器

要点知识

• window.onload加载后执行JS代码
• document.getElementById通过ID获取元素
• parseInt把字符串或者小数转化成整数

数量增减器是电商网站必备利器，我们学一下三步完成这一利器。

HTML代码

    <input id="inc" type="button" value="+">
    <input id="count" type="text" value="1" size="1" style="text-align:center;">
    <input id="dec" type="button" value="-">

JS代码

1. 增加JS代码结构
   在script标签或者js文件，需要加入如下代码。这段代码作用是使js代码在HTML元素完全显示(加载)后执行。为了使js代码可以放在HTML任何位置，需要把所有js代码放到这段代码里面。

window.onload = function() {
}

2. 获取元素
   我们要获取所有需要的元素。

 var count = document.getElementById("count");
 var inc = document.getElementById("inc");
 var dec = document.getElementById("dec");

3. 设置事件
   给加入按钮事件。效果如下：

• 单击+按钮，文本框数字加一。

inc.onclick = function() {
  count.value = parseInt(count.value) + 1;
};

• 单击-按钮，文本框数字减一。

dec.onclick = function() {
  count.value = parseInt(count.value) - 1;
};

注意：文本框的value的值是string类型，需要转换为number类型才能进行算术运算

代码总汇

        window.onload = function() {
            var count = document.getElementById("count");
            var inc = document.getElementById("inc");
            var dec = document.getElementById("dec");
            inc.onclick = function() {
                count.value = parseInt(count.value) + 1;
            };
            dec.onclick = function() {
                count.value = parseInt(count.value) - 1;
            };
        };