/*CSS样式*/
#calculate{
display: inline-block;
padding: 3px 7px 10px;
font-size: 14px;
line-height: 30px;
outline: none;
border-radius: 3px;
margin: 5px;
background-color: #31b0d5;
border: 1px solid #d2d2d2;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
#calculate #calculate_show{
position: relative;
width: 220px;
padding: 10px;
margin: 5px;
height: 80px;
background-color: #FFFFFF;
border-radius: 3px;
}
#calculate input[type='button']{
text-align: center;
cursor: pointer;
width: 40px;
height: 36px;
border-radius: 3px;
box-shadow: 0 4px rgba(0,0,0,0.2);
background-color: white;
border: transparent;
margin: 5px;
user-select: none;
transition: all 0.2s ease;
}
#calculate input[type='button']:hover{
background-color: #9c89f6;
box-shadow: 0 4px #6b54d3;
color: white;
}
#calculate input[type='text']{
font-size: 20px;
line-height: 40px;
text-align: right;
width: 100%;
height: 50%;
border: none;
outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计数器</title>
<link rel="stylesheet" href="calculate.css">
</head>
<body>
<div></div>
</body>
</html>
<script src="../jquery-3.1.0.min.js"></script>
<script src="calculate.js"></script>
<script>
$("div").calculate();
</script>
/*计算器JS插件*/
/**
* Created by Hack on 2017/2/7.
*/
// 创建插件
jQuery.fn.extend({
calculate : function () {
var calculate_html = load_calculate();
$(this).append(calculate_html);
}
});
// 加载计算器的按钮
function load_calculate(){
var cal_cli = ['7','8','9','←','C','4','5','6','×','÷','1','2','3','+','-','0','00','.','%','='];
var calculate_html = "<div id='calculate'><div id='calculate_show'><input type='text' id='show_one' readonly><br><input type='text' id='show_two' readonly></div>";
for(var i=0;i<cal_cli.length;i++){
if(i%5==0 && i!=0) calculate_html += "<br>";
calculate_html += "<input type='button' οnclick='click_num(this)' value='"+cal_cli[i]+"'>" ;
}
calculate_html += "</div>";
return calculate_html;
}
// 判断算法
var n_judge = 0;
// 判断点
var d_judge = 0;
// 计算按钮点击
function click_num(obj) {
var num = $("#show_two");
var show_num = $("#show_one");
// 等于
if(obj.value=="="){
show_num.val(num.val());
var transition_num = num.val().replace(/×/,'*').replace(/÷/,'/');
var judge =num.val().substr(0,1);
num.val(eval(transition_num));
}
// 清空
else if(obj.value=="C"){
num.val("");
show_num.val("");
}
// 删除
else if(obj.value=="←"){
num.val(num.val().substring(0,num.val().length-1));
}
// 加减乘除 百分比
else if(obj.value=="×" || obj.value=="÷" || obj.value=="+" || obj.value=="÷" || obj.value=="-" || obj.value=="%"){
if(n_judge==0){
num.val(num.val()+obj.value);
n_judge=1;
}else{
num.val(num.val().substring(0,num.val().length-1)+obj.value);
}
d_judge=0;
}
// 点
else if(obj.value=="."){
if(d_judge==0){
num.val(num.val()+obj.value);
d_judge=1;
}
}
// 数字
else{
n_judge = 0;
num.val(num.val()+obj.value)
}
}