使用html页面实现简单的算法并通过百度网盘实现访问

首先这篇博客主要是个思路，因为实现的方式有很多。
1.先讲下需求，这个需求本人经历，是这样的：假设有本金100000，那么多长时间会回本呢？
拿出计算机一条一条计算效率太低，而且本金变化的话还得重新算，于是想着写一个html页面进行算并且渲染出来。

2.代码逻辑相对并不是那么复杂，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<div>
    总钱数：<input type="text" id="money">
    天数：<input type="text" id="day">
    <button id="search" onclick="calculate()">查询</button>
</div>
<div>
    计算出的结果:
    <ul id="result"></ul>
</div>
</body>
<script>
    function calculate() {
        var money = document.getElementById("money").value - 0;
        var day = document.getElementById("day").value - 0;
        var returnMoney = 0;
        //要进行渲染的div
        var result = document.getElementById("result");
        result.innerText = "";
        for(var i=1;i<=day;i++){
            var interest = money*0.001;
            interest = interest.toFixed(2) - 0;
            returnMoney = returnMoney + interest;
            returnMoney = returnMoney.toFixed(2) - 0;
            money = money.toFixed(2) - 0;
            money = money - interest;
            var li = document.createElement("li");
            li.innerText = '第'+i+'天；当天返息：'+interest+'；总共返息：'+returnMoney+'；剩余总金额：'+money;
            result.appendChild(li);
        }
    }
</script>
</html>

3.保存为html文件，打开直接使用就行了，效果截图如下:
这里写图片描述

4.直接发给用户用打开html的方式太low了，而且经亲测ios端还无法在微信端通过浏览器打开这个html文件，简单的方案就是把这个文件放置到云服务端再提供给用户访问就行。但并不是每个人都有自己的云服务器毕竟云服务器还是要钱的，我这里再提供一个免费方式，就是利用百度云盘共享的方式将这个文件共享出去，也能达到云服务端的访问效果。以下为百度网盘共享地址：
https://pan.baidu.com/s/1jI3Wgom

5.总结：弄完之后之后觉得还蛮好玩的，分享出来给大家，还有大家有什么更好的方式可以及时给我留言。

使用html页面实现简单的算法并通过百度网盘实现访问

猜你喜欢