您当前的位置: 我写的这个计算器在PC上没问题
可是到了iPhone上按键就有延迟了Android上还没试
按键用的table布局
请教一下是为什么需要怎么改进
<!doctypehtml>
<html>
<head>
<metacharset="UTF-8">
<title>计算器</title>
<linkrel="stylesheet"type="text/css"href="style.css"/>
</head>
<body>
<divclass="container">
<divclass="screen">
<textareaid="inuptScreen"></textarea>
<!--输入面板-->
<inputtype="text"id="outputScreen"/>
<!--结果面板-->
</div>
<divclass="input">
<table>
<tr>
<td>
<inputtype="button"name="off"value="OFF"onclick="off()"/>
</td>
<td>
<inputtype="button"name="del"value="DEL"onclick="del()"/>
</td>
<td>
<inputtype="button"name="clr"value="CLR"onclick="clr()"/>
</td>
<td>
<inputtype="button"name="pi"value="π"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="equal"value="="onclick="equal()"/>
</td>
</tr>
<tr>
<td>
<inputtype="button"name="seven"value="7"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="eight"value="8"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="nine"value="9"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="left_brackets"value="("onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="right_brackets"value=")"onclick="disp(this)"/>
</td>
</tr>
<tr>
<td>
<inputtype="button"name="four"value="4"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="five"value="5"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="six"value="6"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="multiply"value="*"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="divide"value="/"onclick="disp(this)"/>
</td>
</tr>
<tr>
<td>
<inputtype="button"name="one"value="1"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="two"value="2"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="three"value="3"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="add"value="+"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="subtract"value="-"onclick="disp(this)"/>
</td>
</tr>
<tr>
<td>
<inputtype="button"name="zero"value="0"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="point"value="."onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="square"value="x²"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="square"value="x^y"onclick="disp(this)"/>
</td>
<td>
<inputtype="button"name="sqrt"value="√"onclick="disp(this)"/>
</td>
</tr>
</table>
</div>
</div>
<scriptsrc="javascript.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
font-size:16px;
outline:none;
/*消除Chrome中默认显示的input或textarea的边框*/
}
body{
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
-khtml-user-select:none;
user-select:none;
/*禁止被选中*/
}
div.container{
margin:30px;
padding:10px;
width:350px;
background-color:black;
}
div.screen{
margin:0auto;
margin-top:5px;
width:340px;
font-size:0;
/*消除行内元素之间的空隙*/
}
textarea#inuptScreen{
margin:0auto;
padding:5px;
width:330px;
height:80px;
resize:none;
font:24px微软雅黑;
background-color:#b3f7e0;
border:none;
overflow:hidden;
}
input#outputScreen{
margin:0auto;
padding:5px;
width:330px;
resize:none;
font:30px微软雅黑;
background-color:#b3f7e0;
border:none;
overflow:hidden;
border-top:2pxsolidblack;
}
div.input{
margin:0auto;
margin-top:20px;
width:350px;
}
div.inputtable,
div.inputtr,
div.inputtd{
border:none;
border-collapse:collapse;
}
div.inputinput{
margin:5px;
width:60px;
line-height:50px;
height:50px;
background-color:dimgray;
border:none;
color:white;
cursor:pointer;
}------解决思路----------------------
https://github.com/ftlabs/fastclick
如果还不行，就需要专业的解决方案。
这个库是专门来解决这个问题的。
------解决思路----------------------
别用onclick啊
使用触屏事件(touch事件)
touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
touches：当前位于屏幕上的所有手指的列表。
targetTouches：位于当前DOM元素上手指的列表。
changedTouches：涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息（常用）：
identifier：一个数值，唯一标识触摸会话（touchsession）中的当前手指。一般为从0开始的流水号（android4.1，uc）
target：DOM元素，是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。
radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。