基金收益计算器
自己写的一个简单基金计算器，可以计算当天的基金收益，数值不同不要以为程序的错，净值都是估值，会有一点差别。如果有同行，欢迎添加几行代码润色下。
<!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>
效果展示：
使用方式：
复制下来代码，放在以html后缀的空文件里，在浏览器打开就可以了，极其简单！！！