Demo1：原生JS实现按钮加减操作（简易版）

最新推荐文章于 2022-09-03 16:27:55 发布

咕叽小丹

最新推荐文章于 2022-09-03 16:27:55 发布

阅读量1.7k

点赞数 4

分类专栏： Javascript小案例文章标签： js javascript 前端 html

本文链接：https://blog.csdn.net/m0_46577056/article/details/119223380

版权

Javascript小案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 代码为最基础的加减操作， 其他限制条件（如数量上限）可在此基础上进行添加-->
    <button id="sub">-</button>
    <input type="text" value="1" id="num">
    <button id="add">+</button>
    <script>
        let addNumber = document.getElementById('add');
        let subNumber = document.getElementById('sub');
        // 增加数量
        addNumber.addEventListener('click',function(){
            let num = Number(document.getElementById('num').value);
            num++; 
            document.getElementById('num').value = num;
        })
        // 减少数量
        subNumber.addEventListener('click',function(){
            let num = Number(document.getElementById('num').value);
            num--;
            if( num < 0 ){  // 最小值不能小于0
                num = 0;
            }
            document.getElementById('num').value = num;
        })
    </script>
</body>
</html>

咕叽小丹

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Demo1：原生JS实现按钮加减操作（简易版）

代码效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
复制链接

扫一扫