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

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

工具版本兼容问题

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

纠

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

步骤 1 :

练习-计算器

edit 顶折

纠问

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

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

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

<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()">

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 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()" >

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 4 :

答案-计算器

edit 顶折

纠问

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

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

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

运行效果

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

<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"> +
 
<input type="text" id="num2" >
=
<input type="text" id="result" >
 
<input type="button" value="运算" onclick="calc()">

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

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();这个无参方法。

//---------------------css文件-----------------------
function get(id){
	var value = document.getElementById(id).value;
	return value;
}

function set(id,value){
	document.getElementById(id).value=value;
}
function sum(a,b){
                var r1 = parseFloat(a);
                var r2 = parseFloat(b);
	var res = r1+r2;
	return res;
}

<!------------------- html 文件 -------------------->

<html>
<head>
        <meta http-equiv="Content-Type" connect="text/html;charset=UTF-8"/>
        <script src="script.js"></script>
</head>

<body>
	<input id="t1" type="text">+<input id="t2" type="text">=<input id="t3" type="text">
	<button onclick="set('t3', sum(get('t1'), get('t2') ) )">开始计算</button>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2023-04-12 练习

lzqcdlxhy

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

现学现用

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <style>
        div {
            text-align: center;
            margin: 10px auto;
            line-height: 100px;
        }

        .num {
            width: 80px;
        }
    </style>

    <div>
        <input class="num" type="text" id="num1">
        +
        <input class="num" type="text" id="num2">
        =
        <input class="num" type="text" id="result">
        <input type="submit" value="加法" onclick="add()">
    </div>

    <script>
        function add() {
            let value1 = document.getElementById("num1").value;
            let value2 = document.getElementById("num2").value;

            document.getElementById("result").value = parseInt(value1) + parseInt(value2);
        }
    </script>
</body>

</html>

6 个答案

Leslie_sakura
答案时间：2024-04-13

代码超过 5行，点击查看

volare
答案时间：2024-03-26

需要两个都加Number方法，因为输入进去的是String

代码超过 5行，点击查看

CharlieLong
答案时间：2023-10-31

你学废了吗？

代码超过 5行，点击查看

LUO萝北
答案时间：2023-05-31

代码超过 5行，点击查看

lzqcdlxhy
答案时间：2023-05-24

哈哈，受教了，学的太急了，把Number()方法忘了

ustc_jayson
答案时间：2023-05-21

你的这个只能计算整数

const value3 = Number(value1) +  Number(value2);

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-04-21 使用的Hbuilder软件没有getElementById方法

lusir_666

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

为什么使用的Hbuilder软件没有getElementById方法

2 个答案

Leslie_sakura
答案时间：2024-04-13

代码超过 5行，点击查看

zhangyujing
答案时间：2022-10-31

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-03-28 stage exercise1

2022-03-15 加法计算器

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 42 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

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

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图