使用Js实现简单的计算器功能

最新推荐文章于 2024-08-25 14:02:51 发布
最新推荐文章于 2024-08-25 14:02:51 发布
阅读量462 收藏
点赞数
文章标签： Js 计算器 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014398696/article/details/84740589
版权

HTML代码：

<!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>
<link href="CSS/Calculator.css" rel="stylesheet" type="text/css" />
<script>
var flag=0;
var first="";
var t="";

function clearresult(){
 document.getElementById("result").value="0.";
 first="";
 document.getElementById("+").disabled=false;
 document.getElementById("-").disabled=false;
 document.getElementById("*").disabled=false;
 document.getElementById("/").disabled=false;
 t="";
 first="";
 flag="";
}
function backspace(){
 if(t==""){
  return null;
 }else{
 var m=document.getElementById("result").value;
 var m1=m.substring(0,m.length-1);
 document.getElementById("result").value=m1;
 t=m1;
 }
}

function resultNum(){
var second=parseFloat(document.getElementById("result").value);
 switch(flag){
  case 0:document.getElementById("result").value="0.";
   break;
  case 1:document.getElementById("result").value=first+second;
   break;
  case 2:document.getElementById("result").value=first-second;
   break;
  case 3:document.getElementById("result").value=first*second;
   break;
  case 4:document.getElementById("result").value=first/second;
   break;
  case 5:document.getElementById("result").value=first%second;
   break;
  }
 first="";
 t=document.getElementById("result").value;
 flag=0;
 document.getElementById("+").disabled=false;
 document.getElementById("-").disabled=false;
 document.getElementById("*").disabled=false;
 document.getElementById("/").disabled=false;
 document.getElementById("%").disabled=false;
}

