原生JS实现简易计算器
Posted OH-MY-GOD
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现简易计算器相关的知识，希望对你有一定的参考价值。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>简易计算器</title> <style> #div{ width: 300px; height: 500px; background: #ccc; margin: auto; border: 1px solid red; } table{ width: 97%; height: 480px; border: 1; align:center; cellspacing:"10" } td{ width: 26%; height: auto; border: 1px solid red; text-align: center; font-weight: bold; color: blue; } </style> <script> var tds = null; //定义一个空的全局对象 var jg = null, dy = null, tg = null; window.onload = function(){ //因为以后都是外部引用JS文件，因为程序加载执行顺序的问题，设置一个文档加载完成后调用方法的事件 tds = document.getElementsByTagName("td"); //找到所有的对象 jg = document.getElementById("jg"); dy = document.getElementById("dy"); tg = document.getElementById("tg"); addEvent(); //文档加载完成后调用这个方法 } function addEvent(){ for(var i = 0 ;i<tds.length;i++){ //循环下标用来找出所有的单元格 var zhi = tds[i].getAttribute("id"); //找出带id属性的单元格 if(zhi){ //当本次循环有带id属性的 continue; //那么跳过本次循环 } tds[i].onclick = function(){ //后给这个单元格添加点击事件并调用方法 jg.innerHTML += this.innerHTML; //此处用到字符串拼接的方法 每点击一次和上一次的字符串拼接（用来作为下边的计算） } } //给等于号添加点击事件 dy.onclick = function(){ //当点击等于号的时候 jg.innerHTML = eval(jg.innerHTML); //结果显示在HTML文档中并赋值（eval（）函数会将字符串转换为javascript代码执行） } //当点击退格的时候调用这个函数 tg.onclick = function(){ var str = jg.innerHTML; //找到在结果显示中的字符串 jg.innerHTML = str.substr(0,str.length-1); //赋值（substr()这个是字符串方法，用来截取（保留）从0到倒数第二个，也就是当每次点击的时候会退一格） } } </script> </head> <body> <!--在div里面创建一个表格用来作为计算器的按键使用--> <div id="div"> <!--这个id用来设置计算器面板的样式--> <table> <tr> <td colspan="3" id="jg"></td> <!--这里作为显示使用--> <td id="tg">退格</td> <!--加退格功能--> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> <td>/</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>+</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>-</td> </tr> <tr> <td>.</td> <td>0</td> <td id="dy">=</td> <!--准备给等于号单独设置点击事件并调用方法--> <td>*</td> </tr> </table> </div> </body> </html>
以上是关于原生JS实现简易计算器的主要内容，如果未能解决你的问题，请参考以下文章