Html实现极简计算器

最新推荐文章于 2023-10-17 16:18:13 发布
最新推荐文章于 2023-10-17 16:18:13 发布
阅读量337 收藏 1
点赞数
分类专栏： 前端 工具 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/divaid/article/details/118312129
版权

效果：

代码：

<!DOCTYPE html>
<!-- v2.0:
1.添加结果连续运算逻辑
2.添加数字运算显示
3.四舍五入保留两位小数（消除精度丢失影响）

v3.0
1.适配移动端
 -->
<html>
<head>
	<style>
		.result_parent{
			background-color: white;
			border:1px solid #333;
			border-radius: 10px;
			text-align: right;
			line-height: 50px;
			margin:0 auto;

			padding-right:10px;
			padding-left:0px;

			text-align: right;
			line-height: 50px;
		}
		#pre_num{
			margin:0px;
			color:#8e8a89;
		}
		#result{
			text-align: right;
			margin:0px;
			color:#3e3a39;
		}

		text{
			background: #888888;
			border-radius: 10px;
			display: block;
			float: left;
			text-align: center;			
		}
		.active{
			background: #aaaaaa;
		}

		.btn_parent{
			margin:0 auto
		}

		/*手机／平板*/
        @media (max-width: 1200px) {
        	
        	.result_parent_size{
        		box-sizing: content-box;
        		width:77%;
				height:140px;
				margin-top: 50px;
				font-size: 25px;
        	}

        	.pre_num_size{
        		line-height: 70px;
				height:70px;
        	}
        	.result_view_size{
        		line-height: 70px;
				height:70px;
        	}
        	.btn_parent_size{
				width:80%;
				margin-top: 10px;
        	}
        	.text_btn_size{
				width:21%;
				height:80px;
				line-height: 80px;
				margin-top: 20px;
				margin-left: 2%;
				margin-right: 2%;
				font-size: 30px;
        	}
		}

		/*pc端*/
        @media (min-width: 1201px) {
        	
        	.result_parent_size{
        		width:506px;
				height:100px;
        	}
        	.pre_num_size{
				height:50px;
        	}
        	.result_view_size{
				line-height: 50px;
				height:50px;
        	}
        	.btn_parent_size{
        		width:520px;
        	}
        	.text_btn_size{
				width:120px;
				height:50px;
				line-height: 50px;
				margin-top: 10px;
				margin-left: 5px;
				margin-right: 5px;
        	}
		}
	</style>
