<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>

　　

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

  1. js制作简单的计算器

    学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title&g ...

  2. JavaScript+HTML,简单的计算器实现

    成功进化到程序猿快一年多了, 还没写过计算器, 正好今天比较闲,随手写了个计算器,最简单的实现,核心是eval()方法,把字符串作为JS代码处理,把输入的信息拼接成字符串,点等号执行代码得到结果,出异 ...

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

    <html> <head> <meta charset="utf-8"> <title>jQuery实现</title> ...

  4. 利用css和javascript实现简单的计算器

    <!doctype html> <html> <head> <!--声明当前页面的编码集--> <meta http-equiv="Co ...

  5. JAVASCRIPT实现简单计算器

    最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分? ...

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

    留念 C语言第一课简单的计算器制作 学C语言这么久了.  /* 留念 C语言第一课简单的计算器制作 */   #include<stdio.h>  #include<stdlib.h ...

  7. javascript 简单的计算器

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

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

    前言:今天使用qt制作了一个很简单的计算器,觉得挺有意思的,所以在这里跟大家分享一下. 这里先跟大家说说使用到的函数: 一.槽连接函数 connect(信号发送者,发送的信号,信号接收者,信号接收者的 ...

  9. Highcharts使用教程（1）：制作简单图表

    今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...

随机推荐

  1. BackgroundWorker 组件

    代码: static void Main(string[] args) { BackgroundWorker bw = new BackgroundWorker(); bw.WorkerReports ...

  2. Could not HEAD 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.0/gradle-3.2.0.pom'.

  3. java中接口和抽象类的异同点

    抽象类和接口的区别:A:成员区别 抽象类: 成员变量:可以变量,也可以常量 构造方法:有 成员方法:可以抽象,也可以非抽象 接口: 成员变量:只可以常量,默认修饰符:public static fin ...

  4. SQLServer “无法对数据库'XXX' 执行删除，因为它正用于复制”的解决方法

    “无法对数据库'XXX'执行删除,因为它正用于复制” 解决办法: 执行  sp_removedbreplication 'XXX'  这个语句的解释是:从数据库中删除所有复制对象,但不更新分发服务器上 ...

  5. 关于AVL树的思考

    AVL树即平衡二叉树,每个结点有一个平衡因子,即左子树高度减去右子树高.每插入一个结点时,从根部开始按二叉排序树的方法,与节点不断比较,按大小向左右子树插入.在与最后的节点比较后插入时,若有兄弟节点, ...

  6. C++ map 使用erase在windows下崩溃，在linux下没有问题的原因

    注意:此程序在win环境下会出现上述描述的问题:在mac环境下第一种方式是正常运行的.Map.erase有3个重载函数: void erase(iterator position); size_typ ...

  7. oracle 按表数据新增一行

    在功能实现时,能尽量用一个sql语句直接实现业务逻辑的话,就不要去写C#代码,便于维护. 以下sql的逻辑是:给明细表新增一条数据,前提是传入的债券代码存在与债券表,否则不新增.此sql返回受影响行数 ...

  8. Scrapy中集成selenium

    面对众多动态网站比如说淘宝等,一般情况下用selenium最好 那么如何集成selenium到scrapy中呢? 因为每一次request的请求都要经过中间件,所以写在中间件中最为合适 from se ...

  9. Centos7 优盘U盘安装以及解决安装时引导错误

    一.使用UltraISO将安装镜像iso文件,写入优盘(写入硬盘映像).将优盘盘符名改为CENTOS7,否则以后引导很麻烦二.将优盘插入要安装CentOS7的电脑,设置开机U盘启动三.并启动到安装界面 ...

  10. HDU 2196.Computer 树形dp 树的直径

    Computer Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...