JavaScript系列教材（九）- 语言基础

下载区
文件名	文件大小
UI.html	275b
answer.html	566b
解压rar如果失败，请用5.21版本或者更高版本的winrar 点击下载 winrar5.21

工具版本兼容问题

练习，做一个简单的加法计算器

纠

步骤 1 : 练习-计算器
步骤 2 : html部分
步骤 3 : 完成该练习需要的其他知识
步骤 4 : 答案-计算器

步骤 1 :

练习-计算器

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

本练习效果如下：点击运算按钮，执行加法运算

步骤 2 :

html部分

edit 顶折

纠问

使用html和css做出如图所示的加法计算器的界面

界面部分的参考答案在右侧的UI.html

步骤 3 :

完成该练习需要的其他知识

edit 顶折

纠问

为了完成该练习，还需要一小撮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()" >

步骤 4 :

答案-计算器

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

JavaScript系列教材（八）- 语言基础 - 函数

JavaScript系列教材（十）- 语言基础 - 阶段性练习2

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2024-07-25 js 实现简单的计算功能和需要注意的地方

虚心求学

关于前端部分-JavaScript-阶段性练习1 的提问

发现三个需要注意的地方，特别是注意 javascript 不支持显示的方法重载：其一：document.getElementByID('id');获取的只是元素，需要调用其属性 .value，才能取到值。其二：上一点获取的值是一个字符串，相加结果为字符拼接，与结果可能相悖。比如输入 1,1 返回 11 其三：java 的方法不支持显示重载，如果定义了一个fuction get（）和另一个 function get（value），即使是定义为一个 “无参方法” 和 “有参方法” 这两种函数，最后也只能调用其中之一的无参方法。即使你后面这样调用：get('id3'); 调用的也是 function get();这个无参方法。