html计算器的基本功能实现,JS实现基本的网页计算器功能示例

本文实例讲述了JS实现基本的网页计算器功能。分享给大家供大家参考，具体如下：

网页计算机

#jsjdiv{

border: solid 1px black;

border-radius: 5px;

width: 200px;

/*height: 400px;*/

text-align: center; /*设置div内部居中*/

margin: auto; /*设置计算机居中*/

background-color: darkgrey;

}

input[type=text]{

width: 190px; /*设置大小*/

height: 35px;

margin-top: 10px; /*设置边框*/

margin-bottom: 5px;

}

input[type=button]{

width: 44px;

height: 44px;

/*margin-left: 5px;

margin-right: 5px;*/

margin-top: 5px;

margin-bottom: 10px;

font-size: 25px; /*设置text的字体大小及深度*/

font-weight: 600;

}

function cal(btn){

var num=btn.value;

switch (num){ // 利用eval可以把string的内容转化成代码,在代码中输入可以直接进行计算

case "=":

document.getElementById("inp").value=eval(document.getElementById("inp").value);

break;

case "c":

document.getElementById("inp").value="";

break;

default: //进行输入数据的拼接

document.getElementById("inp").value=document.getElementById("inp").value + num;

break;

}

运行效果：

网页计算机：

利用css进行div的布局设置基本的计算机的基本的框架，

在其内部设置text进行显示，利用button添加按钮。

一个主要的点：我们要在按按钮的时候，把数据输出到text文本上。我们利用了function添加一个函数，在进行按按钮时，利用onclick,连接到函数，在函数中实现文本的显示。但是我们在函数中只能对某个id进行调用，这样就表示有多少按钮就要有多少函数，而且内容相同。所以我们引用了this(当前对象)进行调用。

另一方面，我们要实现计算，我们利用eval()把其中的内容转化为代码，就相当于代码执行。所以可以直接进行运算输出。

当我们输入“=”和“c"就要进行计算操作，相应的我们利用了switch进行区分。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。

PS：这里再为大家推荐几款计算工具供大家进一步参考借鉴：

希望本文所述对大家JavaScript程序设计有所帮助。

html计算器的基本功能实现,JS实现基本的网页计算器功能示例相关推荐

java jsp网页计算器_使用JSP制作一个超简单的网页计算器的实例分享
实现一个简单的计算器程序,要求:使用jsp+javabean模式实现. 项目源代码如下: 文件:calculator.jsp 简单的计算机进行计算 --%> cal.calculate(); ...
js装修计算器java代码_用js编写的简单的计算器代码程序
最近编写的一个简单的计算器代码程序,先给大家展示一下分享代码如下 #box{width: 295px; margin: 0 auto; text-align: justify; border: 1p ...
基于JavaScript实现网页计算器
基于JavaScript的网页计算器基于HTML.CSS.JavaScript制作的网页计算器,其中可以实现加.减.乘.除.取整.求余.阶乘.科学计数等功能界面如下: 代码如下: 有兴趣的朋友欢迎 ...
Web前端开发实验作业 - 网页计算器
Web前端开发实验作业 - 网页计算器项目已上传至GitHub 仅供学习交流需要自取不妨点个start 谢谢 https://github.com/zhenggengqiong/Computer ...
[功能发布]Excel催化剂2周年巨献-网页数据采集功能发布，满足90%合理场景使用...
转眼间,Excel催化剂推出已经两周年,在此之际,献上数据时代最刚需的网页采集功能,无需苦苦寻觅各种工具,借助Excel催化剂过往数据处理.清洗功能,加上此轮的网页采集功能,一点不输于市面上的各种收费 ...
制作一个最基本的网页计算器
只需要一个html文件就可以制作一个计算器,代码如下: <!DOCTYPE html> <html><head><meta charset="utf ...
JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
js实现四则混合运算计算器
最近想用js做一个简单的计算器,不过网上的例子好像大部分都是直接从左到右挨个计算,就好像1+2*5,就会先计算1+2,再计算3*5,并没有实现运算符的优先级,这里找到了一种方法实现,来总结一下.不过这 ...
用HTML，CSS，JS制作一个网页计算器
今天分享一个自己做的网页计算器,我个人感觉,虽然不精简,但是应该涉及到的东西都有了,所以分享出来,那我直接上代码了. <html> <head><meta charset ...

html计算器的基本功能实现,JS实现基本的网页计算器功能示例

html计算器的基本功能实现,JS实现基本的网页计算器功能示例相关推荐

最新文章

热门文章