var field1 = document.getElementById('field1')
var field2 = document.getElementById('field2')
var result = document.getElementById('result')
result.innerHTML = '<div style="width:' + field1.value + 'pxheight:' + field2.value+ 'px"></div>'
我给你看下我自己写的一个计算器的代码吧！你要实现求和的话！必须要用javaScript，下面是代码内容：<html><head>
<title>计算器</title>
<style>*{ font-size:12px}
body{ background-color:buttonfaceborder-style:none}
.button{ width:50pxheight:30px}
.button1{ width:90pxheight:30px}
#result{ width:100%cursor:defaulttext-align:right}</style>
<script type="text/javascript">
window.onbeforeunload=function(){return("离开你会后悔的")void(0)<br> }function a(i){
switch(i){
case 11:i="/"break
case 12:i="*"break
case 13:i="-"break
case 14:i="+"break
case 15:i="."break
}
document.getElementById("result").value=document.getElementById("result").value+i
} function calc(){
try{
document.getElementById("result").value = eval(document.getElementById("result").value)
}catch(e){
document.getElementById("result").value = "错误的算式"
}
}</script></head><body style="overflow:auto">
<table border="" bgcolor="#00FF00">
<!--DWLayoutTable-->
<tr>
<td height="20" colspan="4" valign="top"><input name="Input" id="result" size="18"></td>
</tr>
<tr>
<td><input type="button" value=" 7 " id="7" onClick="a(7)" class="button"></td>
<td><input type="button" value=" 8 " id="8" onClick="a(8)" class="button"></td>
<td><input type="button" value=" 9 " id="9" onClick="a(9)" class="button"></td>
<td><input type="button" value=" / " id="/" onClick="a(11)" class="button"></td>
</tr>
<tr>
<td height="25"><input type="button" value=" 4 " id="4" onClick="a(4)" class="button"></td>
<td><input type="button" value=" 5 " id="5" onClick="a(5)" class="button"></td>
<td><input type="button" value=" 6 " id="6" onClick="a(6)" class="button"></td>
<td><input type="button" value=" * " id="*" onClick="a(12)" class="button"></td>
</tr>
<tr>
<td height="25"><input type="button" value=" 1 " id="1" onClick="a(1)" class="button"></td>
<td><input type="button" value=" 2 " id="2" onClick="a(2)" class="button"></td>
<td><input type="button" value=" 3 " id="3" onClick="a(3)" class="button"></td>
<td><input type="button" value=" - " id="" onClick="a(13)" class="button"></td>
</tr>
<tr>
<td height="25"><input type="button" value=" 0 " id="0" onClick="a(0)" class="button"></td>
<td><input type="button" value=" . " id="." onClick="a(15)" class="button"></td>
<td><input name="button" type="button" id="=" value=" = " onClick="calc()" class="button"></td>
<td><input type="button" value=" + " id="+" onClick="a(14)" class="button"></td>
</tr>
</table>
</body>
</html>
1、新建一个html文件，命名为test.html。
2、在test.html文件中，使用input标签创建一个文本输入框，代码如下。
3、在test.html文件中，使用readonly="readonly"设置input文本框只读，不可更改。
4、在test.html文件中，创建一个button按钮，用于点击按钮时，实现改变文本框的只读属性。
5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行gb函数。
6、在js标签中，创建一个gb函数，在函数内，通过文本框id获得对象，设置readOnly属性为false,即关闭input文本框的只读属性。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）