js编写计算器(改良版) 支持键盘输入

最新推荐文章于 2021-06-07 16:27:46 发布

wukongpai

最新推荐文章于 2021-06-07 16:27:46 发布

阅读量943

点赞数

文章标签： html javascript keycode keyDown ViewUI

本文链接：https://blog.csdn.net/wukongpai/article/details/84254297

版权

[color=green][size=medium]<!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 runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 22%;
margin: 20px 0 0 0;
}
table tr td{
text-align:center;
}
#Text1
{
width: 258px;
height: 38px;
}
.style2
{
width: 41px;
}
.Button
{
height: 35px;
width: 45px;
}

</style>
<script language="javascript" type="text/javascript">
var num;
function btntext(num) {
document.getElementById('Text1').value += document.getElementById(num).value;
}//文本框赋值
function ev() {
if (eval(document.getElementById('Text1').value!=null))
document.getElementById('Text1').value = eval(document.getElementById('Text1').value);
} //计算,文本框内的表达式
function clear1() {

document.getElementById('Text1').value =0;
} //将文本框内的内容清0
function SQRT() {
var disp = document.getElementById('Text1');
disp.value = Math.sqrt(disp.value);

}//开根号

function Pow() {
var disp = document.getElementById('Text1');
disp.value = Math.pow(disp.value, 2);
}//平方
function del() {
var disp = document.getElementById('Text1');
disp.value = disp.value.substring(0, disp.value.length - 1)
}//逐个删除
function C() {
var disp = document.getElementById('Text1');
disp.value = disp.value.substring(0, disp.value.length - disp.value.length)
}//清空

function keyDown(e) {

var realkey;
var keycode;
var show=false;
var Text1=document.getElementById("Text1");

var keycode=e.which || event.keyCode;

var txtvalue=Text1.value;
if(keycode<106&&keycode>95){
keycode=keycode-48;
}
if(keycode>47&&keycode<58){
realkey=String.fromCharCode(keycode);
show=true;
}else if(keycode==111){
realkey='/';
show=true;
}else if(keycode==106){
realkey='*';
show=true;
}else if(keycode==109){
realkey='-';
show=true;
}else if(keycode==107){
realkey='+';
show=true;
}else if(keycode==110){
realkey='.';
show=true;
}else if(keycode==13){
ev();
}else if(keycode==8){
Text1.value=Text1.value.substring(0,Text1.value.length-1);
}

if(show)
Text1.value=Text1.value+realkey;
}
document.οnkeydοwn=keyDown

</script>
</head>
<body>

<div>
<table align="center" class="style1"
style="background-color: #C0C0C0; height: 330px;">
<tr>
<td colspan="4" style="background-color: #B0C4DE; text-align: center;">
<input id="Text1" type="text" οnkeydοwn="if(event.keyCode==13) ev();"/></td>
</tr>
<tr>
<td style="background-color: #ADD8E6">
<input id="1" type="button" value="1" name='1' οnclick="btntext('1')"class='Button' /></td>
<td style="background-color: #ADD8E6">
<input id="2" type="button" value="2" οnclick="btntext('2')" class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="3" type="button" value="3" οnclick="btntext('3')" class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="+" type="button" value="+" οnclick="btntext('+')" class='Button'/></td>

</tr>
<tr>

<td style="background-color: #ADD8E6">
<input id="4" type="button" value="4" οnclick="btntext('4')"class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="5" type="button" value="5" οnclick="btntext('5')"class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="6" type="button" value="6" οnclick="btntext('6')"class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="-" type="button" value="-" οnclick="btntext('-')"class='Button'/></td>
</tr>
<tr>
<td style="background-color: #ADD8E6">
<input id="7" type="button" value="7" οnclick="btntext('7')"class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="8" type="button" value="8" οnclick="btntext('8')"class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="9" type="button" value="9" οnclick="btntext('9')"class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="*" type="button" value="*" οnclick="btntext('*')"class='Button'/></td>
</tr>
<tr>

<td style="background-color: #ADD8E6">
<input id="0" type="button" value="0" οnclick="btntext('0')"class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="" type="button" value="←" οnclick="del()" class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="." type="button" value="." style="font-weight: bold" οnclick="btntext('.')"class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="/" type="button" value="/" οnclick="btntext('/')"class='Button'/></td>

</tr>
<tr>
<td style="background-color: #ADD8E6">
<input id='根号' type="button" value="√" οnclick="SQRT()"class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="平方" type="button" value="^2" οnclick="Pow()"class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="" type="button" value="C" οnclick="clear1()" class='Button'/></td>
<td style="background-color: #ADD8E6">
<input id="" type="button" value="=" οnclick="ev()" class='Button'/></td>
</tr>
<td colspan="4"style="background-color: #B0C4DE" ><font size="2" color="#4682B4" ></font></td>

</tr>
</table>
</div>

</body>
</html>
[size=large][/size][/size][/color]

[color=red][size=large]花了一天写,特别是键盘取值,开始迷茫死了~因为我是菜鸟~~~累死啦~不过成功了~~O(∩_∩)O哈哈~[/size][/color]