js简单计算机方法有哪些,JS快速实现简单计算器

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

直接上图

HTML部分

我的第一个计算器

欢迎使用

---

输入不要超过8位数哦

制作人:xxx    监督人:xxx

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.");

}

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

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