在入门框架之前深入学习Javascript,巩固一下前面学过的知识,利用html,css,js做了一个简易的计算器。主要为巩固前端基础和熟悉dom取参和dom的事件绑定。
功能简单,但是对我自己巩固基础有帮助,看到的大牛们不要嫌弃小弟水平,也欢迎您给点宝贵意见。
domCulculater下有js文件夹和stylesheet文件夹和domCulculater.html。js文件夹下有domCulculater.js,用以存放javascript.stylesheet文件夹下有domCulculater.css,用以存放CSS.
随笔:1.思路-》基本功能-》完善-》美化
2.提取js做单独文件
3.相同点击事件绑定多个元素,仅一个相应,尽量避免,师兄说用jquey可以解决,好期待,加油学习吧
4尽量减少重复性代码,变量名与函数名也不要冲突
一.domCulculater.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>culculater</title>
<link rel="stylesheet" type="text/css" href="./stylesheet/DomCulculater.css">
</head>
<body>
<p id="tips">tips:</p>
<p id="tips">1本程序加减乘除运算正常输入,再按=即可。</p>
<p id="tips">2三角函数计算为绿色通道,先按数字,再按下三角函数方法即可得到结果。</p>
<p id="tips">3默认三角函数为角度计算:输入30,按sin即得0.5</p>
<table width="226" border="1" id="table" class="tableBorder">
<tr>
<td colspan="5">
<div align="center">
<input name="" type="text" id="numDisplay" />
</div>
</td>
</tr>
<tr>
<td width="42" οnclick="onclicknum(1)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="1">
</div>
</td>
<td width="49" οnclick="onclicknum(2)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="2">
</div>
</td>
<td width="45" οnclick="onclicknum(3)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="3">
</div>
</td>
<td width="28" id="runway" οnclick="onclicknum('+')">
<div align="center">
<input type="button" value="+">
</div>
</td>
<td width="28" id="runway" οnclick="onclicknum('*')">
<div align="center">
<input type="button" value="*">
</div>
</td>
</tr>
<tr>
<td height="33" οnclick="onclicknum(4)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="4">
</div>
</td>
<td οnclick="onclicknum(5)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="5">
</div>
</td>
<td οnclick="onclicknum(6)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="6">
</div>
</td>
<td id="runway" οnclick="onclicknum('-')">
<div align="center">
<input type="button" value="-">
</div>
</td>
<td id="runway" οnclick="onclicknum('/')">
<div align="center">
<input type="button" value="/">
</div>
</td>
</tr>
<tr>
<td οnclick="onclicknum(7)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="7">
</div>
</td>
<td οnclick="onclicknum(8)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="8">
</div>
</td>
<td οnclick="onclicknum(9)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="9">
</div>
</td>
<td οnclick="triangle('sin')" id="triangle">
<div align="center">
<input type="button" value="sin" id="triangle">
</div>
</td>
<td οnclick="triangle('cos')" id="triangle">
<div align="center">
<input type="button" value="cos" id="triangle">
</div>
</td>
</tr>
<tr>
<td οnclick="onclicknum(0)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="0">
</div>
</td>
<td οnclick="onclickclear()">
<div align="center">
<input type="button" value="clear" id="clear">
</div>
</td>
<td οnclick="onclicknum('.')" bgcolor="#FFFF77">
<div align="center">
<input type="button" value=".">
</div>
</td>
<td οnclick="triangle('tan')">
<div align="center">
<input type="button" value="tan" id="triangle">
</div>
</td>
<td id="equal" οnclick="getResult()">
<div align="center">
<input type="button" value="=">
</div>
</td>
</tr>
</table>
<p> </p>
<script language="javascript" type="text/javascript" src="./js/DomCulculater.js"></script>
</body>
</html>
二.domCulculater.js
var str, result;
var flag = 0;
/*点击数字或运算符时的绑定事件。根据点击=时绑定的getResult()传入的flag,
flag=0时取显示内容与点击传入的num相加.
flag=1时判断传入的num是否为加减乘除之一,真:取显示内容与点击传入的num相加,并使flag=0.
假:清屏,使flag=0,递归调用onclicknum(nums),避免二次运算参数与第一次运算结果相加。
三角函数与加减乘除flag同理
*/
function onclicknum(nums) {
if (flag == 0) {
str = document.getElementById("numDisplay");
str.value = str.value + nums;
} else {
if (nums == '+' || nums == '-' || nums == '*' || nums == '/') {
str = document.getElementById("numDisplay");
str.value = str.value + nums;
flag = 0;
} else {
onclickclear();
flag = 0;
onclicknum(nums);
}
}
}
//点击clear的事件
function onclickclear() {
str = document.getElementById("numDisplay");
str.value = "";
}
//点击=时的绑定事件
function getResult() {
str = document.getElementById("numDisplay");
result = eval(str.value);
if (result == Infinity) {
alert("除数不能为零");
str.value = "";
} else {
str.value = result;
}
flag = 1;
}
//点击sin/cos/tan的绑定事件
function triangle(ways) {
if (flag == 0) {
var a;
switch (ways) {
case 'sin':
str = document.getElementById("numDisplay");
a = Math.sin(str.value / 180 * Math.PI);
str.value = ways + str.value + "=" + a;
flag = 1;
break;
case 'cos':
str = document.getElementById("numDisplay");
a = Math.cos(str.value / 180 * Math.PI);
str.value = ways + str.value + "=" + a;
flag = 1;
break;
case 'tan':
str = document.getElementById("numDisplay");
a = Math.tan(str.value / 180 * Math.PI);
str.value = ways + str.value + "=" + a;
flag = 1;
break;
}
}
}
二.domCulculater.css
table {
border-collapse: collapse;
}
.tableBorder {
border: 3px solid #99FF33;
}
#triangle {
color: 00EE00;
}
#numDisplay {
font-family: "楷体";
font-size: 20px;
}
#clear {
color: EE0000;
}
#tips {
font-family: "华文行楷";
font-size: 20px;
}
#num {
background-color: FFFF77;
}
div {
color: EE0000;
}
table td:hover {
background-color: #00FFFF;
}