JS网页计算器

最新推荐文章于 2023-02-06 11:31:05 发布
最新推荐文章于 2023-02-06 11:31:05 发布
阅读量819 收藏
点赞数
文章标签： css html javascript JS计算器 网页计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaron_si/article/details/24137991
版权

最近刚刚开始学习HTML/CSS/JS，打算编一个网页计算器，编好后也发现一些漏洞，如何：我发现计算出一个结果后不能直接继续加减乘除运算，算出一个结果后想算下一个数，直接按下一个数会有错误，必须先清除结果。最后问题还是解决了。不过页面还是很需要改进的，后续还会用CSS继续改进。

         

-----------------------------------------------------------------------------------------------------------------------------------


 -------------------------------------------------------------------------------------------------------------------------------------

<!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=gb2312" />
<title>JS网页计算器</title>

<script type="text/javascript">
var number="" ,number2,a,result=""
function input(n)
{result=""
 number=number+n
 document.myform.mytext.value=number
}

function myclear(n)
{result=""
 number=""
 number2=""
 document.myform.mytext.value=number
}

function plus()
{a=1
 if(result!="")
 	{number=result
	 result=""}
 number2=number
 number=""
}
function minus()
{a=2
if(result!="")
 	{number=result
	 result=""}
 number2=number
 number=""
 
}
function times()
{a=3
if(result!="")
 	{number=result
	 result=""}
 number2=number
 number=""
 
}
function divide()
{a=4
if(result!="")
 	{number=result
	 result=""}
 number2=number
 number=""
 
}
function point()
{
number=number+"."
}
function precent()
{
 number=parseFloat(number)*0.01
 document.myform.mytext.value=number
 number=""
}

function reciprocal()
{
 number=1/parseFloat(number)
 document.myform.mytext.value=number
 number=""
}
function sign()
{
 number=parseFloat(number)*(-1)
 document.myform.mytext.value=number
 
}

function backspace()
{

 document.myform.mytext.value=document.myform.mytext.value.slice(0,-1)
 number=document.myform.mytext.value

}

function ce(n)
{result=""
 number=""
 document.myform.mytext.value=number
}


function radical()
{
 number=Math.sqrt(parseFloat(number))
 document.myform.mytext.value=number
 
}


function equal()
{
if(a==1)
	{result=parseFloat(number)+parseFloat(number2)
	 document.myform.mytext.value=result
	 number=""
	}
if(a==2)
	{result=parseFloat(number)*(-1)+parseFloat(number2)
	 document.myform.mytext.value=result
	 number=""
	}
if(a==3)
	{result=parseFloat(number)*parseFloat(number2)
	 document.myform.mytext.value=result
	 number=""
	}
if(a==4)
	{result=parseFloat(number2)*(1/parseFloat(number))
	 document.myform.mytext.value=result
	 number=""
	}


}
</script>

