简单网页计算器代码大全_用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)


相关推荐

  • Android加密之全盘加密

    Android加密之全盘加密Android加密之全盘加密前言Android的安全性问题一直备受关注,Google在Android系统的安全方面也是一直没有停止过更新,努力做到更加安全的手机移动操作系统。在Android的安全性方面,有很多模块:内核安全性应用安全性应用签名身份验证TrustyTEESELinux加密等等

  • 谷歌是python开发的吗_google python

    谷歌是python开发的吗_google python展开全部Google的没用过,百度的用过,挺简单的。你可以使用我的开发者代码去体验一下32313133353236313431303231363533e78988e69d8331333335346133。importurllib2importjsonaddress=u’沈阳市和平区三好街’key=u’RG3NWsfviWGCbRbWEXeY78BP’url=u’http://api…

  • 一个短信验证码功能引发的总结思考[通俗易懂]

    从简单的功能探寻背后的技术。文章目录故事短信验证码设计总结1、时间限制2、图形验证码限制 + 时间限制3、手机号+指定时间可以发短信次数限制4、IP及Cookie限制5、短信预警机制后记故事昨天看到一个地址,新用户免费领取X登读书APP的14天会员,2020年了,要开始读书了。看到这个活动是在笔记本上,于是用笔记本浏览器访问活动页面,输入手机号,收到验证码,填写验证码,领取这个会员。本…

  • UDP 流量攻击_网络流量攻击

    UDP 流量攻击_网络流量攻击最近在群里聊天看到有人被UDP攻击我几年前也遇到过当时前任工作交接过来面临很多挑战。话又说回来凡是跳槽或主动找到你的公司都是让你去救火的。先说说UDP攻击原理很简单就是随便连接一个IP地址随便写一个端口号。IP地址存在与否并不重要。这是UDP的特性。然后发送大数据包堵塞交换机路由器。我们在局域网上模拟注意UDP不能在同一个VLAN下…

  • pycharm帮助文档_pycharm pytorch

    pycharm帮助文档_pycharm pytorch大家在利用python进行机器学习时,pycharm是一个很不错的IDE。通过这段时间的使用,自己总结了一些使用心得,故试着写下来共勉,不当之处,希望正在阅读的你批评指正。1、pycharm的安装与激活pycharm安装可以根据自己需要在官网上下载,链接http://www.jetbrains.com/pycharm/download/#section=windows。修改h…

  • asp语法教程_如何编程

    asp语法教程_如何编程ASP编程基本语句(一)Access+asp编制网站是属于动态网站,是通过把要编制的内容写入数据库里,在通过读取数据库的内容显示出来,学习目的:学会数据库的基本操作。数据库的基本操作无非是:查询记

发表回复

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

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