您的位置：首页 > 其它

网页版的计算器，支持键盘输入，支持删除，按键发亮

2015-08-06 18:05 363 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8"/>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<title>网页计算器</title>



<style id="jsbin-css">

body{

text-align:center;

}

#caculator{

width:325px;

margin:50px auto;

background-color:#9AD1EA;

}

.print{

width:301px;

background:#999;

text-align:right;

margin:0 5px 10px 8px;

box-shadow:inset 0 4px 5px #333;

min-height:40px;

word-wrap:break-word;

word-break:break-all;

height:auto;

}

.add{

height :90px;

float:right;

margin-right:13px;

line-height:90px;

}

#zero{

width:146px;

}

span{

width:66px;

height:40px;

background:#eee;

margin:0 5px 10px 8px;

text-align:center;

line-height:40px;

float:left;

box-shadow:0 5px 1px #999;

cursor:pointer;

border-radius:3px;

}

span:hover{

background:#87cefa;

box-shadow:0 5px 1px #1e90ff;

color:#fff;

}

.hover{

background:#87cefa;

box-shadow:0 5px 1px #1e90ff;

color:#fff;

}

.bottomText{

text-align:left;

}

</style>

</head>

<body>

<div id="caculator">

<span class="print"></span>

<span class="clear">C</span> <span class="fn" id="chu">/</span> <span class="fn" id="cheng">*</span> <span class="fn" id="jian">-</span>

<span class="number">7</span><span class="number">8</span><span class="number">9</span><span class="fn add" id="jia">+</span>

<span class="number">4</span><span class="number">5</span><span class="number">6</span>

<span class="number">1</span><span class="number">2</span><span class="number">3</span><span class="add" id="confirm">确定</span>

<span class="number" id="zero">0</span><span class="number" id="point">.</span>

<div class="bottomText">此计算器支持使用键盘输入数字以及计算符号、支持backspace删除输入的最后一个字符、回车键清除所有输入</div>

</div>

</body>

<script>

var lastIsFn = true;//标记，用来标记最后一个字符是否是运算符，如果是运算符则不允许往后面直接添加运算符

$(document).ready(function(){

//号码的点击

$(".number").click(function(){

var content = $(".print").html();

if($(this).attr("id") == "point"){//点号

if(content.indexOf(".") >= 0){

return ;

}

printCaculate(".",true);

lastIsFn = true;

return ;

}

$(".print").html(content+$(this).html());

lastIsFn = false;

});

$(".fn").click(function(){//运算符的点击

var content = $(".print").html();

if(lastIsFn){//上一个是符号

return ;

}

printCaculate($(this).html(),true);

lastIsFn = true;

});

$("#confirm").click(function(){//等号的点击

var content = $(".print").html();

printCaculate(eval(content),false);

});

$(".clear").click(function(){

$(".print").html("");

});

//添加内容，参数;1.需要添加的内容2.是否在原内容后添加

function printCaculate(content,isAddToEnd){

var oldcontent = $(".print").html();

if(isAddToEnd){

$(".print").html(oldcontent+content);

}else{

$(".print").html(content);

}

}

});

//键盘监听

$(window).keydown(function(event){

var number = event.keyCode - 48;

if(0 <= number <= 9){

$(".number:contains('"+number+"')").trigger("click");

lightTheKey($(".number:contains('"+number+"')"));

}

number = event.keyCode - 96;

if(0 <= number <= 9){

$(".number:contains('"+number+"')").trigger("click");

lightTheKey($(".number:contains('"+number+"')"));

}

switch(event.keyCode) {

case 32:{

$(".clear").trigger("click");

lightTheKey($(".clear"));

break;

}

case 61:{

if(event.shiftKey){

$("#jia").trigger("click");

lightTheKey($("#jia"));

break;

}else{

$("#jian").trigger("click");

lightTheKey($("#jian"));

break;

}

}

case 53:{

if(event.shiftKey){

$("#chu").trigger("click");

lightTheKey($("#chu"));

}

break;

}

case 173:{

$("#jian").trigger("click");

lightTheKey($("#jian"));

break;

}

case 56:{

if(event.shiftKey){

$("#cheng").trigger("click");

lightTheKey($("#cheng"));

}

break;

}

case 106 :{

$("#cheng").trigger("click");

lightTheKey($("#cheng"));

break;

}

case 107 :{

$("#jia").trigger("click");

lightTheKey($("#jia"));

break;

}

case 13 :{

$("#confirm").trigger("click");

lightTheKey($("#confirm"));

break;

}

case 109 :{

$("#jian").trigger("click");

lightTheKey($("#jian"));

break;

}

case 110 :{

$(".number:contains('.')").trigger("click");

lightTheKey($(".number:contains('.')"));

break;

}

case 111 :{

$("#chu").trigger("click");

lightTheKey($("#chu"));

break;

}

case 8 :{

deleteLast();

break;

}

}

});

//删除最后一个字符

function deleteLast(){

var content = $(".print").html();

var last = content.charAt(content.length-1);

if(last =="+" ||

last =="-" ||

last =="*" ||

last =="/" ||

last =="."

){

lastIsFn = false;

}

$(".print").html(content.substr(0,content.length-1));

}

//按下按键式对应的span发亮

function lightTheKey(e){

$(e).addClass("hover");

setTimeout(function(){

$(e).removeClass("hover");

},90);

}

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航