JS快速实现简单计算器

时间：2021-05-26

本文实例为大家分享了JS实现简单计算器的具体代码，供大家参考，具体内容如下

直接上图

HTML部分

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>我的第一个计算器</title> <link rel="stylesheet" href="计算器.css" rel="external nofollow" /> <script src="计算器.js"> </script> </head> <body> <h1 style="text-align: center;">欢迎使用</h1> <!--<audio src="audio/1.mp3" id="music"> </audio>--> <hr /> <p style="text-align: center;color:#6495ED;">输入不要超过8位数哦</p> <div class="box"> <div class="header"> <div class="screen"><b id="s1"></b></div> <div class="screen"><b id="s2"></b></div> </div> <div class="content"> <input type="button" name="" id="start" value="开始" /> <input type="button" name="" id="clear" value="清零" /> <input type="button" name="" id="del" value="删除" /> <input type="button" name="" id="stop" value="关闭" /> <input type="button" name="" id="b1" value="1" /> <input type="button" name="" id="b2" value="2" /> <input type="button" name="" id="b3" value="3" /> <input type="button" name="" id="b+" value="+" /> <input type="button" name="" id="b4" value="4" /> <input type="button" name="" id="b5" value="5" /> <input type="button" name="" id="b6" value="6" /> <input type="button" name="" id="b-" value="-" /> <input type="button" name="" id="b7" value="7" /> <input type="button" name="" id="b8" value="8" /> <input type="button" name="" id="b9" value="9" /> <input type="button" name="" id="bx" value="*" /> <input type="button" name="" id="b0" value="0" /> <input type="button" name="" id="b." value="." /> <input type="button" name="" id="b=" value="=" /> <input type="button" name="" id="b÷" value="÷" /> <span style="line-height: 30px;"> 制作人:xxx &nbsp;&nbsp;&nbsp;监督人:xxx </span> </div> </div> </body></html>

CSS部分

* { margin: 0px; padding: 0px;}.box { width: 260px; height: 330px; border: 5px solid cornflowerblue; margin: 60px auto; border-radius: 10px;}.header { width: 260px; height: 80px; background:lightcyan;}.screen { width: 260px; height: 40px; background:lightcyan; font-size: 25px; text-align: center;}.content { width: 260px; height: 250px; color: yellowgreen; background: #FAEBD7; text-align: center;}input { text-align: center; width: 60px; height: 40px; background: pink; margin-top: 4px; font-size: 15px;}b { color: fuchsia;}

JS部分

window.onload = function() { function $(id) { return document.getElementById(id); } function put1(id){ $(id).onclick = function() { $("s1").innerHTML = $("s1").innerHTML+this.value; if ($("s1").innerHTML==116) { prompt("你爱我吗"); $("s1").innerHTML = "嘻嘻" } if ($("s1").innerHTML==1129) { alert("我爱你"); } if ($("s1").innerHTML==1314520) { alert("我爱你"); } } } var result; $("b=").onclick = function() { result = eval($("s1").innerHTML); $("s2").innerHTML = "="+result; } $("start").onclick = function() { $("s1").innerHTML = "欢迎使用"; $("s2").innerHTML = "使用前清零"; $("music").play(); } $("clear").onclick = function() { $("s1").innerHTML = ""; $("s2").innerHTML = ""; } $("stop").onclick = function() { $("s1").innerHTML = "再见"; setTimeout(function() { $("s1").innerHTML = ""; $("s2").innerHTML = ""; },3000); $("music").pause(); } $("del").onclick = function() { $("s1").innerHTML = $("s1").innerHTML.substr(0, $("s1").innerHTML.length - 1); } put1("b1"); put1("b2"); put1("b3"); put1("b4"); put1("b5"); put1("b6"); put1("b7"); put1("b8"); put1("b9"); put1("b0"); put1("b+"); put1("b-"); put1("bx"); put1("b÷"); put1("b.");}

更多计算器功能实现，请点击专题： 计算器功能汇总 进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章