美文网首页程序员
收藏!js实现input加减

收藏!js实现input加减

作者: jia林 | 来源:发表于2017-10-05 08:44 被阅读0次

好的程序员是会复制粘贴的,这样说好像会被唾弃的。。。。。

html

<input type="button" value="-" id="subtraction" onclick="subtraction()"></input>
 <input type="text" value="1" id="number" onBlur="number()"></input>
  <input type="button" value="+" id="add" onclick="add()"></input><br>
  • 减号按钮点击事件
function subtraction(){
            //获取-号按钮
            var subtraction = document.getElementById("subtraction");
            //获取文本框
            var number = document.getElementById("number");
            if (number.value<=1) {
                //如果文本框的值小于1,则设置值为1
                number.value = 1;
            }else {
                number.value = number.value - 1;
            }
        }
  • 文本框离开焦点事件
function number(){
            var number = document.getElementById("number");
            var value = number.value;
            //如果文本值为空,设置为1
            if (value=="") {
                number.value = 1;
            }
            //如果文本值为非纯数字,设置为1
            //isNaN()是否为非法数字
            if (isNaN(value)) {
                number.value = 1;
            }
            //如果文本值小于1,设置为1
            if (parseInt(value)<=1) {
                number.value = 1;
            }
        }

-加号按钮点击事件

function add(){
            var add = document.getElementById("add");
            var number = document.getElementById("number");
            //parseInt() 将数值型字符串转换为数值
            number.value = parseInt(number.value)+1;
        }

相关文章

网友评论

    本文标题:收藏!js实现input加减

    本文链接:https://www.haomeiwen.com/subject/epyhyxtx.html