用html做计算器eval,JavaScript制作简易计算器（不用eval）

本文实例为大家分享了js制作简易计算器的具体代码，供大家参考，具体内容如下

Title

* {

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;

}

简易计算

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;

}

}

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

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网