</head>
<body>

	<div class="result_parent result_parent_size">
		<p id="pre_num" class="pre_num_size"> </p>
		<p id="result" class="result_view_size">0</p>
	</div>
	
	<div class="btn_parent btn_parent_size">
		<text class="text_btn_size" data-index=0 id="btn_1">1</text>
		<text class="text_btn_size" data-index=1 id="btn_2">2</text>

		<text class="text_btn_size" data-index=2 id="btn_3">3</text>
		<text class="text_btn_size" data-index=3 id="btn_plus">＋</text>


		<text class="text_btn_size" data-index=4 id="btn_4">4</text>

		<text class="text_btn_size" data-index=5 id="btn_5">5</text>

		<text class="text_btn_size" data-index=6 id="btn_6">6</text>
		<text class="text_btn_size" data-index=7 id="btn_minus">−</text>


		<text class="text_btn_size" data-index=8 id="btn_7">7</text>

		<text class="text_btn_size" data-index=9 id="btn_8">8</text>

		<text class="text_btn_size" data-index=10 id="btn_9">9</text>
		<text class="text_btn_size" data-index=11 id="btn_multi">×</text>


		<text class="text_btn_size" data-index=12 id="btn_0">0</text>

		<text class="text_btn_size" data-index=13 id="btn_dot">.</text>

		<text class="text_btn_size" data-index=14 id="btn_equal">=</text>

		<text class="text_btn_size" data-index=15 id="btn_except">÷</text>
	</div>

	<script type="text/javascript">
		var firstNum = 0;
		var secondNum = 0;
		var result = 0;
		var sign = "";
		var hasDot = false;

		var resultElement = document.getElementById("result")
		var preNumElement = document.getElementById("pre_num")

		function isMobile() {
	        let info = navigator.userAgent;
	        let agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", "iPad"];
	        for (let i = 0; i < agents.length; i++) {
	            if (info.indexOf(agents[i]) >= 0) return true;
	        }
	        return false;
    	}



		function startTouch(e){
			let id = e.target.id
			e.target.classList.add("active")
			return false
		}

		function endTouch(e){
			let id = e.target.id
			e.target.classList.remove("active")
			onBtnClick(id)
			return false
		}

		function inputNum(num){
				if(sign.length === 0) {
					if (hasDot) {
						if (num > 0) {
							firstNum = parseFloat(firstNum + "" + num)
							hasDot = false
						} else {
							firstNum = firstNum + "" + num
						}
					} else {
						firstNum = parseFloat(firstNum + "" + num)
					}
					resultElement.innerText = firstNum
				} else {
					if (hasDot) {
						if (num > 0) {
							secondNum = parseFloat(secondNum + "" + num)
							hasDot = false
						} else {
							secondNum = secondNum + "" + num
						}
					} else {
						secondNum = parseFloat(secondNum + "" + num)
					}
					
					resultElement.innerText = secondNum
				}
		}

		function setSign(mathSign){
			if (sign.length === 0) {
				firstNum = parseFloat(resultElement.innerText)
			}
			sign = mathSign
			switch(sign) {
				case "btn_plus":
					preNumElement.innerText = firstNum + " +"
				break;
				case "btn_minus":
					preNumElement.innerText = firstNum + " −"
				break;
				case "btn_multi":
					preNumElement.innerText = firstNum + " ×"
				break;
				case "btn_except":
					preNumElement.innerText = firstNum + " ÷"
				break;
			}

			resultElement.innerText = "0"
			
		}

		function onBtnClick(id){
			switch(id){
				case "btn_1":
					inputNum(1)
				break;
				case "btn_2":
					inputNum(2)
				break;
				case "btn_3":
					inputNum(3)
				break;
				case "btn_plus":
					setSign("btn_plus")
					// sign = "btn_plus"
					// firstNum = parseFloat(resultElement.innerText)
				break;
				case "btn_4":
					inputNum(4)
				break;
				case "btn_5":
					inputNum(5)
				break;
				case "btn_6":
					inputNum(6)
				break;
				case "btn_minus":
					setSign("btn_minus")
				break;
				case "btn_7":
					inputNum(7)
				break;
				case "btn_8":
					inputNum(8)
				break;
				case "btn_9":
					inputNum(9)
				break;
				case "btn_multi":
					setSign("btn_multi")
				break;
				case "btn_0":
					inputNum(0)
				break;
				case "btn_dot":
					hasDot = true;
					if (sign.length === 0) {
						firstNum +="."
						resultElement.innerText = firstNum
					} else {
						secondNum +="."
						resultElement.innerText = secondNum
					}

				break;
				case "btn_equal":
					getResult()
				break;
				case "btn_except":
					setSign("btn_except")
				break;
			}
		}

		function getResult(){
			switch(sign) {
				case "btn_plus":
					firstNum = firstNum + secondNum;
				break;
				case "btn_minus":
					firstNum = firstNum - secondNum;
				break;
				case "btn_multi":	
					firstNum = firstNum * secondNum;
				break;
				case "btn_except":	
					firstNum = firstNum / secondNum;
				break;
			}
			if (sign.length > 0) {
				preNumElement.innerText = preNumElement.innerText + " " + secondNum + " ="
			} else {
				preNumElement.innerText = firstNum + " ="
			}

			secondNum = 0;
			
			resultElement.innerText = Math.round(firstNum * 100) / 100
			
			firstNum = 0
			sign = "";
		}


		function setEventListener(){
    		let elements = document.getElementsByClassName("btn_parent")[0].getElementsByTagName("text");
    		if (isMobile()) {
				for(let i=0; i<elements.length;++i){
					elements[i].ontouchstart = startTouch
					elements[i].ontouchend = endTouch
    			}
    		} else {
    			for(let i=0; i<elements.length;++i){
					elements[i].onmousedown = startTouch
					elements[i].onmouseup = endTouch
    			}
    		}
    		
    	}

    	setEventListener()
	</script>
