简单网页计算器代码大全_用web制作简单计算器

简单网页计算器代码大全_用web制作简单计算器注:本人为初学者,欢迎各位大神指教简单计算器实现效果:HTML代码counter.html计算器

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

注:本人为初学者,欢迎各位大神指教
在线试一试
简单计算器实现效果:
这里写图片描述
HTML代码counter.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>计算器</title>
		<link rel="stylesheet" type="text/css" href="css/counter.css" />
		<script type="text/javascript" src="js/counter.js"></script>
	</head>

	<body>
		<div class="counter">
			<div class="counter_top" >
				<form>
					<input type="text" id="top" value="" />
				</form>
			</div>
			<div class="counter_down">

				<form>
					<input type="button" class="CE" value="清屏" onclick="cl(this.value)" />
					<input type="button" class="CE" value="退格" onclick="cl(this.value)"/>
					<div class="down_right" id="cou">
						<input type="button" class="cou" value="÷" onclick="eva(this.value)"/>
						<input type="button" class="cou" value="×" onclick="eva(this.value)"/>
						<input type="button" class="cou" value="-" onclick="eva(this.value)"/>
						<input type="button" class="cou" value="+" onclick="eva(this.value)"/>
						<input type="button" class="cou" value="=" onclick="eva(this.value)"/>
					</div>
					<div id="down_num" >
						<input type="button" class="num" value="7" onclick="show(this.value)"/>
						<input type="button" class="num" value="8" onclick="show(this.value)"/>
						<input type="button" class="num" value="9" onclick="show(this.value)"/>
						<input type="button" class="num" value="4" onclick="show(this.value)" />
						<input type="button" class="num" value="5" onclick="show(this.value)" />
						<input type="button" class="num" value="6" onclick="show(this.value)"/>
						<input type="button" class="num" value="1" onclick="show(this.value)"/>
						<input type="button" class="num" value="2" onclick="show(this.value)"/>
						<input type="button" class="num" value="3" onclick="show(this.value)"/>
						<input type="button" class="num" value="0" onclick="show(this.value)"/>
						<input type="button" class="num" value="." onclick="show(this.value)"/>
						<input type="button" class="num" value="+/-" onclick="eva(this.value)"/>
					</div>

				</form>

			</div>
		</div>
	</body>

</html>

CSS代码counter.css

.counter{
	background-color: #E0E0E0;
	width: 440px;
	height: 460px;
	padding: 20px;
}

.counter .counter_top{
	width: 440px;
	height: 53px;
	background-color: #fff;
}

.counter .counter_top input{
	width: 440px;
	height: 53px;
	border: 0px;
}

.counter_down .CE{
	width: 152.5px;
	height: 45px;
	margin: 15px 15px 0px 0px;
}

.counter_down .cou{
	width: 95px;
	height: 45px;
	margin-bottom: 15px;
}

.down_right{
	width: 95px;
	float: right;
	margin-top: 15px;
}

.counter_down .num{
	width: 95px;
	height: 45px;
	margin: 15px 16px 0px 0px;
}

js代码counter.js


var a=0;
var b;
var c = 0;

function show(value) {	
	document.getElementById("top").value +=value;		
}

function eva(value){
	c=parseFloat(document.getElementById("top").value);
	
	if (value=="=") {
		if(b=="+"){
			document.getElementById("top").value=(a+c);
		}else if(b=="-"){
			document.getElementById("top").value=(a-c);
		}else if(b=="×"){
			document.getElementById("top").value=(a*c);
		}else if(b=="÷"){
			if(c==0){
				document.getElementById("top").value="分母不能为0";
			}else{
				document.getElementById("top").value=(a/c);
			}	
		}
	}else{
		a=parseFloat(document.getElementById("top").value);
		document.getElementById("top").value="";
		b=value;
		if(b=="+/-"){
			a=-a;
			document.getElementById("top").value=a;
		}
	}	
}

function cl(value){
	if(value=="清屏"){
		document.getElementById("top").value="";
	}else{		document.getElementById("top").value=document.getElementById("top").value.substring(0,(document.getElementById("top").value.length-1))
	}	
}


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/182540.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • contenteditable ie兼容

    contenteditable ie兼容

  • 解决Php控制台和phpinfo版本号不一致问题

    解决Php控制台和phpinfo版本号不一致问题

  • 心脏出血漏洞利用「建议收藏」

    心脏出血漏洞利用「建议收藏」0x0引言~心脏出血(英语:Heartbleed),也简称为心血漏洞,是一个出现在加密程序库OpenSSL的安全漏洞,该程序库广泛用于实现互联网的传输层安全(TLS)协议。它于2012年被引入了软件中,2014年4月首次向公众披露。只要使用的是存在缺陷的OpenSSL实例,无论是服务器还是客户端,都可能因此而受到攻击。此问题的原因是在实现TLS的心跳扩展时没有对输入进行适当验证(缺少边界检查),…

  • Java 认证考试 OCAJP 经验总结

    Java 认证考试 OCAJP 经验总结1. 考证、认证是否有用含金量的话题关于认证考试(无论什么认证)是否有用?这个话题无论是在哪里都有人问。这个问题就好比上大学是否有用吗一样,有的人没上过大学一样年薪百万。认证这种东西需要的时候即有用,不需要的时候就没用。有,并没有什么坏处。说实话个人感觉这证件没什么大用。而自己想考的理由完全是想自我check下,逼自己复习学习基础。如果你是刚毕业的GH或者在校的,手里有些零花钱的可以考虑下,…

  • 搭建CICD平台

    搭建CICD平台**搭建CICD平台**1、主机准备。2、安装前预配置。准备相应的系统配置与软件依赖。3、执行安装。4、安装后配置。添加相应的组件以及修改配置。如导入模板等。一、主机准备Centos7.2配置:内存大于4G。(其中Jenkins占1.5G、Gitlab占2G)8080、10080、10022、50000端口未使用二、安装前预配置1、添加阿里yum源(如果已配置了…

  • 【速查表】PHPStorm快捷键「建议收藏」

    【速查表】PHPStorm快捷键「建议收藏」【速查表】PHPStorm快捷键

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号