function getNum(event){
 var tt=document.getElementById(event.id).value;
 t=t+tt;
 document.getElementById("result").value=t;
}
function cal(event){
 var sign=document.getElementById(event.id).value;
 if(t==""){
  return null;
 }else{
  if(sign=="+"){
   flag=1;
 }else if(sign=="-"){
   flag=2;
 }else if(sign=="*"){
   flag=3;
 }else if(sign=="/"){
   flag=4;
 }else if(sign=="%"){
   flag=5;
 }
first=parseFloat(document.getElementById("result").value);
 document.getElementById("result").value="";
 t="";
 document.getElementById("+").disabled=true;
 document.getElementById("-").disabled=true;
 document.getElementById("*").disabled=true;
 document.getElementById("/").disabled=true;
 document.getElementById("/").disabled=true;
 }
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="300" height="250" border="1" background="Images/1.png" align="center"> 
<tr>
<td height="52" colspan="3"><input name="result" type="text" id="result" value="0." disabled="true"/></td>
<td width="80"><input type="button" value="C" οnclick="backspace();" id="C" class="btn"/></td>
<td width="80"><input type="button" value="CE" οnclick="clearresult();" id="CE" class="btn"/></td>
</tr>
<tr>
<td width="80"><input type="button" value="1" οnclick="getNum(this)" id="1" class="btn"/></td>
<td width="80"><input type="button" value="2" οnclick="getNum(this)" id="2" class="btn"/></td>
<td width="80"><input type="button" value="3" οnclick="getNum(this)" id="3" class="btn"/></td>
<td width="80" height="80"><input type="button" value="+/-" οnclick="cal(this)" id="+/-" class="btn"/></td>
<td width="80" height="80"><input type="button" value="%" οnclick="cal(this)" id="%" class="btn"/></td>
</tr>
<tr>
<td width="80"><input type="button" value="4" οnclick="getNum(this)" id="4" class="btn"/></td>
<td width="80"><input type="button" value="5" οnclick="getNum(this)" id="5" class="btn"/></td>
<td width="80"><input type="button" value="6" οnclick="getNum(this)" id="6" class="btn"/></td>
<td width="80" height="80"><input type="button" value="+" οnclick="cal(this)" id="+" class="btn"/></td>
<td width="80" height="80"><input type="button" value="-" οnclick="cal(this)" id="-" class="btn"/></td>

</tr>
<tr>
<td width="80"><input type="button" value="7" οnclick="getNum(this)" id="7" class="btn"/></td>
<td width="80"><input type="button" value="8" οnclick="getNum(this)" id="8" class="btn"/></td>
<td width="80"><input type="button" value="9" οnclick="getNum(this)" id="9" class="btn"/></td>
<td width="80" height="80"><input type="button" value="*" οnclick="cal(this)" id="*" class="btn"/></td>
<td width="80" height="80"><input type="button" value="/" οnclick="cal(this)" id="/" class="btn"/></td>
</tr>
<tr >
<td width="80"><input type="button" value="0" οnclick="getNum(this)" id="0" class="btn"/></td>
<td width="80"><input type="button" value="." οnclick="getNum(this)" id="." class="btn"/></td>
<td width="80"></td>
<td colspan="2" width="80" height="80" align="center"><input type="button" value="=" οnclick="resultNum()" id="btn1" name="btn1" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>

Css代码：

@charset "utf-8";
/* CSS Document */
.btn{width:80px;
  height:80px;
  font-size: 30px;
  color:#03F;
  opacity:0.6;
}
.btn:hover{background-color:#0F0;}
#btn1{width:100%;
  height:100%;
  font-size:30px;
  opacity:0.6;
}
.btn1:hover{background-color:#0F0;}
#result{width:100%;
  height:100%;
  font-size:30px;
  opacity:0.6;}
#result:hover{background-color:#0F0;}

第一次学习Js一开始就让我们做一个计算器——头疼，经过参考网上各种代码方法，做了一个简单的计算器，仅供交流。

佛挡杀佛非得
关注
用JavaScript实现简单的计算器功能
weixin_44265907的博客
09-07 740
计算器 首先在HTML中创建
javascript实现简易计算器功能
10-14
在本教程中，我们将探讨如何使用JavaScript实现一个简易计算器，涵盖基本的四则运算、小数点、回退、清零等核心功能。这个项目旨在帮助开发者熟练掌握JavaScript编程技巧，包括事件处理、异常处理以及页面元素交互。...
用js简单实现计算器功能
香妹儿的博客
12-13 825
我用的是比较蠢的一种方式，基本用到的就是Math一些相关方法/属性 和简单的函数，完整代码如下： <html> <head> <meta charset="UTF-8"> <title></title> <script> function...
利用JS实现计算器基本运算
最新发布
YhMjQx的博客
08-25 537
本篇文章主要讲解利用JS实现计算器基本运算
JS小Demo实战之一个超级简单的计算器功能的实现。
杨小事er的专栏
06-28 4629
利用Javascript的DOM处理实现的一个小计算器。
用最简单快捷的方法用js写一个计算器
蒲小若的博客
08-11 687
在js的全局方法中有一个eval()方法，由于平时不怎么用，所以到关键时候就没想起来它 想写一个简易的计算器，本来以为要不了多久就能写出来的，谁知道愣是花费了我近两个小时的时间来写，但结果还是不能令我满意。想找一个更好的方法来写，不想写的那么麻烦，用什么方法呢？想了一个遍，后来猛然看到屏幕上有一个eval(),当时我的电脑正打开着网页。福星来了，对啊，我浪费了这么长时间写出来的东西还不能令我满意
html+js实现简易计算器功能
04-22
简易计算器，利用html+js实现，通过浏览器客户端进行编译实现，弹出窗口，进行选择计算。
js实现简易计算器功能
10-16
在实现计算器功能的过程中，我们需要用到的JavaScript知识点主要包括： 1. 事件处理：在本例中，是通过点击事件来触发计算器的计算逻辑。页面加载完成后，我们通过在全局对象window上注册一个onload事件，确保在DOM...
javascript实现计算器功能
10-15
JavaScript实现计算器功能的知识点可以分为以下几个方面详细阐述： 1. HTML结构设计：文章中提供了一个简易计算器的HTML布局，其中使用了div元素来构建计算器的基本外观。在这个布局中，计算器被分为三个主要部分：...
js实现计算器功能
what_happen_to_you的博客
05-26 606
简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style> * { margin: 0; padding: 0; } table { width
5.2.4 超级简单js的小计算器实现 功能简单 仅供学习
世上哪有什么岁月静好,不过是有人替你负重前行
12-18 144
超级简单js的小计算器实现 功能简单 仅供学习 前端代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function math(flag){ var text1 = document.getElementById("text1").v
JavaScript实现的网页计算器功能
Mind_programmonkey的博客
08-21 1646
事件 function count(){ var Txt1=document.getElementById("txt1").value; var Txt2=document.getElementById("txt2").value; var SEL=document.getElementById("select").value;
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
使用JavaScript写一个计算器。（附源码）
qq_39597371的博客
09-26 3057
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;script type="text/javascript"&gt; /*9.编写一个计算器，实现加，减，乘，除，归0，计算功能。*/
使用JS写一个计算器
weixin_30646315的博客
11-08 5704
先上效果图： 简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。 根据预期效果，可以确定页面中的布局要用到table tr td。 所以先放上页面布局,table的边框宽度border，colspan来设置某一行的宽度为4倍一列宽度，显示结果的地方要显示输入的所有值，先用id来区分，给value一个空，来获取其他按钮键入的value值，...
一个简单的计算器——使用System.CodeDom来生成代码
Script Ahead, Code Behind
04-15 1290
链接：[url=http://www.codeproject.com/KB/recipes/matheval.aspx]Evaluating Mathematical Expressions by Compiling C# Code at Runtime[/url], by Marcin Cuprjak (aka Vlad Tepes) 本文只是上面链接里的文章的C# 3.0翻新版。主要是引...
VC6.0计算器（逆波兰） 短学期作业
mhycsj1314的博客
08-20 1016
学校短学期的作业，最初没有头绪的时候参考了 新一凡的博客 http://blog.csdn.net/u013240179/article/details/39105843 上对变量的一些设置以及部分算法，对此表示十分感谢。 同时我在此基础上做出了许多改进。 使用的是Visual C++ 6.0 采用的是逆波兰算法 实现了： 1含有括号的加减乘除运算； 2sin、cos、tan、开方、幂函数等
原生JavaScript实现简单计算器功能代码解析
加法（+）、减法（-）、乘法（*）、除法（/）是实现计算器功能的核心。在JavaScript中，这些运算符可以直接用于数字运算，与在数学公式中的用法相同。 知识点六：结果输出 计算完成后，计算器需要将结果显示给用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值