原生实现
Html
<body><div><divclass="cumulative_box"><pclass="cumulative_btn"onclick="btnCumulative(0)">-</p><pclass="cumulative_result"id="cumulativeResult"></p><pclass="cumulative_btn"onclick="btnCumulative(1)">+</p></div></div></body>
JavaScript
letcumulativeResult=document.getElementById('cumulativeResult');// 设置默认值为 0cumulativeResult.innerHTML=0;functionbtnCumulative(i){// 把字符串转换为数字letsum=Number(cumulativeResult.innerText);if(i==0){// 实现累减功能sum-=1;// 操作 DOM 重新渲染值cumulativeResult.innerHTML=sum;}else{// 实现累加功能sum+=1;// 操作 DOM 重新渲染值cumulativeResult.innerHTML=sum;}}
Style
*{margin:0;padding:0;}.cumulative_box{border-radius:5px;box-shadow:3px 3px 5p;width:180px;display:flex;align-items:center;justify-content:space-between;}.cumulative_btn{background-color:rgba(10,10,10,.3);border-radius:5px;flex:1;line-height:40px;text-align:center;font-size:30px;font-weight:600;color:#FFEE90;cursor:pointer;}.cumulative_result{box-sizing:border-box;flex:3;line-height:40px;border-radius:5px;margin:0 5px;font-size:18px;box-shadow:0 0 8px;padding:0 5px;color:#2F4F4F;text-align:center;}
UniApp实现
Html
<template><view><viewclass="cumulative_box"><textclass="cumulative_btn"@click="btnCumulative(0)">-</text><textclass="cumulative_result">{{cumulativeResult}}</text><textclass="cumulative_btn"@click="btnCumulative(1)">+</text></view></view></template>
JavaScript
exportdefault{data(){return{cumulativeResult:86}},methods:{btnCumulative(i){if(i==0){this.cumulativeResult-=1;}else{this.cumulativeResult+=1;}}}}
Style
*{margin:0;padding:0;}.cumulative_box{border-radius:5px;box-shadow:3px 3px 5p;width:160px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:space-between;}.cumulative_btn{background-color:rgba(10,10,10,.3);border-radius:5px;flex:1;line-height:30px;text-align:center;font-size:30px;font-weight:600;color:#FFEE90;cursor:pointer;}.cumulative_result{box-sizing:border-box;flex:3;line-height:30px;border-radius:5px;margin:0 5px;font-size:18px;box-shadow:0 0 8px;padding:0 5px;color:#2F4F4F;text-align:center;}
演示
![]()
