html+js实现四则元算计算器

最新推荐文章于 2023-04-25 17:50:26 发布
最新推荐文章于 2023-04-25 17:50:26 发布
阅读量213 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/jiangwenli/p/4889743.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>
<h1>四则运算计算器</h1><hr />

</head>

<body>

<form name="calc">
<table border="1" bgcolor="#c0c0c0">
	<tr>
		<td colspan=4>
   		 <input type="text" name="expr" size=30 action="compute(this.form)" />
		</td>
	</tr>
	<tr>
		<td align="center">
        <input type="button" id="button"value="1" οnclick="enter(this.form,one)" style="		 						border-style:double;border-width:3px" />
        </td>
 		<td align="center">
        	<input type="button" id="button" value="2" οnclick="enter(this.form,two)" style="	 				border-style:double;border-width:3px" />
        </td>
 		<td align="center">
        <input type="button" id="button"value="3" οnclick="enter(this.form,three)" 
        style="border-style:double;border-width:3px" />
        </td>
       <td align="center">
       		<input type="button" id="button"
 		value="+" οnclick="enter(this.form,plus)" style="border-style:double;border-width:3px" 			/>
       </td>
	</tr>
	<tr>
		<td align="center">
        <input type="button" id="button"
 		value="4" οnclick="enter(this.form,four)" style="border-style:double;border-width:3px" 			/>
		 </td>
 		<td align="center">
        <input type="button" id="button"
 			value="5" οnclick="enter(this.form,five)" style="border-style:double;border-width:	           3px" />
        </td>
  		<td align="center">
        <input type="button" id="button"
		 value="6" οnclick="enter(this.form,six)" style="border-style:double;border-width:3px" 			/>
         </td>
 		<td align="center">
        	<input type="button" id="button"
 			value="-" οnclick="enter(this.form,minus)" style="border-style:double;border-width:3px" />
 		</td>
	</tr>
	<tr>
		<td align="center"><input type="button" id="button"
 			value="7" οnclick="enter(this.form,seven)" style="border-style:double;border-width:3px" />
 		</td>
 		<td align="center"><input type="button" id="button"
 			value="8" οnclick="enter(this.form,eigth)" style="border-style:double;border-width:3px" />
 		</td>
 		<td align="center"><input type="button" id="button"
 			value="9" οnclick="enter(this.form,nine)" style="border-style:double;border-width:3px" />
         </td>
 		<td align="center"><input type="button" id="button"
			 value="*" οnclick="enter(this.form,multiply)" style="border-style:double;border-width:3px" />
        </td>
	</tr>
	<tr>
		<td colspan=2 align="center"><input type="button" id="button"
 			value="      0      " οnclick="enter(this.form,zero)" style="border-style:double;border-width:3px" />
        </td>
        <td align="center"><input type="button" id="button"
  			value="." οnclick="enter(this.form,decimal)" style="border-style:double;border-width:3px" />
 		</td>
 		<td align="center"><input type="button" id="button"
 		value="/" οnclick="enter(this.form,divide)" style="border-style:double;border-width:3px" />
        </td>
 	</tr>
 	<tr>
		<td colspan=2 align="center"><input type="button" id="button"
 			value="   =   " οnclick="compute(this.form)"/>
        </td>
 		<td colspan=2 align="center">
 			<input type="button" 
 			value="AC" size=10  onClick="clear(this.form)"  />
        </td>

 	</tr>
</table>

</form>
</body>
</html>

 

<script type="text/javascript">
function compute(obj){
	obj.expr.value=eval(obj.expr.value);
		}
var one="1",two="2",three="3",four="4",five="5",six="6",seven="7",eigth="8",nine="9";
	var zero="0",plus="+",minus="-",multiply="*",divide="/",decimal=".";
	function enter(obj,string){
		obj.expr.value+=string;
		
		}
	function clear(obj){
		obj.expr.value= "";
		
		}


</script>

 

转载于:https://www.cnblogs.com/jiangwenli/p/4889743.html

