JS演示如何制作利息功能

拼搏现实的明天。 2024-03-26 11:07 32阅读 0赞

## 如何制作利息功能 ##

### 简介 ###

简介：  
这个是一个贷款系统的功能的抽取，也就是给大家演示一下，如何实现贷款系统中的利息功能。

这里主要是利用前端来进行演示。

这里由于没有连接后端，所有这个前端的存储功能采取的是localStorage来实现，然后这里在添加一个时间标签，然后可以设置当前页面的时间，这样的话可以手动的模拟利息的功能。

这里需要参考的一篇文章是：[JS中如何对＜input type=“data“＞中值进行运算（JS日期类型如何进行加减）][JS_input type_data_JS]

### 前端页面的搭建 ###

这个方法就是用于计算，当前存款的值的,当然这里是把，这个利息写死了，只是演示作用。

这里通过两个时间戳标签，来调控时间，进行时间演示，主要难点就是一些语法问题。

function calMoney(day, money){
        
            res = money
           for(var i = 0; i < day; ++ i) {
        
                res *= 1.01
           }
           return res
        }

**完整代码**

在完整的代码中，还包括了判断两个时间戳是否为空的情况的考虑。

<!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>Document</title>
    </head>
    <body>    
        存钱的时间：<input type="date" id="time1"><br>
    
        当前日息：1%<br>
        
        当前用户存款：<span id="money">1000</span><br>
        <button id="update">点击更新当前的存款</button><br>
        当前时间：<input type="date" id="time2">
    </body>
    
        
    <script type="text/javascript">
        
        // 存钱的时间
        var time1 = document.getElementById("time1")
    
        // 当前的时间
        var time2 = document.getElementById("time2")
    
        // 获取当前的存款
        var money = document.getElementById("money")
        document.getElementById("update").onclick = function(){
          
            if (time1.value == "" ){
          
                alert("没有起始时间")
            } else if (time2.value == ""){
          
                alert("没有终止时间")
            } else {
          
                t1 = Date.parse(time1.value)       
                t2 = Date.parse(time2.value)       
    
                day = (t2 - t1) / 1000 / 86400
    
                // 首先获取当前的money
                nowMoney = money.textContent
    
                console.log(nowMoney)
                money.innerHTML = calMoney(day, nowMoney)
            }
        }
    
        // 计算存款的时间        
        function calMoney(day, money){
          
            res = money
           for(var i = 0; i < day; ++ i) {
          
                res *= 1.01
           }
           return res
        }
    </script>
     
    </html>

**运行效果**  
通过填写存钱的时间，还有当前的时间，然后还有利息，然后可以获取此刻的用户的存款是多少。  
![在这里插入图片描述][a147dea87f0e4d06aed483384170a148.png]

[JS_input type_data_JS]: https://blog.csdn.net/qq_51447496/article/details/129124635
[a147dea87f0e4d06aed483384170a148.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ee040afd75ae43379856de4a833c800c.png