zoukankan      html  css  js  c++  java
  • 用JavaScript制作简单的计算器

    <html >
    <head>
    
    <title>简单计算器</title>
    <style type="text/css">
    	div{
    		margin:auto;
    		background-color:#ff4365;
    		550px;
    		height:280px;
    		border:ridge #ff4365 4px;
    	}
    	table{
    		500px;
    		margin:auto;
    		padding-top:10px;
    	}
    	td{
    		height:20px;
    		padding:2px 6px;
    
    		text-align:center;
    	}
    	input{
    		100px;
    		height:35px;
    		background:#99FFCC;
    		font-size:16px;
    		color:#0033CC;
    	}
    	.input1{
    		494px;
    		padding:0px;
    		margin:0px;
    		padding:5px;
    		font-size:25px;
    		background:#FFFF93;
    		color:#000000;
    	}
    	h1{
    		color:#ff4365;
    		font-size:50px;
    		border:groove 2px #ff4365;
    		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>
    

      

  • 相关阅读:
    no-return-assign (Rules) – Eslint 中文开发手册
    CSS 字体图标
    CSS 元素的显示与隐藏
    CSS 定位
    CSS 清除浮动
    CSS 浮动
    java 运算符
    Java 初识
    CSS3 完善盒模型
    CSS 盒子模型
  • 原文地址:https://www.cnblogs.com/YY56/p/6505927.html
Copyright © 2011-2022 走看看