<head>
<title>简易计算器</title>
<script>
function display(val){
var display = document.getElementById("display")
display.value += val
}
function result(){
var display = document.getElementById("display")
var res = eval(display.value)
display.value = res
}
function toClear(){
document.getElementById("display").value = ""
}
window.onload = function(){
document.onkeydown = function(e){
e = e || event
var keyCode = e.keyCode
//alert(keyCode)
var shiftKey = e.shiftKey
if(shiftKey){ //shift + 按键
switch(keyCode){
case 56:
display("*")
break
case 187:
display("+")
break
}
}else{ //普通按键
switch(keyCode){
case 48:
case 49:
case 50:
case 51:
case 52:
case 53:
case 54:
case 55:
case 56:
case 57:
display(keyCode - 48)
break
case 67:
toClear()
break
case 106:
display("*")
break
case 107:
display("+")
break
case 109:
case 189:
display("-")
break
case 111:
case 191:
display("/")
break
case 187:
result()
break
}
}
}
}
</script>
<style type="text/css">
input {
height: 2.5em
width: 5em
}
input#display {
width:100%
}
</style>
</head>
<body>
<table border="1" align="center" frame="box" rules="all">
<tr>
<td colspan="3"><input type="text" id="display" disabled /></td>
<td>
<input name="按钮" type="button" onClick="result()" value="计算" /> </td>
</tr>
<tr>
<td><input type="button" value="7" onClick="display(this.value)" /></td>
<td><input type="button" value="8" onClick="display(this.value)" /></td>
<td><input type="button" value="9" onClick="display(this.value)" /></td>
<td><input type="button" value="+" onClick="display(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="4" onClick="display(this.value)" /></td>
<td><input type="button" value="5" onClick="display(this.value)" /></td>
<td><input type="button" value="6" onClick="display(this.value)" /></td>
<td><input type="button" value="-" onClick="display(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="1" onClick="display(this.value)" /></td>
<td><input type="button" value="2" onClick="display(this.value)" /></td>
<td><input type="button" value="3" onClick="display(this.value)" /></td>
<td><input type="button" value="*" onClick="display(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="." onClick="display(this.value)" /></td>
<td><input type="button" value="0" onClick="display(this.value)" /></td>
<td><input type="button" value="C" onClick="toClear()" /></td>
<td><input type="button" value="/" onClick="display(this.value)" /></td>
</tr>
</table>
</body>
</html>
其实主要就是加个键盘事件监听，这里用的keydown，改成keyup亦可，然后主要是了解思想，代码仅供参考
按照HTML标准，按钮的表示如下：
<input class="class1 class2" type="button" value="这是一个按钮" style="">1，在上面的代码中里面的style属性，把要修改的属性直接写到style里面，属性与值之间用冒号分割，多个属性间用分号分隔，如
style="width:100pxbackground-color:#123"
2，为元素应用样式类，即上面代码里面的class里面的内容，其中的每个值都代表一个已定义的样式类，多个样式类之间用空格隔开，样式类一般定义在单独的样式文件中，比如下面图片中的内容是bootstrap.css里面的部分内容，其中以点开始的如container就是样式类了。
3，对于前端开发而言，目前有许多比较流行的开源框架，里面都预定义了一些常用的样式，比如你说的按钮，在bootstrap中，通过简单的使用class="btn btn-default"就可以将任意元素表现成一个按钮的样子
<script type="text/javascript">function copyUrl() {
var Url = document.getElementById("url1")
Url.select()// 选择对象
document.execCommand("Copy")// 执行浏览器复制命令
alert("已复制好，可贴粘。")
}
</script>
<input type="text" value="www.xxx.com" id="url1" />
<input type="button" onClick="copyUrl()" value="点击复制代码" />
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）