用JavaScript制作简单的计算器

<html >
<head>

<title>简单计算器</title>
<style type="text/css">
	div{
		margin:auto;
		background-color:#ff4365;
		width:550px;
		height:280px;
		border:ridge #ff4365 4px;
	}
	table{
		width:500px;
		margin:auto;
		padding-top:10px;
	}
	td{
		height:20px;
		padding:2px 6px;

		text-align:center;
	}
	input{
		width:100px;
		height:35px;
		background:#99FFCC;
		font-size:16px;
		color:#0033CC;
	}
	.input1{
		width:494px;
		padding:0px;
		margin:0px;
		padding:5px;
		font-size:25px;
		background:#FFFF93;
		color:#000000;
	}
	h1{
		color:#ff4365;
		font-size:50px;
		border:groove 2px #ff4365;
		width:160px;
		background:#99FFCC;
	}
</style>
<script type="text/javascript">
	var num;
	function buttontext(num)
	{

		document.getElementById(‘1‘).value+=document.getElementById(num).value;
	}
	function compute()
	{
		document.getElementById(‘1‘).value=eval(document.getElementById(‘1‘).value);
	}
	function del1()
	{
		document.getElementById(‘1‘).value=document.getElementById(‘1‘).value.substring(0,document.getElementById(‘1‘).value.length-1);
	}
	function del2()
	{
		document.getElementById(‘1‘).value=‘‘;
	}
	function sqrt1()
	{
		document.getElementById(‘1‘).value=Math.sqrt(document.getElementById(‘1‘).value);
	}
	function Pow()
	{
		document.getElementById(‘1‘).value=Math.pow(document.getElementById(‘1‘).value,2);
	}
</script>
</head>

<body bgcolor="#ff7575">
<center>
<h1>计算器</h1>
</center>
<div>
	<table>
		<tr>
		<td colspan="4"><input type="text" class="input1" id="1" value="0" name="text1"/></td>
		</tr>

		<tr>
			<td><input type="button" id="2" value="+" onclick="buttontext(‘2‘)"/></td>
			<td><input type="button" id="3" value="1" onclick="buttontext(‘3‘)"/></td>
			<td><input type="button" id="4" value="2" onclick="buttontext(‘4‘)"/></td>
			<td><input type="button" id="5" value="3" onclick="buttontext(‘5‘)"/></td>
		</tr>

		<tr>
			<td><input type="button" id="6" value="-" onclick="buttontext(‘6‘)"/></td>
			<td><input type="button" id="7" value="4" onclick="buttontext(‘7‘)"/></td>
			<td><input type="button" id="8" value="5" onclick="buttontext(‘8‘)"/></td>
			<td><input type="button" id="9" value="6" onclick="buttontext(‘9‘)"/></td>
		</tr>

		<tr>
			<td><input type="button" id="10" value="*" onclick="buttontext(‘10‘)"/></td>
			<td><input type="button" id="11" value="7" onclick="buttontext(‘11‘)"/></td>
			<td><input type="button" id="12" value="8" onclick="buttontext(‘12‘)"/></td>
			<td><input type="button" id="13" value="9" onclick="buttontext(‘13‘)"/></td>
		</tr>

		<tr>
			<td><input type="button" id="14" value="/" onclick="buttontext(‘14‘)"/></td>
			<td><input type="button" id="15" value="0" onclick="buttontext(‘15‘)"/></td>
			<td><input type="button" id="16" value="." onclick="buttontext(‘16‘)"/></td>
			<td><input type="button" id="17" value="=" onclick="compute()"/></td>
		</tr>

		<tr>
			<td><input type="button" id="18" value="√" onclick="sqrt1()"/></td>
			<td><input type="button" id="19" value="平方根" onclick="Pow()"/></td>
			<td><input type="button" id="20" value="C" onclick="del2()"/></td>
			<td><input type="button" id="21" value="←" onclick="del1()"/></td>
		</tr>

	</table>
</div>
</body>
</html>

时间： 2024-08-10 17:02:02

用JavaScript制作简单的计算器的相关文章

VS2012中使用MFC制作简单的计算器

用MFC来制作一个简单的计算器,来加深对MFC学习的理解,这个计算器是建立在对话框的基础上,下面来简单介绍下如何制作属于你自己的计算器 1.首先,点击VS2012,启动VS软件,然后建立如下图所示的应用程序,在图的下面输入项目名 2.建立基于对话框的标准程序,如下图所示,其余设置采用系统设置,点击完成 3.如下图,软件会生成下面的对话框,还有相应的库,代码,资源文件等 4.对上面的对话框进行编辑,如下图中所示,最后编辑的样子如下,其中1,5,6是Edit 控件,2,7是静态控件,3是buttio

js制作简单的计算器

学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> input{width:10

jQuery/javascript实现简单网页计算器

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery实现</title> 5 <script src="jquery.js"></script> 6 7 <style type="text/css"> 8 table{background-color:pink;width:300px;he

Javascript 实现简单计算器实例代码

Javascript 实现简单计算器实例代码这篇文章主要介绍了Javascript 实现简单计算器实例代码的相关资料,需要的朋友可以参考下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

留念 C语言第一课简单的计算器制作

学C语言这么久了. /* 留念 C语言第一课简单的计算器制作 */ #include<stdio.h> #include<stdlib.h> #include<conio.h>void displayMenu();void add();void sub();void multiply();void divide();void yushu();void jiecheng();void leijia();void jiechengleijia();int main(in

JAVASCRIPT实现简单计算器

最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分?? 图-1 图-2 HTML代码如下 <body> <div id="calculator"> <div class="LOGO"> <span class="name">简单的计算器</span

JavaScript基础--简单功能的计算器(十一)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

1.C#WinForm基础制作简单计算器

利用c#语言编写简单计算器: 源码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace 简单计算器 { public partial class Form1 : Form { public For

使用qt制作一个简单的计算器

前言:今天使用qt制作了一个很简单的计算器,觉得挺有意思的,所以在这里跟大家分享一下. 这里先跟大家说说使用到的函数: 一.槽连接函数 connect(信号发送者,发送的信号,信号接收者,信号接收者的槽函数) //前面我有一篇文章已经介绍过槽函数的使用了,大家有兴趣可以看看,这里就不详细说了. 二.取出按钮中的字符 QString line = ui->pushButton1->text() //取出按钮pushButton1中的字符存放到line中三.设置输入框中显示的内容 ui->