js progress 滑动条实现投资计算器

此文为js 利用滑动条实现投资计算器，并且对复投与非复投的盈利进行对比。如下图：

技术方面就用到一个简单的滑动条，因为感觉比较简单所以打算手写一下，不想再因为这一个小东西引入一个庞大的UI插件，该文就此诞生。

产品需求

本金每 100 移动一格
年利率每 0.5 移动一格
计算复投与不复投的年收益

配置参数

data() {return {balance: "1000", // 本金rate: "8", // 利率maxBalance: "20000", // 最大本金maxRate: "30", // 最大利率balancePercent: "", // 本金百分比ratePercent: "", // 利率百分比balanceStep: 100, // 本金每次滑动的最小步数rateStep: 0.5, // 利率每次滑动的最小步数touchx: 0 //x轴移动距离};
},

滚动条核心js

// 移动端事件
onTouchEvent(e) {// 滑块移动横向距离this.touchx = e.touches[0].pageX - 40;this.computedAmount(e.target.id);
},
// pc 端事件
onMouseEvent(e) {// 滑块移动横向距离this.touchx = event.offsetX - 12;this.computedAmount(e.target.id);document.onmousemove = event => {if (event.target.className == "pro-mask") {this.touchx = event.offsetX - 12;this.computedAmount(e.target.id);}};document.onmouseup = () => {document.onmousemove = document.onmouseup = null;};
}

计算滚动条数值

methods: {// 计算本金getBalance() {// 计算滚动条百分比let p = new BigNumber(this.touchx).div(this.$refs.progress.offsetWidth).times(this.maxBalance).idiv(this.balanceStep) //整除，保留0位小数.div(this.maxBalance).times(this.balanceStep).times(100).toFixed(2);this.balancePercent = p - 0 > 100 ? 100 : p;// 计算本金金额let num = new BigNumber(this.balancePercent).div(100).times(this.maxBalance).toFixed(0);this.balance = num - 0 > this.maxBalance ? this.maxBalance : num;},// 计算利率getRate() {// 计算滚动条百分比let p = new BigNumber(this.touchx).div(this.$refs.progress.offsetWidth).times(this.maxRate).idiv(this.rateStep) //整除，保留0位小数.div(this.maxRate).times(this.rateStep).times(100).toFixed(1);this.ratePercent = p - 0 > 100 ? 100 : p;// 计算年利率数值let num = new BigNumber(this.ratePercent).div(100).times(this.maxRate).toFixed(1);this.rate = num - 0 > this.maxRate ? this.maxRate : num;},
}

通过移动滚动条计算数值

methods:{computedAmount(type = "balance") {this.touchx = this.touchx > 0 ? this.touchx : 0;if (type == "rate") {this.getRate();} else {this.getBalance();}},
}

计算年收益

computed: {// 复投年收益compounded() {let num = this.balance;for (let i = 0; i < 365; i++) {num = new BigNumber(num).times(this.rate).div(36500).plus(num).toNumber();}return new BigNumber(num).minus(this.balance).toFormat(2);},// 不复投年收益notCompounded() {let num = new BigNumber(this.balance).times(this.rate).div(100).toFormat(2);return num;}
},

具体代码

大段的代码大家肯定看不下去的，所以本人在此贴出源码地址供大家下载查阅啦

https://gitee.com/tangying_cn/blog_file/blob/master/progress.zip

我的`个人博客`有空来坐坐

https://www.wangyanan.online

js progress 滑动条实现投资计算器相关推荐

js怎么给div加滑动条 vue给弹出层加滑动条(一分钟学会用js加滚动条)
@[TOC](怎么给div加滑动条给弹出层加滑动条(一分钟学会js加滚动条)) 给div加滑动条给需要滑动条的div加一个样式加一个高度,加一个overflow:auto; overflow:a ...
Android按钮滚动条,Android自定义Seekbar滑动条，Pop提示跟随滑动按钮一起滑动
由于项目需要做出此效果,自定义写了一个. 效果图思路: 原始的seekbar只有滑动条并没有下方的提示文字,所以我们必须要继承Seekbar重写这个控件. 代码: 在values文件夹下新建attr ...
第二百二十节，jQuery EasyUI，Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
【JavaScript吉光片羽】--- 滑动条
灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar: var Bar = function (opt) {var defaults = {$id: "", // 进度条dom ...
IOS 开发 UIProgress 和 UISlidre 进度条和滑动条组件
进度条和滑动条组件非常常见,在ios中进度条组件是无法响应事件的.滑动条可响应事件.但是这两个组件均不可设置高度,可设置x,y,width 进度条属性名称类型说明默认值 progressVie ...
layui表格取消横向滚动条_layui滑动条如何隐藏
layui滑动条隐藏的方法:首先打开相应代码文件:然后通过"content: ['/home/index/echartTest?role=2&wd='+host,'no']" ...
小程序自制自带滑动条的表格组件
小程序自制自带滑动条的表格组件在编写过程中遇到的难点 1. 表格的编写 2. 表格内容宽度固定长度自适应 3. 滚动条逻辑及代码编写 4. 滚动条的卡段优化 5. 小程序组件的编写及应用尾声先 ...
获取滑动条位置，动态调整对话框显示位置；为动态添加的button添加click事件
1.获取滑动条位置,动态调整对话框显示位置应用场景:页面上有三个按钮,所处位置高度不同,有的按钮需要移动滑动条才能看到,各个按钮点击后要弹出同一个对话框,为了保证对话框始终显示在当前视野的中央位置, ...

js progress 滑动条实现投资计算器

产品需求

配置参数

滚动条核心js

计算滚动条数值

通过移动滚动条计算数值

计算年收益

具体代码

我的`个人博客`有空来坐坐

js progress 滑动条实现投资计算器相关推荐

最新文章

热门文章

js progress 滑动条实现投资计算器

产品需求

配置参数

滚动条核心js

计算滚动条数值

通过移动滚动条计算数值

计算年收益

具体代码

我的个人博客有空来坐坐

js progress 滑动条实现投资计算器相关推荐

最新文章

热门文章

我的`个人博客`有空来坐坐