一 .复利计算器
效果图
遇到的问题：
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>3.消消乐
效果图：
1）遇到的问题：
注意console就直接返回控制台了。console.info（）打印，不要总是写错
class属性比较特殊，使用setAttribute(“class”,“value”)更改属性值
onclick、onfocus、onmouseout、onmouseover都是事件，不是属性
2）代码：
//流程：
//1.通过window.onload()，在浏览器加载时，随机初始化图片序列。
//2.调用getImgIndex得到使用未超过两次的随机序号，用来随机化加载的图片。
//3.追加10次div子标签，<div id="" class="" οnclick="function f_name()">
//4.每次点击一张图片，每次点击一张图片，调用look()方法加载图片路径，由于每次执行匹配函数太快，根本来不及看图片，所以设置一个定时器，延迟执行函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.p_class {
width: 1000px;
/* 盒子元素离外边的距离 */
padding: 26x;
/* border边界线粗细，padding上下左右所有边界都是26 */
border: 1px solid #000000;
float: left;
}
.c_class {
width: 150px;
height: 150px;
/* margin 外边距 padding内边距 */
margin: 10px;
/* 指定一个盒子border元素是否浮动， */
float: left;
border: 1px solid #000000;
background-color: bisque;
/* background-image: url(img/1.jpg); */
}
</style>
<script>
/* 拼接标签或路径时：
“ ”里面写字符串，数字写在“ ”外面，用+拼接
拼成想表达的形式 eg：40，53
*/
window.onload = function() {
var em = document.getElementById("l1");
var img = [1, 2, 3, 4, 5]; //图片序号
var num = [0, 0, 0, 0, 0, 0]; //用过几次
//追加div标签中的内容,=后面的值用‘’隔开，“”里放字符串，+拼接字符串
for (var i = 0; i < 10; i++) {
var index = getIndex(num);
em.innerHTML += "<div class='c_class'" +
"id='c" + i + "'" +
"οnclick='look(this.id," + index + " );'>" +
"</div>";
// console.info(em.innerHTML);
}
}
/* 全局变量*/
var first_id = ""; //c0~c9
var first_index = 0; //1~5
function look(id, index) {
var em = document.getElementById(id);
//给这个标签设置css样式：背景图片
em.style = "background-image:url(img/" + index + ".jpg)";
setTimeout(function() {
if (first_id == "") { //第一次点击图片
first_id = id;
first_index = index;
} else {
if (id == first_id) { //两次点击同一张
clearstyle(id);
} else if (index != first_index) {
clearstyle(id);
clearstyle(first_id);
}
first_id = "";
first_index = 0;
}
}, 200);
}
function clearstyle(id) { //注意，标签的属性是style，不是background-image
var em = document.getElementById(id);
em.style = "";
}
function getIndex(num) {
var index = parseInt(Math.random() * 5 + 1); //得到的图片序号[1,6)
if (num[index] >= 2) {
index = getIndex(num);
} else {
num[index]++;
}
return index;
}
</script>
</head>
<body>
<div id="l1" class="p_class">
</div>
</body>
</html>4.简单动画演示：目录手风琴
效果图：
1.发现的问题：
1）如果多个标签的id值相同，用id选择器时，只会选中第一个标签。这时可以通过属性选择器 $(“div[ id = h1 ]”)选中div标签里id为和h1的所有标签。
2）jquery、js中单引号和双引号的效果一样。但是在同一个语句中，单引号和双引号如果一起用，是不一样的意思。
例如在拼接内容时， ” “ 和 ‘ ’ 都要使用，不能只用一种。
例如：
arr = $("div[id = h" + x + "]"); // 拼接效果 arr = $("div[id = h1 ]");
em.innerHTML += "<div class='c_class'" + "id='c" + i + " ' " + "οnclick='look(this.id," + index + " );' >" + "</div>";// " "里面的内容是字符串，+ 拼接内容
//拼接效果：<div class='c_class' id='c数字i' οnclick='look(this.id,index);'></div><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d_class {
border: 2px solid black;
height: 50px;
width: 160px;
text-align: center;
background-color: aquamarine;
font-size: 18px;
padding: 0;
}
.h_class {
border: 1px solid #000000;
height: 30px;
width: 160px;
text-align: center;
background-color: #7FFFD4;
padding: 0;
font-size: 14px;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$("div[id=h1]").hide();
$("div[id=h2]").hide();
$("div[id=h3]").hide();
})
var first = 0;//记录上一次关闭的标签id
function text(x) {
if(first != x){//如果和上一次操作的标签不同，则要关闭上次的，直接hide。如果和上次操作的标签相同，不需要再hide，否则hide后再toggle，相当于没改变
j_udge();
}
first = x;
var arr = [];
arr = $("div[id = h" + x + "]");
arr.toggle();
}
function j_udge() {
$(".h_class").hide();
}
</script>
</head>
<body>
<!-- visble标签能查出来hide或者show的吗 -->
<!-- 标签的id值相同时，如果用id选择器选标签，只会取第一个标签的id -->
<div class="d_class" id="d1" onclick="text(1);">目录一</div>
<div class="h_class" id="h1">内容1</div>
<div class="h_class" id="h1">内容2</div>
<div class="h_class" id="h1">内容3</div>
<div class="d_class" id="d2" onclick="text(2);">目录二</div>
<div class="h_class" id="h2">内容1</div>
<div class="h_class" id="h2">内容2</div>
<div class="h_class" id="h2">内容3</div>
<div class="d_class" id="d3" onclick="text(3);">目录三</div>
<div class="h_class" id="h3">内容1</div>
<div class="h_class" id="h3">内容2</div>
<div class="h_class" id="h3">内容3</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
