Html-简易计算器

最新推荐文章于 2023-10-17 16:18:13 发布

new个星

最新推荐文章于 2023-10-17 16:18:13 发布

阅读量205

点赞数

分类专栏： Html 文章标签： html

本文链接：https://blog.csdn.net/weixin_43532218/article/details/115795801

版权

Html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简易网页计算器
效果图
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			button{
				width: 100px;
			}
			.orange{
				color: orange;
			}
			button:hover{
				background-color: white;
				margin: 0px;
			}
		</style>
		<script type="text/javascript">
			var str;
			var endStr;
			function onclickClear(){
				str = document.getElementById("output");
				str.value = "";
			}
			function onclickNumber(num){
				str = document.getElementById("output");
				str.value = str.value + num;
			}
			function onclickCalculate(){
				str = document.getElementById("output");
				str.value=eval(str.value);
			}
		</script>
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="0" width="400px">
			<tr>
				<td colspan="4">
					<input id = "output" type="text"  readonly="readonly" style="width: 400px;text-align: right;"/>
				</td>
			</tr>
			<tr>
				<td><button onclick="onclickNumber('(')" type="button" class="orange">(</button></td>
				<td><button onclick="onclickNumber(')')" type="button" class="orange">)</button></td>
				<td><button onclick="onclickNumber('%')" type="button" class="orange">%</button></td>
				<td><button onclick="onclickClear()" type="button">C</button></td>
			</tr>
			<tr>
				<td><button onclick="onclickNumber('7')" type="button">7</button></td>
				<td><button onclick="onclickNumber('8')" type="button">8</button></td>
				<td><button onclick="onclickNumber('9')" type="button">9</button></td>
				<td><button onclick="onclickNumber('/')" type="button" class="orange">÷</button></td>
			</tr>
			<tr>
				<td><button onclick="onclickNumber('4')" type="button">4</button></td>
				<td><button onclick="onclickNumber('5')" type="button">5</button></td>
				<td><button onclick="onclickNumber('6')" type="button">6</button></td>
				<td><button onclick="onclickNumber('*')" type="button" class="orange">×</button></td>
			</tr>
			<tr>
				<td><button onclick="onclickNumber('1')" type="button">1</button></td>
				<td><button onclick="onclickNumber('2')" type="button">2</button></td>
				<td><button onclick="onclickNumber('3')" type="button">3</button></td>
				<td><button onclick="onclickNumber('-')" type="button" class="orange">-</button></td>
			</tr>
			<tr>
				<td><button onclick="onclickNumber('0')" type="button">0</button></td>
				<td><button onclick="onclickNumber('.')" type="button" class="orange">.</button></td>
				<td><button onclick="onclickCalculate()" type="button" class="orange">=</button></td>
				<td><button onclick="onclickNumber('+')" type="button" class="orange">+</button></td>
			</tr>
		</table>
		
	<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script></body>
</html>

new个星

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html-简易计算器

简易网页计算器效果图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> button{ width: 100px; } .orange{ color: orange; } button:hover{ background
复制链接

扫一扫