Web前端之实现累计功能、原生与UniApp版微信小程序两种方式实现、计算、累加、getElementById、innerHTML、Number

📅 发布时间:2026/7/8 3:46:19 👁️ 浏览次数:
Web前端之实现累计功能、原生与UniApp版微信小程序两种方式实现、计算、累加、getElementById、innerHTML、Number
MENU原生实现HtmlJavaScriptStyleUniApp实现HtmlJavaScriptStyle演示原生实现Htmlbodydivdivclasscumulative_boxpclasscumulative_btnonclickbtnCumulative(0)-/ppclasscumulative_resultidcumulativeResult/ppclasscumulative_btnonclickbtnCumulative(1)/p/div/div/bodyJavaScriptletcumulativeResultdocument.getElementById(cumulativeResult);// 设置默认值为 0cumulativeResult.innerHTML0;functionbtnCumulative(i){// 把字符串转换为数字letsumNumber(cumulativeResult.innerText);if(i0){// 实现累减功能sum-1;// 操作 DOM 重新渲染值cumulativeResult.innerHTMLsum;}else{// 实现累加功能sum1;// 操作 DOM 重新渲染值cumulativeResult.innerHTMLsum;}}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实现Htmltemplateviewviewclasscumulative_boxtextclasscumulative_btnclickbtnCumulative(0)-/texttextclasscumulative_result{{cumulativeResult}}/texttextclasscumulative_btnclickbtnCumulative(1)/text/view/view/templateJavaScriptexportdefault{data(){return{cumulativeResult:86}},methods:{btnCumulative(i){if(i0){this.cumulativeResult-1;}else{this.cumulativeResult1;}}}}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;}演示