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

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

js制作简单的计算器
学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title&g ...
JavaScript+HTML,简单的计算器实现
成功进化到程序猿快一年多了, 还没写过计算器, 正好今天比较闲,随手写了个计算器,最简单的实现,核心是eval()方法,把字符串作为JS代码处理,把输入的信息拼接成字符串,点等号执行代码得到结果,出异 ...
jQuery/javascript实现简单网页计算器
<html> <head> <meta charset="utf-8"> <title>jQuery实现</title> ...
利用css和javascript实现简单的计算器
<!doctype html> <html> <head>  <meta http-equiv="Co ...
JAVASCRIPT实现简单计算器
最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分? ...
留念 C语言第一课简单的计算器制作
留念 C语言第一课简单的计算器制作学C语言这么久了. /* 留念 C语言第一课简单的计算器制作 */ #include<stdio.h> #include<stdlib.h ...
javascript 简单的计算器
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
使用qt制作一个简单的计算器
前言:今天使用qt制作了一个很简单的计算器,觉得挺有意思的,所以在这里跟大家分享一下. 这里先跟大家说说使用到的函数: 一.槽连接函数 connect(信号发送者,发送的信号,信号接收者,信号接收者的 ...
Highcharts使用教程（1）：制作简单图表
今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一在网页中添加一个div.设置id,设置图表长.高.代码如 ...

随机推荐

java使用selenium版本不兼容解决汇总
selenium之webDriver与浏览器版本问题 http://blog.csdn.net/xqhadoop/article/details/77892796 selenium自动化测试资源整理( ...
SQL 数据开发（经典）转贴
数据开发(经典) 1.按姓氏笔画排序: Select * From TableName Order By CustomerName Collate Chinese_PRC_Str oke_ci_as ...
企业BGP网络规划案例（二）
设计思路梳理 1.AS的划分 : 由于该办公网物理上被划分为总部和两个异地的办公分支,总部和分支互联采用MSTP线路,为了方便管理和更为灵活的进行路由控制,选择BGP作为总部和分支的路由协议.关于AS ...
机器学习（四）--------逻辑回归(Logistic Regression)
逻辑回归(Logistic Regression) 线性回归用来预测,逻辑回归用来分类. 线性回归是拟合函数,逻辑回归是预测函数逻辑回归就是分类. 分类问题用线性方程是不行的线性方程拟合的是连 ...
Python之路(第三十二篇) 网络编程：udp套接字、简单文件传输
一.UDP套接字服务端 # udp是无链接的,先启动哪一端都不会报错 # udp没有链接,与tcp相比没有链接循环,只有通讯循环 server = socket.socket(socket.AF_I ...
expdp/impdp数据泵用法
--创建目录映射别名 create directory JHRA as 'C:\DataBaseBak\hra_dev\JHRA' --导出数据 expdp JHRA/JHRA@hra_dev dir ...
poj 3126 Prime Path bfs
题目链接:http://poj.org/problem?id=3126 Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
创建JavaScript函数的几种方式
window.onload = function() { // console.log('ok'); //正规的创建函数 function test(abc, d) { return abc(d); ...
Vmware Workstation - linux系统下 VmTools 安装
程序版本 : VMware® Workstation 14 Pro 系统环境 : win10 64位下 ubuntu-14.04.5-desktop-amd64 问题:在运行linux系统过程中,de ...
前端js收藏
1 爱心特效 <script type="text/javascript"> (function(window,document,undefined){ var hea ...

用JavaScript制作简单的计算器

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

随机推荐

热门专题