<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Calc </title>
<meta name="title" content="" />
<meta name="author" content="
http://0xs.cn" />
<meta name="subject" content="" />
<meta name="language" content="zh-cn" />
<meta name="keywords" content="" />
<style type="text/css" >
/* default css rule */
body { font: 12px "Verdana, 宋体"; }
.cl { clear:both; }
#calc_box { height:550px; width:390px; background:#ddd; border:1px solid #aaa;}
#calc_bar { text-align:center; font-weight:bold; margin: 4px 0; color:#999; }
#iptCalc { margin:0 5px;padding: 8px 0 0 5px; width:372px; height:25px; font-size:15px;color:#699; background:#cef;border-top:2px solid #eee;border-left:2px solid #eee; border-right:2px solid #ccc;border-bottom:2px solid #ccc; }
#output { width:369px; height:370px; margin:0 5px; padding:5px; color:#999; border:1px solid #ccc; overflow:auto; background:#fff;}
#pannel { width:369px; height:82px; margin:0 5px; padding:8px 5px; background:#eee; border:1px solid #ccc; -moz-user-select:none;-webkit-user-select:none; }
#pannel a { display:block; font-size:18px; font-weight:bold; margin:2px;width:30px;*width:31px;height:26px; float:left; text-align:center; text-decoration:none;padding-top:5px; border:1px solid #eee; background:#fff; color:#666;outline:none; }
#pannel a:hover { border:1px solid #ee0;background:#ffc; }
.exp { color:#f90; font-weight:bold;}
.spliter { border:1px dotted #eee; }
.err { color:#f99; }
</style>
<script type="text/javascript" >
// shortcut
function $(s){
return typeof s == 'object'?s:document.getElementById(s);
}
// do calc
function Calc(sCalc){
sCalc = sCalc.replace(/[^0-9\+\–\-\×\÷\(\\*\/\.)]/g,'').replace(/^([^0-9]\()/,"1$1");
sCalc = sCalc.replace(/\×/g,'*').replace(/\÷/g,'/').replace(/–/g,'-');
$('iptCalc').value = sCalc;
if(!sCalc){
return;
}
try{
var result = eval(sCalc);
}catch(e){
$('output').innerHTML += '<span class="err">请输入正确的算式！</span> ' + sCalc + ' <hr class="spliter" />' ;
return;
}
var sShow = sCalc.replace(/\*/g,'×').replace(/\//g,'÷');
sShow = sShow.replace(/[\+\–\-\×\÷\(\)]/g, function(n){ return ' <span class="exp">' + n + '</span> '; });
$('output').innerHTML += (sShow + ' <span class="exp">=</span> ' + result) + '<hr class="spliter" />';
$('iptCalc').value = '';
}
// show input value
function sendKeys(k){
$('iptCalc').value += k.replace(/(^\s+)|(\s+$)/g,'');
}
// backspace
// function backSpace(btn){
// var back = function(){
// var i = $('iptCalc');
// var v = i.value;
// i.value = v.substring(0,v.length-1);
// };
// if(!btn){
// back();
// return;
// }
// var tFlag = setInterval(back, 150);
// btn.onmouseup = btn.onmouseout = function(){
// clearInterval(tFlag);
// };
// }
// clear
function doClear(){
$('iptCalc').value = '';
}
function doClearLog(){
$('output').innerHTML = '';
}
// generate keyboard string
function mKb(arr, cl){
return (!cl?'':'<div class="cl"></div>')+ '<a href="javascript:;" onclick="sendKeys(this.innerHTML);" hideFocus="true"> ' + arr.join(' </a><a href="javascript:;" onclick="sendKeys(this.innerHTML);" hideFocus="true"> ') + ' </a>';
}
// init keyboard
window.onload = function (){
var kbArr = ['1','2','3','4','5','6','7','8','9','0'];
var kbArr2 = ['+','–','×','÷','(',')','.'];
var sEqual = '<a href="javascript:;" onclick="Calc($(\'iptCalc\').value)" style="color:#C00" hideFocus="true"> ＝ </a>';
//var sBack = '<a href="javascript:;" title="退格(删除单个字符)" onmousedown="backSpace(this);" onclick="backSpace()" class="spec" hideFocus="true"> ← </a>';
var sClear = '<a href="javascript:;" onclick="doClear();" title="清除当前算式" style="color:#C00" hideFocus="true"> C </a>';
var sClearLog = '<a href="javascript:;" onclick="doClearLog();" title="清除历史记录" style="color:#C00" hideFocus="true"> CL </a>';
$('pannel').innerHTML = mKb(kbArr) + '<br/>' + mKb(kbArr2, true) + sClear + sClearLog + sEqual;
//$('iptCalc').focus();
}
// future : 加 平方、开方、点结果中数字自动输入
</script>
</head>
<body>
<div id="calc_box">
<div id="calc_bar">xCalc v1.0</div>
<input type="text" id="iptCalc" onkeydown="if(event.keyCode == 13){Calc(this.value);}" value="在这里直接输入表达式，然后回车..." onfocus="this.value='';" />
<div id="pannel" unselectable="on"></div>
<div id="output"></div>
</div>
</body>
</html>
引用内容
点击下载此文件