用javascript制作二位数的网页计算器

script部分

     function add(clickNum){document.getElementById("screen").value += clickNum.value;}/*向屏幕增加数据*/function getResult(){var str = document.getElementById("screen").value;var ope,num1,num2;if((ope = str.indexOf("+"))!=-1){num1 = parseFloat(str.substring(0,ope));num2 = parseFloat(str.substring(ope+1));document.getElementById("screen").value = num1 + num2;}else if((ope = str.indexOf("-"))!=-1){num1 = parseFloat(str.substring(0,ope));num2 = parseFloat(str.substring(ope+1));document.getElementById("screen").value = num1 - num2;}else if((ope = str.indexOf("*"))!=-1){num1 = parseFloat(str.substring(0,ope));num2 = parseFloat(str.substring(ope+1));document.getElementById("screen").value = num1 * num2;}else if((ope = str.indexOf("/"))!=-1){num1 = parseFloat(str.substring(0,ope));num2 = parseFloat(str.substring(ope+1));document.getElementById("screen").value = num1 / num2;}}/*根据符号进行判断计算*/function clears(){document.getElementById("screen").value = "";}/*清除函数*/

全部代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>网页计算器</title><style type="text/css">table input{width:50px;height:50px;}/*设置按钮格式*/#screen{width:150px;height:45px;}/*设置屏幕格式*/table {border:1px solid #d0d0d0;}</style><script type="text/javascript">function add(clickNum){document.getElementById("screen").value += clickNum.value;}/*向屏幕增加数据*/function getResult(){var str = document.getElementById("screen").value;var ope,num1,num2;if((ope = str.indexOf("+"))!=-1){num1 = parseFloat(str.substring(0,ope));num2 = parseFloat(str.substring(ope+1));document.getElementById("screen").value = num1 + num2;}else if((ope = str.indexOf("-"))!=-1){num1 = parseFloat(str.substring(0,ope));num2 = parseFloat(str.substring(ope+1));document.getElementById("screen").value = num1 - num2;}else if((ope = str.indexOf("*"))!=-1){num1 = parseFloat(str.substring(0,ope));num2 = parseFloat(str.substring(ope+1));document.getElementById("screen").value = num1 * num2;}else if((ope = str.indexOf("/"))!=-1){num1 = parseFloat(str.substring(0,ope));num2 = parseFloat(str.substring(ope+1));document.getElementById("screen").value = num1 / num2;}}/*根据符号进行判断计算*/function clears(){document.getElementById("screen").value = "";}/*清除函数*/</script>
</head>
<body>
<table><tr><th colspan="3"><input type="text" id="screen"/></th><th><input type="button" value="C" onclick="clears()"/></th></tr><tr><th><input type="button" value="7" onclick="add(this)"/></th><th><input type="button" value="8" onclick="add(this)"/></th><th><input type="button" value="9" onclick="add(this)"/></th><th><input type="button" value="/" onclick="add(this)"/></th></tr><tr><th><input type="button" value="4" onclick="add(this)"/></th><th><input type="button" value="5" onclick="add(this)"/></th><th><input type="button" value="6" onclick="add(this)"/></th><th><input type="button" value="*" onclick="add(this)"/></th></tr><tr><th><input type="button" value="1" onclick="add(this)"/></th><th><input type="button" value="2" onclick="add(this)"/></th><th><input type="button" value="3" onclick="add(this)"/></th><th><input type="button" value="-" onclick="add(this)"/></th></tr><tr><th><input type="button" value="0" onclick="add(this)"/></th><th><input type="button" value="." onclick="add(this)"/></th><th><input type="button" value="=" onclick="getResult()"/></th><th><input type="button" value="+" onclick="add(this)"/></th></tr>
</table>
</body>
</html>

效果

除了JS计算器，在此送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程，点击此处免费获取，小白勿进哦

用javascript制作二位数的网页计算器相关推荐

基于HTML+CSS+JavaScript制作简单的大学生网页设计——我的家乡湖南
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
情人节程序员用HTML网页表白【制作属于我们的爱情相册网页】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
用JavaScript制作简单的网页计算器
一.题目利用JavaScript中的函数,完成数字加.减.乘.除的运算,实现一个简单的计算器. 二.代码 <!doctype html> <html> <head> ...
JavaScript制作网页计算器
JavaScript制作网页计算器 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
HTML+CSS静态页面网页设计作业——2019凡客服装店铺商城(1页) HTML+CSS+JavaScript HTML+CSS大作业_ 服装店铺网页制作作业_购物网页设计...
HTML5期末大作业:服装店铺商城网站设计--2019凡客服装店铺商城(1页) HTML+CSS+JavaScript HTML+CSS大作业: 服装店铺网页制作作业_购物网页设计- 文章目录 HTM ...
基于JavaScript实现网页计算器
基于JavaScript的网页计算器基于HTML.CSS.JavaScript制作的网页计算器,其中可以实现加.减.乘.除.取整.求余.阶乘.科学计数等功能界面如下: 代码如下: 有兴趣的朋友欢迎 ...
JavaScript实现网页计算器
Hbuilder X中实现网页计算器(+-*/) 文章目录一.计算器代码二.代码分析一.计算器代码 <!DOCTYPE html> <html><head>& ...
DW静态网页设计与制作 JavaScript大作业 HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
HTML静态网页作业--海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
静态HTML网页设计作品——斗破苍穹动漫(6页) HTML+CSS+JavaScript 学生动漫网页设计模板下载斗破大学生HTML网页制作作品简单漫画网页设计成品 dreamweav
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页) HTML+CSS+JavaScript 学生动漫网页设计模板下载斗破大学生HTML网页制作作品简单漫画网页设计成品 dreamweave ...

用javascript制作二位数的网页计算器

用javascript制作二位数的网页计算器相关推荐

最新文章

热门文章