1、原生实现

1.1、html 部分

<body><div><div class="cumulative_box"><p class="cumulative_btn" onclick="btnCumulative(0)">-</p><p class="cumulative_result" id="cumulativeResult"></p><p class="cumulative_btn" onclick="btnCumulative(1)">+</p></div></div>
</body>

1.2、JavaScript 部分

let cumulativeResult = document.getElementById('cumulativeResult');
// 设置默认值为 0
cumulativeResult.innerHTML = 0;function btnCumulative(i) {// 把字符串转换为数字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)">-</text><text class="cumulative_result">{{cumulativeResult}}</text><text class="cumulative_btn" @click="btnCumulative(1)">+</text></view></view>
</template>

2.2、JavaScript 部分

export default {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、演示

累计（cumulative）相关推荐

Oracle 学习笔记：Backup Recovery 常用命令
1.设置归档模式: (1):查看数据库是否处于归档模式: 归档模式处于禁用状态. (2):设置数据库处于归档模式: 设置数据库处于归档模式的前提是数据库处于mount状态下,重启数据库至mount状态 ...
[SAP Dictionary]
Words Chinese (foreign) exchange gain 汇兑收益 (foreign) exchange loss 汇兑损失 (investment) support allo ...
数据备份 linux,linux下的数据备份
制定备份策略将原始设备转储到文件,或从文件恢复原始设备执行部分备份和手工备份检验备份文件的完整性从备份部分地或完全恢复文件系统完善的备份是系统管理的必要部分,但是决定对什么进行备份以及何时和 ...
R计算数组的累计加和（Cumulative Sums）
R计算数组的累计加和(Cumulative Sums) 目录 R计算数组的累计加和(Cumulative Sums) R中的累加和可视化R中的累加和
python累计积_累积分布函数（cumulative distribution function）
欢迎各位学习从0到1Python数据科学之旅,腾讯课堂和网易云课堂入口分别如下: (腾讯课堂新营业,报名可领取20元优惠券) 微信公众号:pythonEducation 模型和统计项目QQ:23146 ...
R语言ggplot2可视化绘制累计频率图、累积分布图（cumulative frequency/density distribution）
R语言ggplot2可视化绘制累计频率图.累积分布图(cumulative frequency/density distribution) 目录 R语
Cumulative distribution function（CDFs）累计分布函数
论文中经常出现CDF曲线,什么是CDF呢?其实很简单累积分布函数(cumulative distribution function)定义:对连续函数,所有小于等于a的值,其出现概率的和.F(a)=P ...
oracle 按月累计求和,SQL Cumulative Sum累积求和
excel在一个图表内,显示折线图和柱状图折线图和柱状图,在同一个图表中拆分显示一个图,设置主坐标轴另外一个图,设置次坐标轴拆分,通过调整纵坐标的最小值和最大值来实现关于 ...
绘制pr曲线图_生存分析如何绘制事件发生累计概率曲线图？
公众号前段时间发了篇推文<ggsurvplot()函数绘制Kaplan-Meier生存曲线>用来介绍生存曲线的绘制,下面的推文内容跟这篇文章结合着看. 在生存分析中我们通常关注个体在时间t ...

累计（cumulative）

目录

1、原生实现

1.1、html 部分

1.2、JavaScript 部分

1.3、css 部分

2、uniApp 实现

2.1、html 部分

2.2、JavaScript 部分

2.3、css 部分

3、演示

累计（cumulative）相关推荐

最新文章

热门文章