</body>
</html>
使用 HTML + CSS + JavaScript 制作简版计算器，提供加减乘除功能
Allen-
07-18 3551
构建一个基础的计算器是学习前端基础的一个很好的练习。本文将从零开始，带你实现一个基础的 JavaScript 计算器。这个计算器支持加减乘除运算，并能实时显示计算过程，帮助用户清晰了解每一步操作及其结果。
html+css+js实现简易计算器
热门推荐
weixin_45118138的博客
05-02 1万+
使用JavaScript制作一个简单的计算器 直接看效果，这个计算器可以实现简单的加减乘除 1、首先编辑HTML样式，把计算机上的按键全部打印出来 可以显示出以下结果 2、添加css样式 先设置a元素定宽定高，然后左浮动，在微调宽度和高度，使其到达一个合理布局的值 3、编写js代码 写一个for循环，不断接收a点击事件。 编写点击result，点击清零。 3. 点击数字，获取num1和num2的值。 4.获取按键加减乘除，记录下符号 5....
简易版html计算器
08-25
文本文档编写，改后缀直接运行，html前端开发实例，网页版简易计算器，内容附带注释，总之很方便就对了
html+js简易计算器
11-01
html+javaScript实现简易计算器。。。。。。。。。。。
【HTML】简易计算器
Sunny的博客
03-05 5607
设计一个简易计算器，在“操作数”标签右侧的两个文本框中输入操作数，当单击“+，-，*，/”按钮时，对两个操作数进行运算并将结果填入到“结果”标签右侧的文本框中。
HTML简易计算器
11-26
网页版的简易计算器
HTML简单计算器
一加一等于十的博客
10-17 557
简单计算器
用纯JavaScript打造极简计算器应用
此计算器使用了HTML、CSS和JavaScript三种基础的Web开发技术，且强调使用最小代码来实现。以下是对该主题的详细知识点展开： ### HTML结构 1. **按钮布局**：通常，计算器会使用一系列的按钮来代表数字和运算符。...
javascript实现计算器功能
11-21
在JavaScript中实现一个计算器功能，主要涉及到以下几个关键知识点： 1. **事件监听**：为了响应用户的点击操作，我们需要为计算器的各个按钮添加事件监听器。这通常通过`addEventListener`方法来实现，例如，为每...
用html写一个计算器，代码要极简
最新发布
11-05
要创建一个简单的HTML计算器，我们不需要编写复杂的JavaScript代码，因为HTML本身并不支持复杂计算功能。我们可以利用一些基本元素如`...这只是一个基础演示，真正的计算器通常会结合JavaScript来实现更复杂的逻辑。
白色简洁计算器.zip
05-28
【白色简洁计算器】是一款基于HTML源码实现的网页计算器应用，设计风格简约，主要功能包括基本的加法、减法、乘法和除法运算。这个计算器是网页开发者或者学习前端技术的人士的一个良好示例，它展示了如何利用HTML、...
html简易计算器源码
07-11
html实现的一个简易计算器,使用了js、css，可用作学习之用。
简易计算器html源代码
05-29
是一个含javascript的简易计算器。
HTML+CSS+JS制作一个简单的计算器
09-19
HTML+CSS+JS制作一个简单的计算器。该计算器的计算规则类似于我们生活中用的大计算器，暂时未发现有计算错误的问题，有问题请联系我，谢谢。
简单计算器
MeiLi_chenai的博客
12-17 493
var numresult; var str; //用于输入的方法 function shuru(nums){ str = document.getElementById("disPlay"); str.value = str.value + nums; } //清空界面 function qingKong(){ do
初学HTML，写一个简单的计算器。
槐殇雪的博客
05-23 1595
先看效果： 其实写这个挺简单的计算用了一个table布局。没有其他的复杂的布局。。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <body> <table align="center"> <tr>
html中实现简单计算器功能,js实现简易计算器功能
weixin_42469546的博客
06-09 406
制作能进行加减乘除的简易计算器，主要是练习动态注册事件。因以练习为主，所以包含了较多基础方法。效果图代码简易计算器window.onload = function(){document.onclick = function(){var ipts = document.getElementsByTagName("input");for (var i = 0; i < ipts.length; ...
使用HTML写一个简易计算器
weixin_51369307的博客
08-09 8298
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <tr> <td><img src=""width="50px"height="50px"/></td> <td colspan="3"&.
HTML和JavaScript实现一个简单的计算器
qq_57142520的博客
08-14 1859
使用HTML和JavaScript实现一个简单的计算器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值