|
|
|
步骤 2 : html部分 步骤 3 : 完成该练习需要的其他知识 步骤 4 : 答案-计算器
本练习效果如下： 点击运算按钮，执行加法运算
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
input{
width:50px;
}
</style>
<script>
function calc(){
var num1= document.getElementById("num1").value;
var num2= document.getElementById("num2").value;
num1 = parseFloat(num1);
num2 = parseFloat(num2);
var result = num1+num2;
document.getElementById("result").value=result;
}
</script>
<input type="text" id="num1" value="1"> +
<input type="text" id="num2" value="2" >
=
<input type="text" id="result" >
<input type="button" value="运算" onclick="calc()">
使用html和css做出如图所示的加法计算器的界面
界面部分的参考答案在右侧的UI.html
为了完成该练习，还需要一小撮DOM的知识
如何从input中取值: var value = document.getElementById("num1").value; 以及如何把数值放回input中 document.getElementById("result").value=value; <script>
function get(){
var value = document.getElementById("num1").value;
document.getElementById("result").value="从num1中取到的值:"+value;
}
</script>
<input type="text" id="num1" value="1">
<br>
<input type="text" id="result" value="">
<br>
<input type="button" value="取值" onclick="get()" >
<script>
function get(){
var value = document.getElementById("num1").value;
document.getElementById("result").value="从num1中取到的值:"+value;
}
</script>
<input type="text" id="num1" value="1">
<br>
<input type="text" id="result" value="">
<br>
<input type="button" value="取值" onclick="get()" >
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||
Or
姿势不对,事倍功半!
