javascript/js计算器的基础制作

月影WEB

已于 2022-04-18 00:05:32 修改

阅读量237

点赞数 5

分类专栏： Js 文章标签： javascript 前端 js html css

于 2022-04-18 00:05:01 首次发布

本文链接：https://blog.csdn.net/qq_34297287/article/details/124239636

版权

Js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文解析了如何使用JavaScript编写一个简单的功能，通过获取id为'yueying_1'和'yueying_2'的文本输入框内容，相加后显示在'id:yueying_3'的输入框中。通过实例代码演示了Number()函数的应用及按钮点击事件的处理。

摘要由CSDN通过智能技术生成

我们先看看JS代码和效果图

代码如下：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_18,color_FFFFFF,t_70,g_se,x_16

按F12预览效果图如下：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_18,color_FFFFFF,t_70,g_se,x_16

下面我们来讲解下这个JS：

JS部分：

<script>
function yue()
{
    var x1=document.getElementById("yueying_1");
    var x2=document.getElementById("yueying_2");
    var x3=document.getElementById("yueying_3");
    x3.value=Number(x1.value)+Number(x2.value);//Number() 函数把对象的值转换为数字

}
</script>

代码部分：

<input type="text" id="yueying_1" /> +
<input type="text" id="yueying_2" /> =
<input type="text" id="yueying_3" />
<input type="button" onclick="yue()" value="计算"/>

关注微信公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；