这篇文章主要为大家详细介绍了 JavaScript 制作简易计算器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style type="text/CSS">
- * {
- padding: 0;
- margin: 0;
- }
- li {
- list-style: none;
- }
- body {
- background: #940032;
- }
- #counter {
- width: 500px;
- height: 420px;
- background: #939;
- margin: 50px auto 0;
- position: relative;
- }
- #counter h2 {
- line-height: 42px;
- padding-left: 15px;
- font-size: 14px;
- font-family: arial;
- color: #ff3333;
- }
- #counter a {
- font-weight: normal;
- text-decoration: none;
- color: #ff3333;
- }
- #counter a:hover {
- text-decoration: underline;
- }
- #bg {
- width: 280px;
- height: 200px;
- border: 3px solid #680023;
- background: #990033;
- filter: alpha(opacity=80);
- opacity: 0.8;
- position: absolute;
- left: 50%;
- top: 115px;
- margin-left: -141px;
- }
- #counter_content {
- width: 250px;
- position: absolute;
- top: 130px;
- left: 130px;
- z-index: 1;
- }
- #counter_content h3 {
- margin-bottom: 10px;
- }
- #counter_content h3 input {
- border: none;
- width: 223px;
- height: 30px;
- line-height: 30px;
- padding: 0 10px;
- background: url(img/ico.png) no-repeat;
- text-align: right;
- color: #333;
- font-size: 14px;
- font-weight: bold;
- }
- #counter_content div {
- width: 250px;
- }
- #counter_content input {
- width: 60px;
- height: 30px;
- line-height: 30px;
- float: left;
- background: url(img/ico.png) no-repeat -303px 0;
- text-align: center;
- color: #fff;
- cursor: pointer;
- margin: 0 1px 4px 0;
- border: 0;
- }
- #counter_content div > input:hover {
- background: url(img/ico.png) no-repeat -243px 0;
- }
- #counter p {
- width: 500px;
- position: absolute;
- bottom: 20px;
- left: 0;
- color: #ff3333;
- text-align: center;
- font-size: 12px;
- }
- </style>
- </head>
- <body>
- <div id="counter">
- <h2>简易计算</h2>
- <div id="counter_content">
- <h3><input id="input1" type="text" value="0"/></h3>
- <div id="div1">
- <input type="button" value="7" onclick="kick('7')"/>
- <input type="button" value="8" onclick="kick('8')"/>
- <input type="button" value="9" onclick="kick('9')"/>
- <input type="button" value="+" onclick="kick('+')"/>
- <input type="button" value="4" onclick="kick('4')"/>
- <input type="button" value="5" onclick="kick('5')"/>
- <input type="button" value="6" onclick="kick('6')"/>
- <input type="button" value="-" onclick="kick('-')"/>
- <input type="button" value="1" onclick="kick('1')"/>
- <input type="button" value="2" onclick="kick('2')"/>
- <input type="button" value="3" onclick="kick('3')"/>
- <input type="button" value="*" onclick="kick('*')"/>
- <input type="button" value="0" onclick="kick('0')"/>
- <input type="button" value="C" onclick="kick('C')"/>
- <input type="button" value="=" onclick="kick('=')"/>
- <input type="button" value="/" onclick="kick('/')"/>
- </div>
- </div>
- </div>
- </body>
- <script>
- var showInput = document.getElementById("input1");
- var isClear = false;
- var tempStr = "";
- var clacType = "";
- var isContinue = true;
- function kick(clickValue) {
- switch (clickValue) {
- case "=":
- if (tempStr != "" && clacType != "") {
- showInput.value = clac(tempStr, showInput.value, clacType);
- isContinue = false;
- clacType = "";
- }
- break;
- case "+":
- case "-":
- case "*":
- case "/":
- //如果预存的操作符不为空 表示表示连续操作
- if (clacType != "" && !isContinue) { //先执行计算
- tempStr = clac(tempStr, showInput.value, clacType);
- isClear = true;
- clacType = clickValue;
- } else {
- tempStr = showInput.value; //点击操作符之后 预存字符
- isClear = true;//表示点击了操作符
- clacType = clickValue;//预存操作符
- }
- isContinue = true;
- break;
- case "C":
- showInput.value = "0";
- isClear = false;
- tempStr = "";
- clacType = "";
- break;
- default://普通的数字按钮点击
- showInput.value = showInput.value == "0" ? "" : showInput.value;
- isContinue = false;
- if (isClear) {
- showInput.value = "";
- showInput.value += clickValue;
- isClear = false;
- } else {
- showInput.value += clickValue;
- }
- break;
- }
- }
- function clac(num1, num2, type) {
- switch (type) {
- case "+":
- return Number(num1) + Number(num2);
- case "-":
- return Number(num1) - Number(num2);
- case "*":
- return Number(num1) * Number(num2);
- case "/":
- return Number(num1) / Number(num2);
- default:
- break;
- }
- }
- </script>
来源: http://www.phperz.com/article/17/0617/328025.html