<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. c#Socket Tcp服务端编程

    创建一个socket服务类,绑定监听端口, 然后创建一个线程listen连接的客户端, 把监听到的客户端加入dictionary里面,以便于管理, 同时创建receive线程,循环接收数据加入list ...

  2. Shiro 整合 SpringBoot

    https://blog.csdn.net/weixin_38132621/article/details/80216056

  3. python之集合及其方法---整理集

    集合的定义: 由不同元素组成.一组无序排列的可hash值.集合中元素必须是不可变类型 集合的定义方式: 由大括号组成: 每个元素用逗号分隔: 元素书写不是key-value形式: 集合是由不同元素组成 ...

  4. 初步了解Spring

    1.了解“控制反转” 控制反转也称为依赖注入,是面向对象编程中的一种设计理念,用来降低程序代码之间的耦合度. 下面是一个最简单的打印机实例 纸张接口,纸张有大小 继承它的有两个类,两种纸张大小的类 A ...

  5. python note 13 内置函数

    1. lst = ["白蛇传","骷髅叹","庄周闲游"] it = lst.__iter__() print(it.__next__()) ...

  6. Windows防火墙开启ping,禁ping的配置方法

    Windows 7,Win 2008 R2,2012 R2: Windows防火墙 --> 高级设置 --> 入站规则 --> 在列表里找到“文件和打印机共享(回显请求 - ICMP ...

  7. ajax获取数据中文显示问号

    技术交流群:816227112 问题: 解决 : 在 response.getWriter() 之前加上 response.setContentType("text/html;charset ...

  8. mongocxx-driver编译安装

    1. 确保安装epel yum install -y epel-release 2. 按照<CentOS7.2部署node-mapnik>一文中的步骤,手动安装 gcc-6.2.0 和 b ...

  9. Learning to Promote Saliency Detectors

    Learning to Promote Saliency Detectors 原本放在了思否上, 但是公式支持不好, csdn广告太多, 在博客园/掘金上发一下 https://github.com/ ...

  10. Django使用cropbox包来上传裁剪图片

    1.使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I ImgCrop包包括:css--style.css,js--cropb ...