JS实现文本值加减操作

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>

JS判断

1:减号按钮点击事件

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;
            }
        }

2:文本框离开焦点事件

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;
            }
        }

3:加号按钮点击事件

function add(){
            var add = document.getElementById("add");
            var number = document.getElementById("number");
            //parseInt() 将数值型字符串转换为数值
            number.value = parseInt(number.value)+1;
        }
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用HTML、CSS和JavaScript来创建加减按钮,以下是一个示例: HTML代码: ```html <div> <button onclick="subtract()">-</button> <input type="text" id="number" value="0"> <button onclick="add()">+</button> </div> ``` 在这个示例,我们使用了三个元素:两个按钮和一个文本输入框。按钮分别用于执行减法和加法操作文本输入框用于显示当前的数字JavaScript代码: ```javascript function subtract() { var number = document.getElementById("number"); var currentValue = parseInt(number.value); number.value = currentValue - 1; } function add() { var number = document.getElementById("number"); var currentValue = parseInt(number.value); number.value = currentValue + 1; } ``` 这里我们定义了两个函数:subtract()和add()。当减号按钮被点击时,subtract()函数会获取当前数字,将其减1,并将结果更新到文本输入框。当加号按钮被点击时,add()函数会执行类似的操作,但是将数字加1。 CSS样式: ```css button { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; } input[type=text] { width: 50px; text-align: center; } ``` 这个CSS样式用于设置按钮和文本输入框的样式。 通过这些代码,你可以创建一个简单的加减按钮来增加或减少数字。当然,你可以根据自己的需求和美学来调整样式和行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值