首页 > 代码库 > js---计算器
js---计算器
========================================================================================== 计算器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=http://www.mamicode.com/input.value+str;"i1"); input.value = http://www.mamicode.com/eval(input.value);//通过eval方法计算当前输入内容。"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=http://www.mamicode.com/input.value+str;"i1"); //如果输入框为空,且非-,则什么都不干 if(input.valuehttp://www.mamicode.com/=="") { if(str!="-") return; else //如果为空,且输入-号,此时与普通的数字一样 { inputnumber("-"); return; } } op = str;//记录当前的运算 //1 input的value转成a1 a1 = parseFloat(input.value); //2 将input的value右边增加该符号 input.value=http://www.mamicode.com/input.value+str;"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 = http://www.mamicode.com/result;"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=http://www.mamicode.com/input.value+this.innerText;"equlizer"); eq.onclick = function() { var input = document.getElementById("i1"); input.value = http://www.mamicode.com/eval(input.value);//通过eval方法计算当前输入内容。"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> ================================================================================================
js---计算器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。