Web网页版简易计算器

最新推荐文章于 2024-04-27 21:51:02 发布

程序员史迪仔

最新推荐文章于 2024-04-27 21:51:02 发布

阅读量2.2w

点赞数 32

分类专栏： Web

本文链接：https://blog.csdn.net/weixin_44668898/article/details/96207910

版权

Web 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

说明：
1、这个计算器的功能比较简单，包括加减乘除，小数点，退格，清除以及等于。

2、首先写出html，即界面主要框架；再写出css，即属性，使框架看起来美观一些；最后就是javascript，就是功能的实现，主要有计算（调用js内置强大的eval() 函数）、退格、清除、等于四个功能。

3、html和css两部分不难，javascript会麻烦一点。

推荐一篇不错的博客：
js中的eval方法详解（一）–eval方法的初级应用

HTML代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页版计算器</title>
		<link href="css/new_file.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/new_file.js"></script>
	</head>
	<body>
		<div id="calculator">
			<div id="head"><h3>网页版简单计算器</h3></div>
			<div id="show" align="center"><input type="text" id="text" ></div>
			<div id="cuttom">
				<table align="center">
					<tr>
						<td><input type="button" value="7" onclick="display(7)"></td>
						<td><input type="button" value="8" onclick="display(8)"></td>
						<td><input type="button" value="9" onclick="display(9)"></td>
						<td><input type="button" value="+" onclick="display('+')"></td>
						<td><input type="button" value="-" onclick="display('-')"></td>
					</tr>
					<tr>
						<td><input type="button" value="4" onclick="display(4)"></td>
						<td><input type="button" value="5" onclick="display(5)"></td>
						<td><input type="button" value="6" onclick="display(6)"></td>
						<td><input type="button" value="*" onclick="display('*')"></td>
						<td><input type="button" value="/" onclick="display('/')"></td>
					</tr>
					<tr>
						<td><input type="button" value="1" onclick="display(1)"></td>
						<td><input type="button" value="2" onclick="display(2)"></td>
						<td><input type="button" value="3" onclick="display(3)"></td>
						<td><input type="button" value="(" onclick="display('(')"></td>
						<td><input type="button" value=")" onclick="display(')')"></td>
					</tr>
					<tr>
						<td><input type="button" value="." onclick="display('.')"></td>
						<td><input type="button" value="0" onclick="display(0)"></td>
						<td><input type="button" value="←" onclick="back()"></td>
						<td><input type="button" value="c" onclick="reset()"></td>
						<td><input type="button" value="=" onclick="equals()"></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

CSS代码如下：

body{background:#CDC673;}
h3{font-family:微软雅黑;font-size: 35px;text-align: center;}
#show input{width:511px;height:60px;font-size:30px;}
#cuttom input{width: 100px;height: 70px;font-size: 28px;}
#cuttom input:hover{background: lightgray;}

JS代码如下：

function $(id){return document.getElementById(id);}
var str;
var result;
function display(str0)	//显示到文本框
{
	str = document.getElementById("text");
	str.value = str.value + str0;
}
function equals()	//等于
{
	str = document.getElementById("text");
	result = eval(str.value);
	str.value = result;
}
function back()		//退格
{
	str = document.getElementById("text");
	str.value = str.value.substring(0,str.value.length-1);
}
function reset()	//清除
{
	str = document.getElementById("text");
	str.value = "";
}

运行界面如下：
在这里插入图片描述

程序员史迪仔

关注

32
点赞
踩
216

收藏

觉得还不错? 一键收藏
12
评论
Web网页版简易计算器

Web网页版简易计算器说明：1、这个计算器的功能比较简单，包括加减乘除，小数点，退格，清除以及等于。2、首先先写出html，即界面主要框架；再写出css，即属性，使框架看起来美观一些；最后就是javascript，就是功能的实现，主要有计算（调用js内置强大的eval() 函数）、退格、清除、等于四个功能。3、html和css两部分不难，javascript会麻烦一点。推荐一篇不错的...
复制链接

扫一扫

专栏目录