利用HTML+JS+CSS实现简单的网页计算器，附html所有源代码，可直接黏贴运行
最终实现的效果图
源码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Calculator</title> </head> <style> *{ font-size:36px;} #t{ width:480px; height:80px; text-align: right; font-size: 48px; background-color: #F9F0DA; } .number{ width:120px; height:80px; background-color:#B46381; margin: 0; display: block; } .signs{ width:120px; height:80px; background-color: #A3D0C3; margin: 0; display: block; } .shaw{ width:120px; height:80px; background-color: #DABB52; margin: 0; display: block; } .equal{ width:120px; height:80px; background-color: #F15B42; margin: 0; display: block; } .kuohao{ width: 60px; height: 80px; float: left; align-self: 0; background-color: #DABB52; } table td,table th{ border:1px solid #cad9ea; } table tr:nth-child(odd){ background: #fff; } </style> <script> //设置标志，用于没有输入时显示0，以及有显示时清空 var flag=true; function func(str){ var t=document.getElementById("t"); if(flag){ //清除没有输入时的0 t.value=""; } //改变状态，不再清空内容 flag=false; //将之前的内容和输入的内容相加，重新显示 t.value=t.value+str; } //回退一个数，相当于撤销 function backspace(){ var t=document.getElementById("t"); t.value=t.value.substr(0,t.value.length-1); } //清空显示内容 function AC(){ var t=document.getElementById("t"); //显示0 t.value="0"; //让下次输入可以清空0 flag=true; } //计算结果 function equals(){ var t=document.getElementById("t"); //将字符串转换为逻辑运算 t.value=eval(t.value); } </script> <body> <!-- 内边距 外边距 边框 居中--> <table cellpadding="0" cellspacing="0" border="0" align="center" > <tr><td colspan="4"><input type="text" value="0" id="t" /></td> </tr> <tr> <td><input type="button" class="number" value="7" onClick="func('7')"/></td> <td><input type="button" class="number" value="8" onClick="func('8')"/></td> <td><input type="button" class="number" value="9" onClick="func('9')"/></td> <td><input type="button" class="signs" value="/" onClick="func('/')"/></td> </tr> <tr> <td><input type="button" class="number" value="4" onClick="func('4')"/></td> <td><input type="button" class="number" value="5" onClick="func('5')"/></td> <td><input type="button" class="number" value="6" onClick="func('6')"/></td> <td><input type="button" class="signs" value="*" onClick="func('*')"/></td> </tr> <tr> <td><input type="button" class="number" value="1" onClick="func('1')"/></td> <td><input type="button" class="number" value="2" onClick="func('2')"/></td> <td><input type="button" class="number" value="3" onClick="func('3')"/></td> <td><input type="button" class="signs" value="-" onClick="func('-')"/></td> </tr> <tr> <td><input type="button" class="number" value="0" onClick="func('0')"/></td> <td><input type="button" class="shaw" value="." onClick="func('.')"/></td> <td><input type="button" class="number" value="00" onClick="func('00')"/></td> <td><input type="button" class="signs" value="+" onClick="func('+')"/></td> </tr><tr> <td> <input type="button" class="kuohao" value="(" onClick="func('(')"/> <input type="button" class="kuohao" value=")" onClick="func(')')"/> </td> <td><input type="button" class="shaw" value="后退" style="float:top" onClick="backspace()"/></td> <td> <input type="button" class="shaw" value="清除" onClick="AC()"/> </td><td rowspan="2"><input type="button" value="=" class="equal" onClick="equals()"/></td> </tr> </table> </body> </html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148相关知识
制作一个简单HTML宠物猫网页（HTML+CSS）
静态网页设计——HTML做一个简单漂亮的宠物网页（纯html代码）
HTML做一个简单漂亮的宠物网页（纯html代码）
一个简单的网页制作作业，宠物html静态网页制作成品代码(学生网页设计作业源码)
【web前端期末大作业】简单HTML宠物猫网页（HTML+CSS）
【html网页设计】
Html+CSS+Javascript实现的一个很炫个人主页网页
基于html宠物用品商城项目的设计与实现(学生网页设计作业源码)
猫咪网 宠物动物 网页设计 html源码 大作业
分享15个精美的html网页模板，快速建站必备 ！
网址: 利用HTML+JS+CSS实现简单的网页计算器，附html所有源代码，可直接黏贴运行 https://m.mcbbbk.com/newsview464714.html
| 上一篇: 基于QT5实现的最基本的象棋游戏 |
下一篇: 如何看懂喜欢”宠物“的男人 |
