javascript深入学习-DOM取参绑定事件-按钮计算器
来源：互联网 发布：mac远程桌面win10 编辑：程序博客网 时间：2024/06/10 12:13
在入门框架之前深入学习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" onclick="onclicknum(1)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="1">
</div>
</td>
<td width="49" onclick="onclicknum(2)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="2">
</div>
</td>
<td width="45" onclick="onclicknum(3)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="3">
</div>
</td>
<td width="28" id="runway" onclick="onclicknum('+')">
<div align="center">
<input type="button" value="+">
</div>
</td>
<td width="28" id="runway" onclick="onclicknum('*')">
<div align="center">
<input type="button" value="*">
</div>
</td>
</tr>
<tr>
<td height="33" onclick="onclicknum(4)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="4">
</div>
</td>
<td onclick="onclicknum(5)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="5">
</div>
</td>
<td onclick="onclicknum(6)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="6">
</div>
</td>
<td id="runway" onclick="onclicknum('-')">
<div align="center">
<input type="button" value="-">
</div>
</td>
<td id="runway" onclick="onclicknum('/')">
<div align="center">
<input type="button" value="/">
</div>
</td>
</tr>
<tr>
<td onclick="onclicknum(7)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="7">
</div>
</td>
<td onclick="onclicknum(8)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="8">
</div>
</td>
<td onclick="onclicknum(9)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="9">
</div>
</td>
<td onclick="triangle('sin')" id="triangle">
<div align="center">
<input type="button" value="sin" id="triangle">
</div>
</td>
<td onclick="triangle('cos')" id="triangle">
<div align="center">
<input type="button" value="cos" id="triangle">
</div>
</td>
</tr>
<tr>
<td onclick="onclicknum(0)" bgcolor="#FFFF77">
<div align="center">
<input type="button" value="0">
</div>
</td>
<td onclick="onclickclear()">
<div align="center">
<input type="button" value="clear" id="clear">
</div>
</td>
<td onclick="onclicknum('.')" bgcolor="#FFFF77">
<div align="center">
<input type="button" value=".">
</div>
</td>
<td onclick="triangle('tan')">
<div align="center">
<input type="button" value="tan" id="triangle">
</div>
</td>
<td id="equal" onclick="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;
}
- javascript深入学习-DOM取参绑定事件-按钮计算器
- JavaScript:按钮事件动态绑定
- javascript计算器之DOM事件模型-----浏览器兼容问题
- JavaScript学习13：事件绑定
- javascript基础：事件4事件绑定及深入
- 2014年辛星解读Javascript之DOM之事件及其绑定
- 2014年辛星解读Javascript之DOM之事件绑定
- 新dom 事件绑定
- DOM—事件绑定
- DOM事件绑定
- DOM绑定事件处理器
- asp.net为按钮绑定javascript确认事件
- javascript动态生成按钮并绑定点击事件
- JavaScript学习笔记之DOM事件句柄
- JavaScript学习之操作DOM事件
- 按钮绑定回车事件
- 动态绑定按钮事件
- 按钮绑定回车事件
- Pythagorean Theorem II
- 吐血整合！ Ubuntu 14.04+cuda8.0+opencv3.1+matlab2015b+caffe
- Linux下安装tensorflow库
- JAVA中几种常用的RPC框架介绍
- 五种常见设计模式
- javascript深入学习-DOM取参绑定事件-按钮计算器
- POJ-3191（负进制）
- Linux内核源码分析方法
- Javascript基础（三）之运算符、函数
- javascript 基础 导航高亮
- 连续出现的字符
- rabbit集群
- HDU 1698 Just a Hook （线段树区间更新）
- ThinkPHP 学习笔记 3-4.输出和模型使用
