<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. 第一篇 Flask

    第一篇 Flask     一. Python 现阶段三大主流Web框架 Django Tornado Flask 对比 1.Django 主要特点是大而全,集成了很多组件,例如: Models Ad ...

  2. 分组\聚合\F\Q查询

    一.分组和聚合查询 1.aggregate(*args,**kwargs)  聚合函数 通过对QuerySet进行计算,返回一个聚合值的字典.aggregate()中每一个参数都指定一个包含在字典中的 ...

  3. Error merging: refusing to merge unrelated histories

    解决方案: git pull git pull origin master git pull origin master --allow-unrelated-histories idea提交git提交 ...

  4. Joe Hocking - Unity in Action. 2nd Ed [2018]

    Unity in Action. 2nd Ed, 一本关于unity开发的英文书籍,初中级 PDF格式 扫码时备注或说明中留下邮箱 付款后如未回复请至https://shop135452397.tao ...

  5. python入门day02数据类型

    字符串:数据类型的学习 #======================================基本使用====================================== #1.用途 ...

  6. CMD运行JAVA出现编码GBK的不可映射字符处理方法?

    方法一: (将notepad编辑器的编码方式改为ANSI后再进行程序代码的编译,将之前乱码的汉字删除重新输入正常的汉字) 1.notepad编辑器默认编码方式为UTF-8时,CMD里面执行javac ...

  7. Ruby http/net 中连接超时问题

    下面在调用币安的接口时,经常会卡住,设置连接超时也不会抛出异常,代码如下(默认连接超时为nil, 参考:https://github.com/ruby/ruby/pull/269): require ...

  8. Kafka 性能测试报告

    Producer command: kafka-producer-perf-test --topic _perf-test --num-records 10000000 --record-size 1 ...

  9. Docker 镜像使用

    当运行容器是,使用的镜像如果在本地中不存在,docker就会自动从docker镜像仓库中下载,默认是从Docker Hub 公共镜像源下载. 下面我们来学习: 1.管理和使用本地Docker主机镜像 ...

  10. linux学习第十三天 (Linux就该这么学)找到一本不错的Linux电子书

    今天主要讲了vftp 服务的配置,不家三种访问方式   一,匿名访问模式  二,本地访问模式   三,虚拟用户模式  和,tftp简单文件传输协议 也讲了要孝试的服务,sabma服务的配置,及wind ...