html这种加减怎么实现

<input class="input3 bor-e3 ml-8" id="reduce" type="button" value="-">

<input class="input2 text-c" id="num" type="text" value="1">

<input class="input4 bor-e3" id="add" type="button" value="+">

<!--样式自己写-->   var i = $("#num").val()

       $("#add").click(function () {

           i++

           $("#num").attr("value", i)

       }),

        $("#reduce").click(function (){

            i--

        $("#num").attr("value", i)

         if (i < 0) {

        $("#num").attr("value", 0)

             i = 0

            }

        })

   //jQuery实现的，需要自己去下载jQuery文件

//减号添加onclick事件 onclick=subNum()

//显示数字的ID为 num

//加号添加onclick事件 onclick=addNum()

<script>

function subNum(){

document.getElementById("num").value=document.getElementById("num").value-1

}

function addNum(){

document.getElementById("num").value=document.getElementById("num").value+1

}

</script>

---