A HTML四个小例子（计算器、复利计算器、消消乐、目录手风琴）

一 .复利计算器
效果图

遇到的问题：
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><!-- 控制台debugf10继续下一行--蓝色的按钮（或者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~c9var first_index = 0; //1~5function 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-imagevar 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;//记录上一次关闭的标签idfunction 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>

A HTML四个小例子（计算器、复利计算器、消消乐、目录手风琴）相关推荐

计算收益复利的小例子
一个计算收益复利的小例子, 用c语言简单编程, 如 test 30 20 40: 30以万为单位,20是年收益百分比,40是年数. #include <stdio.h> #include ...
【Python基础】告别枯燥，60 秒学会一个 Python 小例子（文末下载）
本文推荐一个python的傻瓜式的学习资源,内容简单易懂,让人可以在60 秒学会一个 Python 小例子当前库已有 300多个实用的小例子本文来源:https://github.com/jac ...
python 真多线程_Python之路200个小例子，在线网页版来了，从此学习更方便！
历史两个月,利用所有业余时间,与朋友一起搜集.创作Python小例子,截止目前已超过200个例子,全新整合汇总为九大章节: 感受Python之美 | 一.Python基础 | 二.Python字符串和 ...
这42个Python小例子，太走心~
告别枯燥,60秒学会一个Python小例子.奔着此出发点,我在过去1个月,将平时经常使用的代码段换为小例子,分享出来后受到大家的喜欢. 一.基本操作 1 链式比较 . i = 3 print(1 &l ...
有趣的python代码实例_Python之路：200个Python有趣的小例子一网打尽
概述博主最近在学习python,看完了一整套学习视频,然后呃呃呃,还是用不太流畅.碰巧在全球最大的同性交友论坛GayHub(呸!是开源代码托管平台Github)上面发现了一个项目,该项目列举了20 ...
python operator 多属性排序_Python之路200个小例子网页版，真诚奉献，从一而终！...
历史两个月,利用所有业余时间,与朋友一起搜集.创作Python小例子,截止目前已超过200个例子,全新整合汇总为九大章节: 感受Python之美 | 一.Python基础 | 二.Python字符串和 ...
42个Python实用小例子[内附200+代码地址]
经常有同学苦恼,学了python基础之后找不到合适的练手机会.为此,有位热心人创建了一个项目,搜集整理了一堆实用的python代码小例子.这些小例子包括但不限于:Python基础.Web开发.数据科学 ...
j2me手机游戏结构分析和实际小例子系列一游戏背景和游戏精灵
j2me手机游戏结构分析和实际小例子一这段时间一直在忙java的事情,一直在学习用j2me做手机游戏.虽然说我是.net开发人员,但是java语言在很多地方上确实有用于c#的地方(我 ...
五个小例子教你搞懂 JavaScript 作用域问题
原文:五个小例子教你搞懂 JavaScript 作用域问题众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅 ...

A HTML四个小例子（计算器、复利计算器、消消乐、目录手风琴）

A HTML四个小例子（计算器、复利计算器、消消乐、目录手风琴）相关推荐

最新文章

热门文章