<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. React Native笔记

    ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快速开发App ④ iOS&Android大部分代码通用 ⑤ code-push能做热更新,但是用不好依旧坑

  2. 【相关网站 - 01】- Java 相关网站

    一.官方网站 1. Java 官方网站 https://www.java.com/zh_CN/ 2. Spring 官方网站 http://spring.io/ 1. Spring Framework ...

  3. 2019-04（2）Python学习

    一.元组 1.什么是元组? 元组是一个固定长度,不可改变的Python序列对象.创建元组的最简单方式,是用逗号分隔一列值: In [1]: tup = 4, 5, 6 In [2]: tup Out[ ...

  4. input控制输入保留一位小数

    function zlip(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符 obj.val ...

  5. SQLServer导入导出命令报错

    错误描述: SQL Server阻止了对组件‘xp_cmdshell’的过程‘sys.xp_cmdshell’的访问.因为此组件已作为此服务嚣安全配置的一部分而被关闭. 系统管理员可以通过使用sp_c ...

  6. mumu模拟机安装证书

    1. 先设置锁屏密码 2. 证书.crt才可以直接安装..der和.cer的都不可以.

  7. SVN chechout 错误： xxx is not valid as filename in directory

    转载:https://blog.csdn.net/ClementAD/article/details/47838989 意思就是Linux系统允许文件或文件夹的名字包含空格,而windows是不允许的 ...

  8. Cannot retrieve metalink for repository: epel/x86_64. Please verify its path and try again

    虚拟机恢复快照后,使用yum安装软件,提示下面的信息,开始以为是yum源的问题或者DNS的问题,但是无果,最后再看一下服务器的时间,坑了,还原快照,时间变成以前的了. [root@localhost ...

  9. java中函数的参数传递

    转载  https://www.cnblogs.com/lixiaolun/p/4311863.html 转载https://www.cnblogs.com/wutianqi/p/8723582.ht ...

  10. Vue+Webpack构建去哪儿APP_一.开发前准备

    一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...