<Java Web学习初级阶段>JavaScript实现简单网页计算器

最新推荐文章于 2023-06-30 16:23:46 发布
最新推荐文章于 2023-06-30 16:23:46 发布
阅读量896 收藏
点赞数
文章标签： java web javascript table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_22599883/article/details/48393025
版权
本文介绍了一个使用JavaScript编写的简单网页计算器，具备加、减、乘、除、求余、清零和退格功能。用户可以通过点击按钮进行计算操作，界面简洁明了，代码实现逻辑清晰。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

功能实现：

能够实现简单的加、减、乘、除、求余计算，可以进行带小数点和正负数的计算，C为清零按钮，CE为退格按钮。

界面截图：


页面布局代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<style>
table tr td{width:100px; height:60px; text-align:center;}
#display{width:306px; height:60px; font-size:32px; text-align:right; background-color:#CCC; color:#666;}
.btn{width:80px; height:40px;}

</style>
<script src="calculator.js"></script>
</head>


<body>
<form>
<table border="1" align="center">
    <tr>
        <td colspan="3"><input type="text" id="display" readonly="readonly" value="0" /></td>
            <td><input type="button" class="btn" value="C" οnclick="clearscreen()" /></td>
            <td><input type="button" class="btn" value="CE" οnclick="del()" /></td>
        </tr>
        <tr>
        <td><input type="button" class="btn" value="7" οnclick="command(7)" /></td>
            <td><input type="button" class="btn" value="8" οnclick="command(8)" /></td>
            <td><input type="button" class="btn" value="9" οnclick="command(9)" /></td>
            <td><input type="button" class="btn" value="+/-" οnclick="pm()" /></td>
            <td><input type="button" class="btn" value="%" οnclick="persent()" /></td>
        </tr>
        <tr>
        <td><input type="button" class="btn" value="4" οnclick="command(4)" /></td>
            <td><input type="button" class="btn" value="5" οnclick="command(5)" /></td>
            <td><input type="button" class="btn" value="6" οnclick="command(6)" /></td>
            <td><input type="button" class="btn" value="+"οnclick="plus()" /></td>
            <td><input type="button" class="btn" value="-"οnclick="minus()" /></td>
        </tr>
        <tr>
        <td><input type="button" class="btn" value="1" οnclick="command(1)" /></td>
            <td><input type="button" class="btn" value="2" οnclick="command(2)" /></td>
            <td><input type="button" class="btn" value="3" οnclick="command(3)" /></td>
            <td><input type="button" class="btn" value="*"οnclick="times()" /></td>
            <td><input type="button" class="btn" value="/"οnclick="divide()" /></td>
        </tr>
        <tr>
        <td><input type="button" class="btn" value="0" οnclick="command(0)" /></td>
            <td><input type="button" class="btn" value="." οnclick="dot()" /></td>
            <td id="test"></td>
            <td><input type="button" class="btn" value="=" οnclick="equal()" /></td>
            <td><input type="button" class="btn" value="返回" /></td>
        </tr>
    </table>
</form>
</body>
</html>


JavaScript代码:

var num1=0,results=0,num2=0;
var operate=0; //判断输入状态的标志 
var calcul=""; //判断计算状态的标志 
function command(num){
var str=String(document.getElementById("display").value);      //获得当前显示数据 
str=(str!="0") ? ((operate==0) ? str : "") : "";          //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
str=str+num;                                      //给当前值追加字符  
document.getElementById("display").value=str;                  //刷新显示 
operate=0;
}
function clearscreen(){                                       //清除数据
num1=0;
results=0;
num2=0;
operate=0;
calcul="";
document.getElementById("display").value="0";
document.getElementById("test").innerText="";
}
function del(){                                               //退格
var str=String(document.getElementById("display").value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0";
str=(str!="0")?str:"";
str=str.substr(0,str.length-1);
str=(str!="")?str:"0";
document.getElementById("display").value=str;
}
function dot(){
var str=String(document.getElementById("display").value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0";       如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0;i<=str.length;i++){
if(str.substr(i,1)=="."){
return false;
}
}
str=str+".";
document.getElementById("display").value=str;
operate=0;
}
function pm(){
var str=String(document.getElementById("display").value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0";
if(str!="0"){
if(str.substr(0,1)=="-"){
str=str.substr(1,str.length-1);
}else{
str="-"+str;
}
}else{
str="0";
}
document.getElementById("display").value=str;
operate=0;
}
function plus(){ //加法 
num1=Number(document.getElementById("display").value);
operate=1; //更改输入状态
calcul="+"; //更改计算状态为加
command(num)
} 
function minus(){ //减法 
num1=Number(document.getElementById("display").value);
operate=1; //更改输入状态
calcul="-"; 
command(num) 
} 
function times(){ //乘法 
num1=Number(document.getElementById("display").value);
operate=1; //更改输入状态
calcul="*";
command(num) 
} 
function divide(){ //除法 
num1=Number(document.getElementById("display").value);
operate=1; //更改输入状态
calcul="/";
command(num)
} 
function persent(){ //求余 
num1=parseFloat(document.getElementById("display").value);
operate=1; //更改输入状态
calcul="%";
command(num)
} 
function equal(){ 
num2=parseFloat(document.getElementById("display").value);
calculate(num1,num2,calcul); //等于 
operate=1;
calcul="";
num1=0;
num2=0;
results=0; 
}
function calculate(num1,num2,calcul){ 
switch(calcul){ //判断要输入状态 
case "+":
results=num1+num2;
break; //计算"+" 
case "-":
results=num1-num2;
break; //计算"-" 
case "*":
results=num1*num2;
break; 
case "/":
if(num2!=0){
results=num1/num2;
}else{
alert("除数不为0！");
}
break; 
case "%":
results=num1%num2;
break; 
} 
document.getElementById("test").innerText=String(num1)+calcul+String(num2);
document.getElementById("display").value=String(results);  
}

java_web网页版计算器_简单的Web版计算器 - Mr_DeFore的个人空间 - OSCHINA - 中文开源技术交流社区...
weixin_33147645的博客
03-02 251
先完成html部分的代码：html>MyCalculatorMyCalculator07894561230./清零*退格-=+完成之后有这样的效果： 然后是用css来渲染：#workship{margin:20px;width:360px;height:400px;border...
V2022全栈培训笔记（WEB攻防47-WEB攻防-通用漏洞&Java反序列化&EXP生成&数据提取&组件安全）
zz12345600354的博客
06-12 1062
1、Java反序列化演示-原生API接☐2、Java反序列化漏洞利用-Ysoserial使用3、Java反序列化漏洞发现利用点-函数&数据4、Java反序列化考点-真实&CTF赛题-审计分析#内容点：1、明白Java反序列化原理2、判断Java反序列化漏洞3、学会-Ysoserial_工具使用4、学会-SerializationDumper5、了解-简要Java代码审计分析#前置知识序列化和反序列化的概念：序列化：把Java对象转换为字节序列的过程。
JAVA WEB 计算器
05-07
JAVA WEB 计算器JAVA WEB 计算器JAVA WEB 计算器
请实现一个简单的网页计算器（vue)
weixin_47518648的博客
10-29 4868
通过此次实验练习一下组件向子组件传值，计算部分用eval方法实现。 运行截图如下： 话不多说，上代码。 页面结构： <div id="app"> <my-parent></my-parent> </div> 组件模板： <template id='parent'> <div style="margin-top: 20px"> <in.
网页计算器的简单实现--jsp开发模式
技术小白
04-20 765
今天学习了传智播客的视频 http://study.163.com/course/courseLearn.htm?courseId=214022#/learn/video?lessonId=309361&courseId=214022，跟着视频做了一个简单的网页计算器。
Java web网页计算器，简单实用，2种逻辑实现
02-28
全手写，绝对能用，2种实现逻辑，简单实用
《JavaScript项目式实例教程》课程标准.docx
最新发布
06-27
通过系统学习JavaScript语言的基础编程思想和实践操作，学生将能够熟练运用JavaScript控制Web页面的各个元素，实现前端验证、动态展示等功能。 ### 二、职业活动 本课程的学习旨在帮助学生： - 形成良好的学习能力...
JAVA学习资源：百个实例源码与开源项目集合
涵盖了从初级到高级的各种难度，包括但不限于Applet钢琴模拟程序、EJB银行ATM流程、Java Socket聊天程序、Java Telnet客户端、组播通信、文件读写、日历控件、代码生成器、服务框架Dubbo、JavaScript框架RingoJS、...
Java语法相关知识汇总（一）
Fddadd的博客
06-30 844
主要编写二进制码，以打孔机为代表Java语言诞生于1995年Java包括三大块--JavaSE：Java标准版--JavaEE：Java企业版--JavaME：Java微型版其中JavaSE是基础，以后主攻JavaEE方向JDK/bin：该目录下存放了很多命令，例如javac.exe和java.exeJava虚拟机（Java Virtual Machine，JVM）是Java平台的核心组成部分之一，它是一个虚拟的计算机，它的任务是执行Java字节码（bytecode）。
编程，C语言，代码，黑客，软件，JAVA，DW，软件设计等等，怎么循序渐进学习？
m0_59595915的博客
11-27 950
目录 1. 编程 2.代码 3. 软件 4.C语言，JAVA 5.黑客 6. DW 7.总结 有同学在评论区里问我技术方向和发展前景的问题，虽然认真回答了一下，但我的专业毕竟不是那个方向的，只能说了解，远远到不了指导他人的程度。如果是在大学里，最优的解决方案还是找学院里的老师谈，直接找一些管教务的行政老师，或者带你专业课的副教授、教授。大学都在提“职业生涯规划”，你主动去询问，他们不会拒绝你的。 其实不是的，是有本质区别的。学校教的东西虽然旧（比如还有学校在用谭浩强的C语言教材），数据结构
非常实用的简易网页计算器
06-23
简易网页计算器，说简易其实非常实用，外观也可以！特此分享给大家！！
小型计算器，简单的网页前台开发，适合初学者
07-25
自己写的简单的小型计算器，对于初学网页前台开发者合适，很简单
基于java和jsp编写的一个网页计算器
12-29
用java，jsp，编写的一个网页计算器，可以实现最基本的数值计算，也可以用HTML编写页面
Web版的计算器
04-09
Web版的计算器
java web版计算器_javaweb-计算器作业
weixin_30827827的博客
03-01 373
计算器input{width:80px;text-align:center;}#inp1{width:180px;text-align:center;}function Calculator(){this.jisuan=function(num1,num2,oper){var res=0;switch(oper){case "+":res=num1+num2;break;case "-":res=...
用java编写一个简单的计算器
thewebcode
09-25 500
import java.awt.Button; 　　import java.awt.Color; 　　import java.awt.Frame; 　　import java.awt.GridLayout; 　　import java.awt.Panel; 　　import java.awt.TextField; 　　import java.awt.event.MouseEvent; 　　im...
网页计算器原生js实现
qq_40664548的博客
04-21 605
鼠标点击按钮或者键盘按键都可实现！！！（话不多说，直接上源码） 计算器 简单的计算器 ...
通过html，css，javascript构建网页计算器
awo29548的博客
10-22 260
一、要求：通过html、css、javascript构建网页计算器 （1）能够实现简单的四则运算 （2）小数点保留两位 二、实现效果如图： 三、分析： 1、边框以及页面的构建：html以及css来实现 2、按钮：通过javascript（哪类按钮需要什么标签以及函数来实现？） （1）第一类按钮：数字、小数点、运算符。表达式的连接和输出。 （2）等于、运算符的计算...
用HTML，CSS，JS制作一个网页计算器
ilikeu777的博客
03-27 3372
今天分享一个自己做的网页计算器，我个人感觉，虽然不精简，但是应该涉及到的东西都有了，所以分享出来，那我直接上代码了。 <html> <head> <meta charset="utf-8"> <title>我的计算器</title> <script src="jquery-1.9.1.min.js"></script> <script> function myck(
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值