weixin_33984032
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML计算器_html记算器_html计算器_
10-03
简易的html计算器，可实现加减乘除和科学计算器功能。由于计算部分使用JavaScript原生四则运算，所以精度不可靠。
用html、css、js写一个四则运算计算器
weixin_68478645的博客
01-30 673
第三步js：1、点击计算按钮获取用户输入的值,及选择的符号。//根据选择符号 运算。//获取用户输入的值。3、把计算好的结果赋值到结果框。第一步：用HTML完成布局。2、计算得到用户想要的结果。第二步：用css添加样式。
html编辑四则运算,简单的web四则运算计算器
weixin_42367233的博客
06-17 780
caculator.html简单的计算器style.css#my_table{text-align: center;border-style: none;}func.jsvar one='1' ,two='2' ,three='3' ,four='4' ;var five='5' ,six='6' ,seven='7' ,eight='8' ;var nine='9' ,zero='0' ;va...
HTML实现简单的四则运算,JavaScript实现简单的四则运算计算器完整实例
weixin_30514427的博客
06-09 686
本文实例讲述了JavaScript实现简单的四则运算计算器。分享给大家供大家参考，具体如下：运行效果图如下：完整实例代码如下：computerfunction compute(){str1=Number(document.getElementById("txt1").value);str2=Number(document.getElementById("txt2").value);comp=doc...
用HTML实现简易版计算器
热门推荐
lkllkl123123的博客
08-13 1万+
计算器功能：实现了加减乘除、清零、回退、四则运算等等 HTML部分：用表格添加按键，用div块显示内容 CSS部分：将显示的内容定位到div块右下角 JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容，再调用eval方法将获取到的内容转换为js代码进行计算........................
基于html+css+js实现简易计算器代码实例
10-15
最后，JavaScript（JavaScript Object Notation）负责实现计算器的功能。在`contain.js`中，我们可以编写事件监听器和计算逻辑。例如： ```javascript function get(value) { document.querySelector('#display')....
用 js+html 实现一个网页计算器
05-31
使用js + html 实现的简单的网页计算器，可以实现加、减、乘、除复杂运算，二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
html+js实现简易计算器功能
04-22
简易计算器，利用html+js实现，通过浏览器客户端进行编译实现，弹出窗口，进行选择计算。
html+js+css实现简易计算器.rar
最新发布
05-18
通过这段简单的HTML、CSS和JavaScript代码，我们已经成功创建了一个基本的计算器。当然，这只是一个起点。你可以根据需要添加更多功能，比如支持更多的数学运算，或者改进用户界面。现在，打开你的文本编辑器，开始...
HTML实现计算器
m0_62727420的博客
07-03 1万+
HTML实现计算器
使用HTML5、CSS3和JavaScript实现简易四则运算
04-26
使用HTML5、CSS3和JavaScript实现加、减、乘、除四个基本算术运算操作。
HTML计算器实现加减乘除
08-14
HTML编写简单的计算器实现加减乘除
带括号的四则运算表达式js实现
04-29
输入一个字符串形式的四则运算表达式，如"1.0+2.1*(3+4)" 直接谈出结果，输入在文件底部，自己写的。思路是先把中缀表达式转成后缀表达式，然后根据后缀表达式建立一个栈求出结果
html+js实现简单的计算器代码(加减乘除)
01-19
html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title></title> </head> <body> <input type=button value=add onclick=setOp('+', 'add');/> <input type=button value=miner onclick=
JavaScript实现简单的四则运算计算器完整实例
11-27
本文实例讲述了JavaScript实现简单的四则运算计算器。分享给大家供大家参考，具体如下： 运行效果图如下： 完整实例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>computer</title> [removed] function compute(){ str1=Number(document.getElementById("txt1").value); str2=Number(document.getElementById("txt2").valu
四则运算计算器
程序羊的博客
09-25 1181
结果示例图： 示例代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>四则运算计算器</title> </head> <body&g...
HTML实现加减乘除的计算器+JavaScrip小知识点
全栈
04-15 6857
下面是一些小的知识点，可以看看，网页的计算机代码在下面，小伙伴们花点耐心， 1、form表单 form提交数据 提交方式有两种：action提交路径，mothod提交方式 提交方式有两种：get显示数据，post隐藏数据， input：属性 name起名字，id唯一，checked单选框选中，selected下拉框选中，select下拉框，option列表选项，textarea文本域，text文本框，password密码框，radio单选按钮，CheckBox多选框，submit提交...
js四元运算符
weixin_60196946的博客
04-25 311
js四元运算符
HTML+JS实现计算器
04-27
好的，下面是一个简单的HTML和JS实现的计算器： ```html <!DOCTYPE html> <html> 计算器 input[type="button"] { width: 50px; height: 50px; font-size: 20px; margin: 5px; border: none;...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值