目录
1、原生实现
1.1、html 部分
- 1、原生实现
-
- 1.1、html 部分
- 1.2、JavaScript 部分
- 1.3、css 部分
- 2、uniApp 实现
-
- 2.1、html 部分
- 2.2、JavaScript 部分
- 2.3、css 部分
- 3、演示
<body> <div> <div class="cumulative_box"> <p class="cumulative_btn" onclick="btnCumulative(0)">- // 把字符串转换为数字 let sum = Number(cumulativeResult.innerText); if (i == 0) { // 实现累减功能 sum -= 1; // 操作 DOM 重新渲染值 cumulativeResult.innerHTML = sum; } else { // 实现累加功能 sum += 1; // 操作 DOM 重新渲染值 cumulativeResult.innerHTML = sum; } }
1.3、css 部分
* { 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; }
2、uniApp 实现
2.1、html 部分
<template> <view> <view class="cumulative_box"> <text class="cumulative_btn" @click="btnCumulative(0)">-{cumulativeResult}} data() { return { cumulativeResult: 86 } }, methods: { btnCumulative(i) { if (i == 0) { this.cumulativeResult -= 1; } else { this.cumulativeResult += 1; } } } }
2.3、css 部分
* { 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; }
3、演示
