本文实例为大家分享了JS实现简单计算器的具体代码，供大家参考，具体内容如下
直接上图
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个计算器</title> <link rel="stylesheet" href="计算器.css" rel="external nofollow" /> <script src="/UploadFiles/2021-04-02/计算器.js">CSS部分
* { margin: 0px; padding: 0px; } /*body { background: cornflowerblue; }*/ .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."); }更多计算器功能实现，请点击专题： 计算器功能汇总 进行学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。