1. <html >
  2. <head>
  3.  
  4. <title>简单计算器</title>
  5. <style type="text/css">
  6. 	div{
  7. 		margin:auto;
  8. 		background-color:#ff4365;
  9. 		width:550px;
  10. 		height:280px;
  11. 		border:ridge #ff4365 4px;
  12. 	}
  13. 	table{
  14. 		width:500px;
  15. 		margin:auto;
  16. 		padding-top:10px;
  17. 	}
  18. 	td{
  19. 		height:20px;
  20. 		padding:2px 6px;
  21.  
  22. 		text-align:center;
  23. 	}
  24. 	input{
  25. 		width:100px;
  26. 		height:35px;
  27. 		background:#99FFCC;
  28. 		font-size:16px;
  29. 		color:#0033CC;
  30. 	}
  31. 	.input1{
  32. 		width:494px;
  33. 		padding:0px;
  34. 		margin:0px;
  35. 		padding:5px;
  36. 		font-size:25px;
  37. 		background:#FFFF93;
  38. 		color:#000000;
  39. 	}
  40. 	h1{
  41. 		color:#ff4365;
  42. 		font-size:50px;
  43. 		border:groove 2px #ff4365;
  44. 		width:160px;
  45. 		background:#99FFCC;
  46. 	}
  47. </style>
  48. <script type="text/javascript">
  49. 	var num;
  50. 	function buttontext(num)
  51. 	{
  52.  
  53. 		document.getElementById('1').value+=document.getElementById(num).value;
  54. 	}
  55. 	function compute()
  56. 	{
  57. 		document.getElementById('1').value=eval(document.getElementById('1').value);
  58. 	}
  59. 	function del1()
  60. 	{
  61. 		document.getElementById('1').value=document.getElementById('1').value.substring(0,document.getElementById('1').value.length-1);
  62. 	}
  63. 	function del2()
  64. 	{
  65. 		document.getElementById('1').value='';
  66. 	}
  67. 	function sqrt1()
  68. 	{
  69. 		document.getElementById('1').value=Math.sqrt(document.getElementById('1').value);
  70. 	}
  71. 	function Pow()
  72. 	{
  73. 		document.getElementById('1').value=Math.pow(document.getElementById('1').value,2);
  74. 	}
  75. </script>
  76. </head>
  77.  
  78. <body bgcolor="#ff7575">
  79. <center>
  80. <h1>计算器</h1>
  81. </center>
  82. <div>
  83. 	<table>
  84. 		<tr>
  85. 		<td colspan="4"><input type="text" class="input1" id="1" value="0" name="text1"/></td>
  86. 		</tr>
  87.  
  88. 		<tr>
  89. 			<td><input type="button" id="2" value="+" onclick="buttontext('2')"/></td>
  90. 			<td><input type="button" id="3" value="1" onclick="buttontext('3')"/></td>
  91. 			<td><input type="button" id="4" value="2" onclick="buttontext('4')"/></td>
  92. 			<td><input type="button" id="5" value="3" onclick="buttontext('5')"/></td>
  93. 		</tr>
  94.  
  95. 		<tr>
  96. 			<td><input type="button" id="6" value="-" onclick="buttontext('6')"/></td>
  97. 			<td><input type="button" id="7" value="4" onclick="buttontext('7')"/></td>
  98. 			<td><input type="button" id="8" value="5" onclick="buttontext('8')"/></td>
  99. 			<td><input type="button" id="9" value="6" onclick="buttontext('9')"/></td>
  100. 		</tr>
  101.  
  102. 		<tr>
  103. 			<td><input type="button" id="10" value="*" onclick="buttontext('10')"/></td>
  104. 			<td><input type="button" id="11" value="7" onclick="buttontext('11')"/></td>
  105. 			<td><input type="button" id="12" value="8" onclick="buttontext('12')"/></td>
  106. 			<td><input type="button" id="13" value="9" onclick="buttontext('13')"/></td>
  107. 		</tr>
  108.  
  109. 		<tr>
  110. 			<td><input type="button" id="14" value="/" onclick="buttontext('14')"/></td>
  111. 			<td><input type="button" id="15" value="0" onclick="buttontext('15')"/></td>
  112. 			<td><input type="button" id="16" value="." onclick="buttontext('16')"/></td>
  113. 			<td><input type="button" id="17" value="=" onclick="compute()"/></td>
  114. 		</tr>
  115.  
  116. 		<tr>
  117. 			<td><input type="button" id="18" value="√" onclick="sqrt1()"/></td>
  118. 			<td><input type="button" id="19" value="平方根" onclick="Pow()"/></td>
  119. 			<td><input type="button" id="20" value="C" onclick="del2()"/></td>
  120. 			<td><input type="button" id="21" value="←" onclick="del1()"/></td>
  121. 		</tr>
  122.  
  123. 	</table>
  124. </div>
  125. </body>
  126. </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. python--第二十四天总结

    CMDB介绍 CMDB --Configuration Management Database 配置管理数据库, CMDB存储与管理企业IT架构中设备的各种配置信息,它与所有服务支持和服务交付流程都紧 ...

  2. vue在main.js中全局引用css的方法及坑

    步骤: 1.配置文件webpack.config.js: { test:/\.css$/, loader:'style-loader!css-loader' } 坑1:-loader尾缀 坑2:Mod ...

  3. ucore-lab1-练习6report

    练习6--完善中断初始化和处理 1.  中断向量表中一个表项占多少个字节?其中哪几位代表中断处理代码的入口? 答:系统将所有的中断事件统一进行编号(0-255),这个编号称为中断向量.中断向量表的一个 ...

  4. hashCode 与 equals

    面试官可能会问你:“你重写过 hashcode 和 equals 么,为什么重写equals时必须重写hashCode方法?”   hashCode()介绍 hashCode() 的作用是获取哈希码, ...

  5. 【python深入】map/reduce/lambda 内置函数的使用

    python中的内置函数里面,有map和reduce两个方法,这两个方法可以非常好的去做一些事情,但是之前都没有用过,下面是关于这两个方法的介绍: 一.map相关 map()会根据提供的函数对指定的序 ...

  6. python词频统计及其效能分析

    1) 博客开头给出自己的基本信息,格式建议如下: 学号2017****7128 姓名:肖文秀 词频统计及其效能分析仓库:https://gitee.com/aichenxi/word_frequenc ...

  7. git常用方法

    一.创建项目 git clone xx.git         克隆项目到本地 git init                     初始化本地项目,生成.git文件 二.创建分支,推送分支,合并 ...

  8. centos 7 上Hive-2.1.1的安装与基本操作

    首先安装mysql 1.       在线安装mysql a)        yum install mysql b)        yum install mysql-devel c)        ...

  9. 如何监听Element组件<el-input>标签的回车事件

    一.现象 表单提交时需要处理输入框的回车事件,一般的原生input标签可以用@keyup.enter="onSubmit"(tips:onSubmit为定义的方法) 二.解决 1. ...

  10. C语言编写程序计算圆上的点的坐标

    Problem Description There is a cycle with its center on the origin. Now give you a point on the cycl ...