HTML部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个计算器</title> <link href="https://www.jb51.net/计算器.css" /> <script src="https://www.jb51.net/计算器.js"> </script> </head> <body> <h1>欢迎使用</h1> <!--<audio src="https://www.jb51.net/audio/1.mp3"> </audio>--> <hr /> <p>输入不要超过8位数哦</p> <div> <div> <div><b></b></div> <div><b></b></div> </div> <div> <input type="button" value="开始" /> <input type="button" value="清零" /> <input type="button" value="删除" /> <input type="button" value="关闭" /> <input type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <input type="button" value="+" /> <input type="button" value="4" /> <input type="button" value="5" /> <input type="button" value="6" /> <input type="button" value="-" /> <input type="button" value="7" /> <input type="button" value="8" /> <input type="button" value="9" /> <input type="button" value="*" /> <input type="button" value="0" /> <input type="button" value="." /> <input type="button" value="=" /> <input type="button" value="÷" /> <span> 制作人:xxx 监督人:xxx </span> </div> </div> </body> </html>
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."); }