一 .复利计算器
效果图
遇到的问题：
1.保留小数点后几位，四舍五入时
使用Math.round(x)–返回最接近x的int型值。
例如：34.489 * 100 —> 返回最接近3448.9的int型 ----3449
2.使用innerHTML给标签内容加换行符时，注意格式
em.innerHTML = 要显示的内容 + “
”；
html代码如下
//流程：通过name属性得到三个标签对象ele[]-----getElementsByName("name")
// 通过ele[i].value得到本金、利息、总额三个值
// 统一需要输出的的内容格式
// 由于需要在页面上输出内容，在<body>内添加一个标签，设置好id值
// 通过标签的id值得到标签对象，通过innerHTML设置标签内容（标签内容会在html页面输出）-------getElementById("id")
// 注意，由于是在一个标签内输出，所以每次都是在追加标签内容，每次追加内容时都加上换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function save(x){//Math.round()返回最接近参数类型的int，可用来四舍五入
return Math.round(x*1000)/1000;
}
function cul(){
var ele = [];
ele = document.getElementsByName("id1");
var year = parseInt(ele[1].value);
var mon = parseFloat(ele[0].value);
var ra = (ele[2].value)/100;
var sum = 0;
var rat = 0;
var em = document.getElementById("r1");
em.innerHTML = "";
for(var i = 1;i <=ele[1].value; i++){
em = document.getElementById("r1");
rat = save(mon * ra);
sum = mon + rat;
em.innerHTML+="第"+i+"年，本金"+mon+",利息"+rat+",总收益"+sum+"<br>";
mon = sum;
}
}
</script>
</head>
<body>
<input type="text" placeholder="本金" name="id1" />
<input type="text" placeholder="时长/年" name="id1"/>
<input type="text" placeholder="年利率%" name="id1" />
<input type="button" value="计算" onclick="cul();"/>
<p id="r1"></p>
</body>
</html>
二 .计算器
效果图
遇到的问题：
1.function 函数的参数不能是特殊字符，比如 " ."
2.clear是关键字
3.保留小数点后两位。由于是把字符转成了数字，会有一定误差，直接保留两位小数查看。
html代码如下：
//流程：
1.通过<tr><td></td></tr>设置单元格，以及colspan、rowspan合并单元格
2.设置加、减、乘、除函数，在对应的单元格标签里添加onclick="function()",点击单元格时，触发执行相应函数。在函数中通过追加getElementById("显示屏标签id名")，控制显示屏标签，将点击单元格内容追加到显示屏。
例如：点击4，触发执行函数f1(4)，由于显示屏标签的id为t1，通过em = document.getElementById("t1")得到显示屏标签对象，通过em.innerHTML += a追加显示屏标签内容。
这样就将点击的内容显示在显示屏上。 加减乘除小数点等号都是一样的过程
3.点击 = 后，触发sum函数，也是通过id得到显示屏内容，var em = document.getElementById("t1");
var num = em.innerHTML; 此时的num是一个字符数组，也就是运算式的中缀表达形式。
4.通过模拟栈进行中缀表达式求值。 其中stack()时进行栈操作，prio()是得到算符优先级，Fun()是进行
x ch y 的操作
<!DOCTYPE html>
//有一些数值类型转换啰嗦的地方。
<html>
<head>
<!-- 控制台debug
f10继续下一行--
蓝色的按钮（或者f8会逐步执行，而且跳过其他js文件）11--= -->
<meta charset="utf-8">
<title></title>
<style>
.def{
color: black;
font-weight: 460;
font-size: 22px;
text-align: center;
}
.top{
font-weight: 600;
font-size: 24px;
text-align: center;
}
</style>
<script language="JavaScript">
function save(x){
return Math.round(x*100)/100;
}
function f1(a) {
/* function参数不能是特殊字符 */
// 别忘了要加""
var em = document.getElementById("t1");
// 设置标签元素的内容
if (a == 10) {
em.innerHTML += "."
} else {
em.innerHTML += a;
}
}
function add() {
var em = document.getElementById("t1");
em.innerHTML += "+";
// var v = em.innerHTML;
// console.info(v);
}
function cut() {
var em = document.getElementById("t1");
em.innerHTML += "-";
}
function mul() {
var em = document.getElementById("t1");
em.innerHTML += "*";
}
function divi() {
var em = document.getElementById("t1");
em.innerHTML += "/";
}
function Clear() {
/* clear()是关键字 */
var em = document.getElementById("t1");
em.innerHTML = "";
// console.info(em.innerHTML);
}
function prio(x) { //运算符优先级
if (x == '+' || x == '-') return 1;
else if (x == '*' || x == '/') return 2;
else return 0;
}
function sum() {
var em = document.getElementById("t1");
var num = em.innerHTML; /* 字符数组 */
console.info(num);
// 模拟栈来计算
// console.info(stack(num));
em.innerHTML = save(stack(num));
}
function Fun(x, y, ch) {
if (ch == '+') return x + y;
else if (ch == '-') return x - y;
else if (ch == '*') return x * y;
else return x / y;
}
function stack(num) { //模拟栈计算
var k = 0;
var j = 0;
var t1 = 0;
var t2 = 0;
var s1 = new Array(20); //数栈
var s2 = new Array(20); //符号栈
// console.info(num);
for (var i = 0; i <= num.length; i++) {
console.info(i + ':' + num[i]);
if (num[i] == '+' || num[i] == '-' || num[i] == '*' || num[i] == "/" || i == num.length) {
var str = num.substring(j, i); //第一个操作数
s1[++t1] = parseFloat(str); //操作数入栈
var ch = num[i];
if (i != num.length) {
if (prio(num[i]) > prio(s2[t2])) { //符号入栈
s2[++t2] = num[i];
j = i + 1;
} else { //取数字栈两个元素和符号栈顶元素进行计算
while (prio(ch) <= prio(s2[t2])) {
console.info(ch);
// for (k = i + 1; k <= num.length; k++) {
// if (num[k] == '+' || num[k] == '-' || num[k] == '*' || num[k] == "/" || k == num
// .length) {
// var str = num.substring(i + 1, k);
// break;
// }
var y = s1[t1--];
var x = s1[t1--];
z = Fun(x,y,s2[t2--]);
s1[++t1] = z;
}
//当 当前操作符可以入栈时退出循环
s2[++t2] = ch;
j = i+1;
}
}
}
console.info(t1 + ":" + s1[t1]);
console.info(t2 + ":" + s2[t2]);
}
console.info("**************");
while (t2 > 0) {
y = s1[t1--];
x = s1[t1--];
var z = Fun(x, y, s2[t2--]);
s1[++t1] = z;
}
console.info(s1[t1]);
console.info(parseFloat(s1[t1]));
return s1[t1];
}
// var str = num.substring(j,num.length);
// s1[++t1] = parseFloat(str);
</script>
</head>
<body>
<table border="3" cellspacing="0" width="500px" height="500px" align="center">
<tr>
<td colspan="4" class="top">计算器</td>
</tr>
<tr>
<td colspan="3" id="t1"></td>
<td onclick="Clear();" class="def">C</td>
</tr>
<tr>
<td onclick="f1(1);" class="def">1</td>
<td onclick="f1(2);" class="def">2</td>
<td onclick="f1(3);" class="def">3</td>
<td onclick="add();" class="def">加</td>
</tr>
<tr>
<td onclick="f1(4);" class="def">4</td>
<td onclick="f1(5);" class="def">5</td>
<td onclick="f1(6);" class="def">6</td>
<td onclick="cut();" class="def">减</td>
</tr>
<tr>
<td onclick="f1(7);" class="def">7</td>
<td onclick="f1(8);" class="def">8</td>
<td onclick="f1(9);" class="def">9</td>
<td onclick="mul();" class="def">乘</td>
</tr>
<tr>
<td onclick="f1(0);" class="def">0</td>
<td onclick="f1(10)" class="def">.</td>
<td onclick="sum()" class="def">=</td>
<td onclick="divi();" class="def">除</td>
</tr>
</table>
</body>
</html>
