JavaScript实战——简单计算器

温沐沐

已于 2022-04-21 11:41:55 修改

阅读量1k

点赞数 1

分类专栏： JavaScript html 文章标签： html javascript css

于 2022-04-20 21:14:02 首次发布

本文链接：https://blog.csdn.net/weixin_54485193/article/details/124307224

版权

JavaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

这是我上课老师教的一个简单的小程序

效果图如下：

上代码**************************************************************************

HTML文件

<!DOCTYPE html PHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="css/css.css" /> //这儿是css路径，代表css文件夹下的css.css文件
</head>
	<div id="calcuator">
	<input type="text"  id="input-box" value="0" size="21" maxlength="21" readonly="readonly"/>
	<div id="btn-list">
		<div onclick="s('')" class="btn-30 btn-radius color-red clear-marginleft">C</div>
		<div onclick="operator('opposite')" class="btn-30 btn-radius color-blue">+/-</div>
		<div onclick="operator('percent')" class="btn-30 btn-radius color-blue">%</div>
		<div onclick="operator('backspace')" class="btn-70 btn-radius color-blue font-14">←</div>
		<div onclick="a('7')" class="btn-30 btn-radius clear-marginleft ">7</div>
		<div onclick="a('8')" class="btn-30 btn-radius">8</div>
		<div onclick="a('9')" class="btn-30 btn-radius">9</div>
		<div onclick="a('+')" class="btn-30 btn-radius color-blue font-14 ">+</div>
		<div onclick="a('-')" class="btn-30 btn-radius color-blue font-14 ">-</div>
        <div onclick="a('4')" class="btn-30 btn-radius clear-marginleft ">4</div>
		<div onclick="a('5')" class="btn-30 btn-radius">5</div>
		<div onclick="a('6')" class="btn-30 btn-radius">6</div>		
		<div onclick="a('*')" class="btn-30 btn-radius color-blue font-14 ">*</div>
		<div onclick="a('/')" class="btn-30 btn-radius color-blue font-12 ">/</div>		
		<div onclick="a('1')" class="btn-30 btn-radius clear-marginleft ">1</div>
		<div onclick="a('2')" class="btn-30 btn-radius">2</div>
		<div onclick="a('3')" class="btn-30 btn-radius">3</div>	
		<div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">x²</div>
		<div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">根号</div>
		<div onclick="a('0')" class="btn-70 btn-radius clear-marginleft">0</div>
		<div onclick="a('.')" class="btn-30 btn-radius">.</div>
		<div onclick="e()" class="btn-70 btn-radius color-red font-14">=</div>
	</div>
</div>
<script>
input=document.getElementById('input-box');
function s(v)
{
input.value=v
}
function a(v)
{
input.value+=v
}
function e(){
try{
s(eval(input.value))
}catch(e){
s('Error')
}
}
function operator(type){
	switch(type){
		case"backspace":
			var str=input.value;
			str=(str!="0") ? str: "";	
			str=str.substr(0,str.length-1);
			str=(str != "") ? str : "0";
			break;
		case "opposite":
			input.value=-input.value;
			break;
		case "percent":
			input.value=input.value/100;
			break;
		case "pow":
			input.value=Math.pow(input.value,2);
			break;
		case "sqrt":
			input.value=Math.sqrt(input.value);
			break;
 	}
}
</script>
	</html>

CSS布局文件代码

在html文件同目录下创建名为css的文件夹，在css文件见内创建css.css文件，把代码复制粘贴进去，如果自己改名了记得在html文件中也修改成对应文件名。

@charset "utf-8";
 /*css--层叠样式表，让网页好看点*/
 
#calcuator{ width:200px; height:245px; padding:10px; border:1px solid #e5e5e5; background:#f8f8f8; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; box-shadow:0px 0px 10px #f2f2f2; -moz-box-shadow:0px 0px 10px #f2f2f2; -webkit-box-shadow:0px 0px 10px #f2f2f2; margin: 0px auto; }
/*整个框*/

#calcuator #input-box{ margin:0; width:187px; padding:9px 5px; height:14px;border:1px solid #e5e5e5; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#FFF; text-align:right; line-height:14px; font-size:12px;      }
#calcuator #btn-list{ width:200px; overflow:hidden;}/*所有按钮排列*/
#calcuator #btn-list .btn-radius{ border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; border:1px solid #e5e5e5; background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb)); background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1); line-height:29px; text-align:center; text-shadow:0px 1px 1px #FFF; font-weight:bold; font-family:Verdana, Geneva, sans-serif; color:#666; float:left; margin-left:11px; margin-top:11px; font-size:12px; cursor:pointer;}
#calcuator #btn-list .btn-radius:active{ background:#ffffff;}
#calcuator #btn-list .clear-marginleft{ margin-left:0;}
#calcuator #btn-list .font-14{ font-size:14px;}
#calcuator #btn-list .color-red{ color:#ff5050}
#calcuator #btn-list .color-blue{ color:#00b4ff}
#calcuator #btn-list .btn-30{ width:29px; height:29px;}/*大小按钮*/
#calcuator #btn-list .btn-70{ width:70px; height:29px;}

温沐沐

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实战——简单计算器

这是我上课老师教的一个简单的小程序效果图如下：上代码**************************************************************************HTML文件<!DOCTYPE html PHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&lt.
复制链接

扫一扫