<!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实现简易计算器
原文地址：https://www.cnblogs.com/lsqbk/p/10258978.html