<style type="text/css">
input {font:华文细黑; font-weight:700; color:#0033CC;}
</style>
</head>


<body  background="2012052412255329.jpg">
<form name="myform">
  
  <table border="5"  style="border-color: #FFFFFF" align="center" cellpadding="0" cellspacing="0"   background="2012052412255329.jpg" >
    
    <tr align="center" valign="middle">
      <th  height="40" colspan="5"><input type="text"  style="width:300px; height:75px; font-size:20px;""  name="mytext" value="JS网页计算器"  /></th>
    </tr>
   
    <tr>
      <th width="64" height="69" align="center" valign="middle" ><input name="button" type="button"  value="←"  οnclick="backspace()" style="height:40px; width:50px;" /></th>
      <th width="50"><input name="button"  type="button"  value="CE" οnclick="ce()" style="height:40px; width:50px; font:华文细黑; font-weight:700;" /></th>
      <th width="54"><input name="button" type="button"  value="C" οnclick="myclear()" style="height:40px; width:50px;" /></th>
      <th width="54"><input name="button" type="button"  value="±"  οnclick="sign()" style="height:40px; width:50px;" /></th>
      <th width="50"><input name="button" type="button"  value="√" οnclick="radical()" style="height:40px; width:50px;" /></th>
    </tr>
    
	<tr >
      <th width="64" height="60" align="center" valign="middle">
	  <input name="button" type="button"  value="1"  οnclick="input(value)"style="height:40px; width:50px;" /></th>
      <th><input name="button" type="button"  value="2" οnclick="input(value)" style="height:40px; width:50px;" /></th>
      <th><input name="button" type="button"  value="3" οnclick="input(value)"style="height:40px; width:50px;"  /></th>
      <th ><input name="button" type="button"  value="/"  οnclick="divide()" style="height:40px; width:50px;" /></th>
      <th><input name="button" type="button"  value="%" οnclick="precent()" style="height:40px; width:50px;" /></th>
    </tr>
    <tr>
      <th width="64" height="62" align="center" valign="middle"><input name="button" type="button"  value="4" οnclick="input(value)" style="height:40px; width:50px;"/></th>
      <th><input name="button" type="button"  value="5" οnclick="input(value)" style="height:40px; width:50px;" /></th>
      <th><input name="button" type="button"  value="6"οnclick="input(value)"  style="height:40px; width:50px;" /></th>
      <th "><input name="button" type="button"  value="×" οnclick="times()" style="height:40px; width:50px;" /></th>
      <th><input name="button" type="button"  value="1/x" οnclick="reciprocal()" style="height:40px; width:50px;" /></th>
    </tr>
    <tr>
      <th width="64" height="59" align="center" valign="middle">
	  <input name="button" style="height:40px; width:50px;" type="button"  value="7" οnclick="input(value)" /></th>
      <th><input name="button"  type="button"  value="8" οnclick="input(value)" style="height:40px; width:50px;" /></th>
      <th><input name="button" type="button"  value="9" οnclick="input(value)" style="height:40px; width:50px;" /></th>
      <th ><input name="button" type="button"  value="-" οnclick="minus()" style="height:40px; width:50px;" /></th>
      <th rowspan="2"><input name="button" type="button"  value="=" οnclick="equal()" style="height:120px; width:50px;" /></th>
    </tr>
    <tr>
      <th height="40" colspan="2" align="center" valign="middle"><input name="button" type="button"  value="0"οnclick="input(value)"  style="height:40px; width:120px;" /></th>
      <th><input name="button" type="button"  value="." οnclick="point()" style="height:40px; width:50px;" /></th>
      <th  ><input name="button" type="button"  value="+" οnclick="plus()" style="height:40px; width:50px;" /></th>
    </tr>
  </table>
</form>
</body>
</html>






nceuaprsf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js网页版计算器的简单实现
10-27
介绍了网页版计算器的简单实现代码，有需要的朋友可以参考一下
超漂亮JS网页计算器
05-11
摘要:脚本资源,Ajax/JavaScript,网页计算器 超漂亮JS网页计算器，用js实现了加减乘除运算的计算器代码，界面漂亮，功能方面只实现了最基础的基本计算功能，在火狐或Chrome下有更美观的表现，本代码只是介绍你一种用...
JavaScript 网页简易计算器
weixin_62630571的博客
02-06 844
JavaScript 设计简易计算器
用JavaScript实现一个简单的网页版计算器
run_bear的博客
08-05 9469
背景 实现效果 最终展现的页面如下图 用到的技术 实现思路 具体实现代码
js实现的网页版的计算器（简单、方便）
youngerhao的专栏
02-21 1011
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 计算器  var clearFlag=false;  function getNum(num){  //alert(num);   var objresult=document.getElement
用JavaScript制作简单的网页计算器
小言同学的博客
11-12 8352
一、题目 利用JavaScript中的函数，完成数字加、减、乘、除的运算，实现一个简单的计算器。 二、代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>网页计算器</title> </head> <body> <div> <p>数字1：<input type="text" id="num1"/&g
用js做出计算机界面,网页版计算器的实现(js实现计算功能)
weixin_31826689的博客
07-24 1370
标签都有一个点击事件,appContent(this),相信大家也看得懂,这是把点击的当前的对象当成参数传进方法中,其实这样子做的目的应该能猜到,就是往上面的框框中尾加字符串的意思,除了几个特别的,比如图中的"del","c","="这几个是不能尾加的,所以需要另作考虑,既然这样的话,那我们的代码其实就很简单了:function appContent(td){//找到显示字符串等式的td标签var...
javascript网页计算器
10-21
JavaScript网页计算器是基于Web浏览器的一种交互式计算工具，利用JavaScript编程语言实现，可以在网页上进行基本的数学运算。本文将详细介绍如何使用JavaScript构建一个具备显示当前时间、清零、加减乘除取模运算...
js 前端实现网页计算器
01-31
本项目“js 前端实现网页计算器”旨在教你如何利用HTML、CSS和JavaScript创建一个功能完备的网页计算器。下面我们将详细探讨这个过程中的关键知识点。 首先，我们需要创建HTML结构。HTML（超文本标记语言）是网页的...
js网页在线计算器
05-01
"js网页在线计算器"是一个基于JavaScript实现的网页应用，它提供了一种在浏览器环境中进行基本数学计算的界面。JavaScript是一种广泛用于网页开发的编程语言，能够为网页添加交互性，使得用户无需离开当前页面就能...
JS实现基本的网页计算器功能示例
11-21
本文实例讲述了JS实现基本的网页计算器功能。分享给大家供大家参考，具体如下： <html> <head> <title>网页计算机</title> <meta charset="UTF-8"/> <style type="text/css"> #jsjdiv{ border: solid 1px black; border-radius: 5px; width: 200px; /*hei
HTML5实现网页计算器
08-18
这是个用html5 + css3 + js写的网页计算器，支持括号运算，支持键盘输入、删除键删除输入，按键盘时计算器按键发亮
js编写的一个网页版的计算器
05-16
这是一个用javascript编写的计算器，界面是网页版。而且采用的是css布局，而不是用表格，模仿的是windows8.1自带的计算器。
自制js+html网页版超级计算器
11-07
采用js+html实现的计算器，丰富的功能，三种主题，超级计算器不但有计算器的基本功能，还有集合输入，可以计算方差，标准差，sum，avg，logx^y,y√x,多进制转换，π,幂，随机数，阶乘，三角函数，倒计时
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
js实现计算器效果
Yel_Liu的博客
10-29 976
公司有道面试题是实现计算器的效果，所有面试者都是进行了很复杂的判断来计算的，甚至使用了正则表达式进行验证，其实本题只是考察js基础知识，关于计算只要使用eval()方法就可以得到结果 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。  eval()方法工作中不常用（至少我很少用到），面试者应该是在这样的情况下没有想到该方法而已，下面给出代码，代码中只做了简单的...
Web网页实现计算器功能
L的博客
08-20 2万+
计算器说明：主要是对样式和一些简单的文本操作进行，计算用到的是js内置的eval()函数，只需要将文本框的字符串作为参数传入即可得到结果，能够进行简单的运算，非常强大！<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <style type="text/
JavaScript计算器
老李家的博客
10-30 757
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;计算器的实现&lt;/title&gt;     &lt;/head&gt;     &lt;script type="text/javasc
js 网页做一个简单的计算器
qq_52016756的博客
04-10 940
结果截图 <!doctype html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <style> div{ margin-left:40%; } input{ width: 70px; height: 30px; border: 0px
使用js实现网页计算器
最新发布
06-12
好的，这里给你提供一个简单的网页计算器的实现，你可以参考一下： HTML 代码： ``` <div> <input type="text" id="result" readonly> </div> <div> <button onclick="appendNumber('7')">7</button> <button onclick="appendNumber('8')">8</button> <button onclick="appendNumber('9')">9</button> <button onclick="appendOperator('+')">+</button> </div> <div> <button onclick="appendNumber('4')">4</button> <button onclick="appendNumber('5')">5</button> <button onclick="appendNumber('6')">6</button> <button onclick="appendOperator('-')">-</button> </div> <div> <button onclick="appendNumber('1')">1</button> <button onclick="appendNumber('2')">2</button> <button onclick="appendNumber('3')">3</button> <button onclick="appendOperator('*')">*</button> </div> <div> <button onclick="appendNumber('0')">0</button> <button onclick="appendOperator('/')">/</button> <button onclick="clearResult()">C</button> <button onclick="calculate()">=</button> </div> ``` JavaScript 代码： ``` let result = document.getElementById('result'); function appendNumber(num) { result.value += num; } function appendOperator(operator) { result.value += operator; } function clearResult() { result.value = ''; } function calculate() { try { result.value = eval(result.value); } catch (error) { result.value = 'Error'; } } ``` 这个计算器实现了加减乘除四种基本运算，以及清空和计算结果的功能。当用户点击数字键或运算符键时，会将对应的字符添加到文本框中；当用户点击计算键时，会计算表达式的值并显示在文本框中；如果表达式不合法，则显示 "Error"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值