Fund Return Calculator
A simple fund calculator written by myself can calculate the fund income of the day. Don’t think that the program is wrong if the value is different. The net value is estimated, and there will be a little difference. If you have peers, welcome to add a few lines of code to polish it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基金计算器</title>
<style>
#calculator{
display: flex;
flex-direction: column;
justify-content: space-around;
position: relative; /** 相对布局 **/
width: 360px;
height: 750px;
margin: 0 auto;
border-radius: 12px;
animation-name: example;
animation-duration: 4s;
box-shadow: 2px 2px 10px 0px rgba(255, 67, 25, 0.15);
}
table{
margin: 0 auto;
}
tr{
height: 45px;
}
button{
display: inline-block;
position: relative; /** 相对布局 **/
width: 100%;
height: 28px;
font-size: 14px;
white-space: nowrap;
color: white;
outline: none;
border: 0;
background-color: red;
border-radius: 4px;
cursor: pointer;
transition: all .3s cubic-bezier(.645,.045,.355,1);
-webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
}
button:active{
top: 2px; /**向下偏移2px **/
}
.footer,.header{
font-size: 20px;
font-weight: 600;
text-align: center;
}
i{
font-style:normal;
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #aff;
border-radius: 50% 50%;
animation: rotate 5s linear infinite;
}
input{
display: inline-block;
position: relative;
width: 177px;
height: 24px;
border-radius: 4px;
border: 1px solid #aaa;
animation: inp 1s;
}
@keyframes example {
0% {
background-color: white;}
25% {
background-color: yellow;}
50% {
background-color: #aff;}
75% {
background-color: red;}
100% {
background-color: #fff;}
}
@keyframes inp {
0% {
right: -277px;}
100% {
right: 0;}
}
@keyframes rotate{
0%{
transform: rotateZ(0deg);/*从0度开始*/
}
100%{
transform: rotateZ(360deg);/*360度结束*/
}
}
</style>
</head>
<body>
<div id="calculator">
<div class="header">
<p>基金计算器</p>
</div>
<table>
<thead>
<th colspan="2">单个基金收益</th>
</thead>
<tbody>
<tr>
<td>请输入当前基金份额：</td>
<td><input type="text" class="fe" oninput="filter(this)"></td>
</tr>
<tr>
<td>请输入当前基金估值：</td>
<td><input type="text" class="gz" oninput="filter(this)"></td>
</tr>
<tr>
<td>请输入当前基金总额：</td>
<td><input type="text" class="TSum" oninput="filter(this)"></td>
</tr>
<tr>
<td><button onclick="getResult()">计算收益</button></td>
<td><input type="text" class="sum" placeholder="0.00" readonly="readonly"></td>
</tr>
<tr>
<td><button onclick="getResult1()">计算要卖出的份额</button></td>
<td><input type="text" class="amount" placeholder="0.00" readonly="readonly"></td>
</tr>
<tr>
<td><button onclick="revert()">重置</button></td>
<td><input type="text" class="amount" readonly="readonly" placeholder="点击重置，重新输入"></td>
</tr>
</tbody>
</table>
<table>
<thead>
<th colspan="2">多个基金收益</th>
</thead>
<tbody>
<tr>
<td>请逐个输入当前份额：</td>
<td><input type="text" class="Afe" placeholder="注意输入格式，逗号隔开" oninput="filterA(this)"></td>
</tr>
<tr>
<td>请逐个输入当前估值：</td>
<td><input type="text" class="Agz" placeholder="注意输入格式，逗号隔开" oninput="filterA(this)"></td>
</tr>
<tr>
<td>请逐个输入当前总额：</td>
<td><input type="text" class="ATSum" placeholder="注意输入格式，逗号隔开" oninput="filterA(this)"></td>
</tr>
<tr>
<td><button onclick="getAllResult()">计算总收益</button></td>
<td><input type="text" class="ASum" placeholder="0.00" readonly="readonly"></td>
</tr>
<tr>
<td><button onclick="revert()">重置</button></td>
<td><input type="text" class="amount" readonly="readonly" placeholder="点击重置，重新输入"></td>
</tr>
</tbody>
</table>
<div class="footer">
<p><i>稳</i>住别慌</p>
</div>
</div>
<script>
let fe = document.getElementsByClassName('fe')[0]
let gz = document.getElementsByClassName('gz')[0]
let TSum = document.getElementsByClassName('TSum')[0]
let sum = document.getElementsByClassName('sum')[0]
let amount = document.getElementsByClassName('amount')[0]
let Afe = document.getElementsByClassName('Afe')[0]
let Agz = document.getElementsByClassName('Agz')[0]
let ATSum = document.getElementsByClassName('ATSum')[0]
let ASum = document.getElementsByClassName('ASum')[0]
let type = 1
function getResult(){
this.check()
if(this.type == 1){
let nowSum = (Number(fe.value) * Number(gz.value))
let income = (nowSum - Number(TSum.value)).toFixed(2)
sum.value = income
}
}
function getResult1(){
this.check()
if(this.type == 1){
let nowSum = Number(fe.value) * Number(gz.value)
let income = nowSum - Number(TSum.value)
let Num = (income / Number(gz.value)).toFixed(2)
amount.value = Num
}
}
function getAllResult(){
let AfeArr = Afe.value.split(',')
let AgzArr = Agz.value.split(',')
let ATSumArr = ATSum.value.split(',')
let MyASum = 0
for(var i = 0;i < AfeArr.length;i++){
MyASum = MyASum + (Number(AfeArr[i]) * Number(AgzArr[i]) - Number(ATSumArr[i]))
}
console.log(MyASum.toFixed(2))
ASum.value = MyASum.toFixed(2)
}
function revert(){
fe.value = ''
gz.value = ''
TSum.value = ''
sum.value = '0.00'
amount.value = '0.00'
Afe.value = ''
Agz.value = ''
ATSum.value = ''
ASum.value = '0.00'
location.reload()
}
function check(){
if(fe.value == '' || gz.value == '' || TSum.value == ''){
alert('输入内容不能为空')
this.type = 0
} else {
this.type = 1
}
}
function filter(obj){
obj.value = obj.value.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符
obj.value = obj.value.replace(/^[0]{1}/g,""); //清除只输入一个0
obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
// obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
if(obj.value.indexOf(".")< 0 && obj.value !=""){
//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
obj.value= parseFloat(obj.value);
}
}
function filterA(obj){
obj.value = obj.value.replace(/[^\d.,]/g,""); //清除“数字”和“.” ","以外的字符
}
</script>
</body>
</html>
Show results:
How to use :
Copy the code, put it in an empty file with html suffix, open it in the browser, it is extremely simple! ! !