==========================================================================================
计算器demo1:
<!DOCTYPE html>
<html>
<style>
div {
position: absolute;
background-color: cornflowerblue;
left: 30%;
top: 30%;
height: 50%;
width: 60%;
}
table {
width: 100%;
height: 100%;
border-color: black;
}
input {
position: absolute;
top: 5%;
left: 5%;
width: 85%;
height: 5%;
}
td {
cursor: pointer;
background-color: gold;
text-align: center;
}
</style>
<head>
<meta charset="utf-8" />
<title>计时器</title>
</head>
<body>
<script>
//自定义函数，实现数字或运算符的输入！
function inputother(str)
{
//获取输入框
var input = document.getElementById("i1");
//把输入框的value增加入参的字符串
input.value=input.value+str;
}
//自定义函数，实现等号的功能
function inputequaler()
{
var input = document.getElementById("i1");
input.value = eval(input.value);//通过eval方法计算当前输入内容。
}
</script>
<div>
<table border="1" cellspacing="10" cellpadding="2">
<tr>
<td colspan="4">
<input id="i1" value=""/></td>
</tr>
<tr>
<td onclick="inputother('1')">1</td>
<td onclick="inputother('2')">2</td>
<td onclick="inputother('3')">3</td>
<td onclick="inputother('+')">+</td>
</tr>
<tr>
<td onclick="inputother('4')">4</td>
<td onclick="inputother('5')">5</td>
<td onclick="inputother('6')">6</td>
<td onclick="inputother('-')">-</td>
</tr>
<tr>
<td onclick="inputother('7')">7</td>
<td onclick="inputother('8')">8</td>
<td onclick="inputother('9')">9</td>
<td onclick="inputother('*')">*</td>
</tr>
<tr>
<td onclick="inputother('0')">0</td>
<td onclick="inputother('.')">.</td>
<td onclick="inputequaler()">=</td>
<td onclick="inputother('/')">/</td>
</tr>
</table>
</div>
</body>
</html>
===========================================================================================
计算器：demo2
<!DOCTYPE html>
<html>
<style>
div {
position: absolute;
background-color: cornflowerblue;
left: 30%;
top: 30%;
height: 50%;
width: 60%;
}
table {
width: 100%;
height: 100%;
border-color: black;
}
input {
position: absolute;
top: 5%;
left: 5%;
width: 85%;
height: 5%;
}
td {
cursor: pointer;
background-color: gold;
text-align: center;
}
</style>
<head>
<meta charset="utf-8" />
<title>计时器</title>
</head>
<body>
<script>
var hasOperator = false; //是否已输入符号
var a1 = null; //第1个数
var a2 = null; //第2个数
var op = null;//当前的运算符号
//自定义函数，实现数字的输入！
function inputnumber(str)
{
//获取输入框
var input = document.getElementById("i1");
//把输入框的value增加入参的字符串
input.value=input.value+str;
}
//自定义函数，实现运算符号的输入
function inputoperator(str)
{
if(hasOperator) //如果符号已经输入，那么什么都不干
return;
//获取输入框
var input = document.getElementById("i1");
//如果输入框为空，且非-,则什么都不干
if(input.value=="")
{
if(str!="-")
return;
else //如果为空，且输入-号，此时与普通的数字一样
{
inputnumber("-");
return;
}
}
op = str;//记录当前的运算
//1 input的value转成a1
a1 = parseFloat(input.value);
//2 将input的value右边增加该符号
input.value=input.value+str;
//3 设置成已经拥有符号
hasOperator = true;
}
//自定义函数，实现等号的功能
function inputequaler()
{
var input = document.getElementById("i1");
//1 将a2转换出来
//获得符号位在字符串中的位置
var pos = input.value.indexOf(op);
//截取该位置往后的字符串,转成a2.
a2 = parseFloat(input.value.substr(pos+1,input.value.length-pos));
//2 根据当前的运算符号，计算结果
var result;
if(op=="+")
{
result = a1+a2;
}
else if (op=="-")
{
result = a1-a2;
}
else if (op=="*")
{
result = a1*a2;
}
else if (op=="/")
{
result = a1/a2;
}
//3 将input的value替换成该结果
input.value = result;
//4 重置全局变量状态
reset();
}
//重置变量的状态
function reset()
{
a1 = null;
a2 = null;
op = null;
hasOperator = false;
}
</script>
<div>
<table border="1" cellspacing="10" cellpadding="2">
<tr>
<td colspan="4">
<input id="i1" value=""/></td>
</tr>
<tr>
<td onclick="inputnumber('1')">1</td>
<td onclick="inputnumber('2')">2</td>
<td onclick="inputnumber('3')">3</td>
<td onclick="inputoperator('+')">+</td>
</tr>
<tr>
<td onclick="inputnumber('4')">4</td>
<td onclick="inputnumber('5')">5</td>
<td onclick="inputnumber('6')">6</td>
<td onclick="inputoperator('-')">-</td>
</tr>
<tr>
<td onclick="inputnumber('7')">7</td>
<td onclick="inputnumber('8')">8</td>
<td onclick="inputnumber('9')">9</td>
<td onclick="inputoperator('*')">*</td>
</tr>
<tr>
<td onclick="inputnumber('0')">0</td>
<td onclick="inputnumber('.')">.</td>
<td onclick="inputequaler()">=</td>
<td onclick="inputoperator('/')">/</td>
</tr>
</table>
</div>
</body>
</html>
==========================================================================================
计算器3：匿名函数绑定
<!DOCTYPE html>
<html>
<style>
div {
position: absolute;
background-color: cornflowerblue;
left: 30%;
top: 30%;
height: 50%;
width: 60%;
}
table {
width: 100%;
height: 100%;
border-color: black;
}
input {
position: absolute;
top: 5%;
left: 5%;
width: 85%;
height: 5%;
}
td {
cursor: pointer;
background-color: gold;
text-align: center;
}
</style>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//给计算器的按钮添加点击事件
function add_click_func()
{
//1 按标签名获取所有td的元素
var tds = document.getElementsByTagName("td");
//2 通过for循环，遍历该数组，逐个添加行为
for(var i=0;i<tds.length;i++)
{
//如果td标签的id不是first或equlizer，则添加点击行为
if (tds[i].id!="first"&&tds[i].id!="equlizer")
{
//绑定匿名函数，不允许入参！
tds[i].onclick = function()
{
//匿名函数中，允许通过this关键字，访问被绑定的本对象
//获取输入框
var input = document.getElementById("i1");
//当前按钮的文本，添加到输入框的value字符串中
input.value=input.value+this.innerText;
}
}
}
//3 绑定等号td的方法
var eq = document.getElementById("equlizer");
eq.onclick = function()
{
var input = document.getElementById("i1");
input.value = eval(input.value);//通过eval方法计算当前输入内容。
};
}
</script>
<body onload="add_click_func()"> <!--onload是当浏览器加载完html所有内容后，执行-->
<div>
<table border="1" cellspacing="10" cellpadding="2">
<tr>
<td colspan="4" id="first">
<input id="i1" value=""/></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr>
<td>0</td>
<td>.</td>
<td id="equlizer">=</td>
<td>/</td>
</tr>
</table>
</div>
</body>
</html>
================================================================================================
浙公网安备 33010602011771号