[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!

目录

事件

 错误处理

1.隐藏/显示文字

2.简单的加法计算器

效果:

 ★★★3.简易利息计算器

效果:

​​​​​​​

事件

javascript允许html与用户交互的行为

例如:鼠标点击事件

<script>
function sayHello{
	alert('Hello World ppp!');
}
</script>

<button onclick="sayHello()">kick me</button>

 错误处理

<script>

function f1(){
  //函数f1是存在的
}
try{
   document.write("试图调用不存在的函数f2()<br>"); 
   f2();  //调用不存在的函数f2();
}
catch(err){
   alert("捕捉到错误:"+err.message); 
}
document.write("<p>错误被捕捉了，后续的代码得以继续执行</p>");

</script>

1.隐藏/显示文字

<button onclick="document.getElementById('text').style.display='none'">
    隐藏文本
</button>
<button onclick="document.getElementById('text').style.display='block'" >
    显示文本
</button>
<p id="text">这是一段可以隐藏的文字</p>

2.简单的加法计算器

  js代码

function add(){
    var v = parseFloat(document.getElementById('num1').value)+parseFloat(document.getElementById("num2").value);
    document.getElementById("result").value=v;
  }

html代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>简易加法计算器</title>
    <style>
        input{
            width: 100px;
        }
    </style>
    <script src="./practice1.js"></script>
</head>
<body>
    <input type="text" id="num1" >
    <span>+</span>
    <input type="text" id="num2" >
    <span>=</span>
    <input type="text" id="result" value="">
    <input type="button" value="计算" onclick="add()" >
</body>
</html>

效果:

 ★★★3.简易利息计算器

效果:​​​​​​​

css代码

table{
    border-collapse:collapse;
}
td{
    border:1px silver solid;
    padding: 5px;
    font-size:18px;
  }
input{
    width: 150px;
    font-size:18px;
    color: rgb(241, 6, 6);
}

js代码

function calculate(){
    var initMoney = document.getElementById("initMoney").value;
    var rate = document.getElementById("rate").value;
    var year = document.getElementById("year").value;
    var addition = document.getElementById("addition").value;
    try{
        initMoney = Number.parseFloat(initMoney);
        rate = Number.parseFloat(rate);
        year = Number.parseFloat(year);
        addition = Number.parseFloat(addition);
        if(year){
            var principalSum = initMoney+(year-1)*addition;//本金总和
        }else{
            var principalSum = initMoney;
        }
        
        var sum = CalculateSum(initMoney,1+rate/100,year,addition);//利息总和
        var profitSum=sum-principalSum;//本息和
        SetValue('principalSum',principalSum);
        SetValue('profitSum',profitSum);
        SetValue('sum',sum);
    }
    catch(err){
        alert(err.message);
    }
}

function SetValue(id,value){
    document.getElementById(id).value = value;
}
function CalculateSum(initMoney,multiplyPower,year,addition){
    if(0==year) return initMoney;

    var result=initMoney;
    for(var i=0;i<year;i++){
        if(i){//第一年无新增本金,之后每年年初增加本金
            result+=addition;
        }
        result *= multiplyPower;   
    }
    return result;
}

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <head>利息计算器</head>
    <link rel="stylesheet" type="text/css" href="./利息计算.css">
    <script src="./利息计算.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>起始资金</td>
            <td><input type="text" id="initMoney" value='10000'> ￥</td>
        </tr>
        <tr>
            <td>每年收益</td>
            <td><input type="text" id="rate" value='5'> %</td>
        </tr>
        <tr>
            <td>复利年数</td>
            <td><input type="text" id="year" value='1'> 年</td>
        </tr>
        <tr>
            <td>每年追加资金</td>
            <td><input type="text" id="addition" value='10000'> ￥</td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="button" value="计算"
                onclick="calculate()" ></td>
        </tr>
        <tr>
            <td>本金和</td>
            <td><input type="text" id="principalSum" value="0"> ￥</td>
        </tr>
        <tr>
            <td>利息和</td>
            <td><input type="text" id="profitSum" value="0"> ￥</td>
        </tr>
        <tr>
            <td>本息和</td>
            <td><input type="text" id="sum" value="0"> ￥</td>
        </tr>
    </table>
</body>
</html>

posted @ 2021-08-11 20:53  泥烟  阅读(72)  评论(0)  编辑  收藏  举报