计算器前端实现

最新推荐文章于 2024-05-30 10:46:58 发布
最新推荐文章于 2024-05-30 10:46:58 发布
阅读量1.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ya__tao/article/details/81566689
版权 
html：

<html>
    
    <head> </head>
    
    
    <body>
   <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./css/base.css" />
      </head>
    
        <div id="yi">
            <div id="er">
                <div id="zi">0</div>
            </div>
            <div class="san">AC</div>
            <div class="san">+/-</div>
            <div class="san">%</div>
            <div class="san cheng">/</div>
            <div class="san" id="n">7</div>
            <div class="san">8</div>
            <div class="san">9</div>
            <div class="san cheng">*</div>
            <div class="san">4</div>
            <div class="san">5</div>
            <div class="san">6</div>
            <div class="san cheng">-</div>
            <div class="san">1</div>
            <div class="san">2</div>
            <div class="san">3</div>
            <div class="san cheng">+</div>
            
            <div class="san kuan">0</div>
            <div class="san">.</div>
            <div class="san cheng">=</div>
            
        </div>
        <script src="./js/base.js"></script>
        </body>
    
</html>
css：

​
css：


@font-face{
    font-family:'ssss';
    src:url("../font/Broadway.ttf");
    }
	body{
		font-family:'ssss';
		}
#yi{
	width:330px;
	height:640px;
	/*border:1px solid black;*/
	margin:0 auto;
	
	}
	


#er{
	width:320px;
	height:187px;
	/*border:1px solid black;*/
	background:black;
	position:relative;
	}   
	
#zi{
	width:320px;
	height:60px;
	/*border:1px solid white;*/
	font-size:45px;
	position:absolute;
	bottom:20px;
	right:10px;
	color:white;
	text-align:right;
	line-height:60px;
	}
	
.san{
	width:80px;
	height:80px;
	border:1px solid black;
	float:left;
	margin-top:-1px;
	margin-left:-1px;
	background-color:#CCC;
	font-size:40px;
	line-height:80px;
	text-align:center;
	
	}
	
.cheng{
	background-color:#F60;
	}
	
.kuan{
	width:161px;
	}

js：

var diyi='';
var dier='';
var yunsuanfu='';
var xianshiDiv=document.getElementById('zi');
	
var els=document.getElementsByClassName('san');
for(var i=0;i<19;i++){
    els[i].onclick=function(){
		if(this.textContent=='/'||this.textContent=='*'||this.textContent=='+'||this.textContent=='-')
		
		
	{	yunsuanfu=this.textContent;}

if(this.textContent=='1'||this.textContent=='2'||this.textContent=='3'||this.textContent=='4'||this.textContent=='5'||this.textContent=='6'||this.textContent=='7'||this.textContent=='8'||this.textContent=='9'||this.textContent=='0'||this.textContent=='.'||this.textContent=='%'||this.textContent=='/'||this.textContent=='*'||this.textContent=='+'||this.textContent=='-'){
	
	if(yunsuanfu==''){
		
		diyi=parseInt(this.textContent);
		xianshiDiv.textContent=this.textContent;
		
		}
	else{
		dier=parseInt(this.textContent);
		xianshiDiv.textContent=this.textContent;
		
		}
	
      }


	if(this.textContent=='='){
		
		    if(diyi==''||dier==''){alert("请将所要运算的两个数输入完整")}
		
		    if(yunsuanfu=='/'){
			
			var jieguo=diyi/dier;
			xianshiDiv.textContent=jieguo;
			
			}
			if(yunsuanfu=='+'){
			
			var jieguo=diyi+dier;
			xianshiDiv.textContent=jieguo;
			
			}
			if(yunsuanfu=='-'){
			
			var jieguo=diyi-dier;
			xianshiDiv.textContent=jieguo;
			
			}
			if(yunsuanfu=='*'){
			
			var jieguo=diyi*dier;
			xianshiDiv.textContent=jieguo;
			
			}
			diyi=jieguo;
			jieguo='';
			yunsuanfu='';
			dier='';
		}
	

	}

-----------------------------------------------------未完善----------------------------------------------------------------------------------------------------------------------

Tila
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端技术搭建一个有趣的计算器（内含源码）
官方推荐
07-24 3万+
通过前端基础HTML、CSS、JS来带领大家用几十行代码来实现了一个有趣的计算器功能；帮助更多前端小白来感受三件套的搭配使用
前端小项目（1）——算数计算器
dsfdaifeng的博客
11-05 536
大家好，我是学化工的海潮，分享一个前端练手小项目。这段小项目实现了一个简单的计算器功能，当按钮被点击时，根据按钮的值执行不同的操作，包括清空结果、进行计算和追加值到输入框。核心函数是事件监听器和eval()函数。
前端页面计算器实现
想娶媳妇的苗同学的博客
10-02 3712
简易的前端计算器实现，献给大家！ 1、html部分（js已嵌入）代码： <!-- 前端计算机 爱娶媳妇的苗同学 2019.12.24 22：29 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title...
7个常用的前端开发工具（非常详细）零基础入门到精通，收藏这一篇就够了
最新发布
leah126的博客
05-30 1574
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具,功能齐全,集成度高，内置服务器调试，ESlint，代码补全，Emmet,ES6语法支持等应有尽有，目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。也存在一定的缺点正版收费，由于内置集成度比较高占内存大(常驻内存300M左右)，启动慢，对电脑配置有一定要求。
前端实现网页计算器
weixin_51749554的博客
05-08 7703
如何在利用HTML，css和js的知识制作一个简单的网页计算器呢？ 一个计算机中具备了： 计算机整体框 输入框 输入按钮 计算机整体框： /*设置div样式*/ #showdiv{ border: solid 1px; border-radius: 5px; width: 350px; height: 400px; text-align: center;
基于Vue前端框架的一个简单的网页计算器
AAAHTAAA的博客
05-05 512
计算器plus
js 前端实现网页计算器
01-31
本项目“js 前端实现网页计算器”旨在教你如何利用HTML、CSS和JavaScript创建一个功能完备的网页计算器。下面我们将详细探讨这个过程中的关键知识点。 首先，我们需要创建HTML结构。HTML（超文本标记语言）是网页的...
javascript实现优先级计算器
10-27
JavaScript实现优先级计算器涉及到的核心知识点包括JavaScript语言基础、数学逻辑、事件处理、DOM操作以及可能的正则表达式。下面将详细阐述这些方面。 1. **JavaScript语言基础**：JavaScript是一种广泛使用的解释...
适合小白入门，练习计算器的前端实现
08-01
适合前段需要计算场景下的接入，简单高效，不过适用场景较窄，适合新入门的技术控和特定应用场景的
Vue实现手机计算器
10-14
在这个案例中，我们将讨论如何使用Vue来实现一个手机计算器。首先，我们需要关注的是计算器的界面设计，这是通过CSS完成的，确保每个按钮（包括0-9的数字、加减乘除、百分号、清除、小数点和等号）都有正确的样式和...
Vue实现简易计算器
10-15
以下是对实现这个简易计算器的关键知识点的详细解释： 1. **Vue实例**： 在代码中，我们首先创建了一个Vue实例，`var v = new Vue({ ... })`，这定义了一个Vue应用程序，并指定了挂载元素（el属性）以及数据对象...
一个简单的计算器设计
09-20
一个简单的计算器设计 可视化程序编程环境 课 程 设 计
前端语言写的一个计算器的小程序
11-19
这个是一个自己用前端语言写的一个计算器的程序, 过程中有代码注释, 以及BUG的解决, 对你应该非常有帮助的.
前端制作计算器
2301_77523019的博客
03-23 230
用前端三剑客完成计算器功能
前端实现一个简单的计算器
m0_51710745的博客
03-28 1684
这是基于上午的完善实现了基本的计算器运算功能，睡个午觉在继续完善一些bug（顺便宣传一下B站蜗牛学院课程） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
使用web前端制作一个计算器
鸡叉骨的博客
03-20 7506
如果可以，点个赞支持一下呗，编程路上有我陪着你！ 制作一个计算器效果图如下： 一言不合上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Calculator</title> <style> /* 主体 */ .counter { wid.
前端计算器代码
认真和努力总没有错
08-23 1937
呈上html代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use
【前端】HTML和CSS案例 计算器页面效果（起点闭关计划）
weixin_48680173的博客
02-19 460
关于
web前端——笔记3（做一个简易计算器）
weixin_44501506的博客
01-26 2878
周末在家无事，就想写一个计算器来玩，然后去百度看了好多大牛写的代码感觉很复杂，以我现在的程度还是难以理解，所以我自己写了一个特别简单的计算器。直接上代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &
用html写一个函数计算器前端页面
05-20
好的，以下是一个简单的函数计算器前端页面，用 HTML 和 JavaScript 实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>函数计算器</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } h1 { text-align: center; } .container { max-width: 500px; margin: auto; padding: 20px; background-color: #f2f2f2; border-radius: 10px; } input[type="text"], input[type="button"] { display: block; width: 100%; margin: 10px 0; padding: 10px; border: none; border-radius: 5px; font-size: 16px; box-sizing: border-box; } input[type="button"] { background-color: #4CAF50; color: white; cursor: pointer; } </style> </head> <body> <h1>函数计算器</h1> <div class="container"> <input type="text" id="expression" placeholder="请输入表达式"> <input type="button" value="计算" onclick="calculate()"> <input type="text" id="result" placeholder="计算结果"> </div> <script> function calculate() { let expression = document.getElementById("expression").value; let result; try { result = eval(expression); } catch (error) { result = "错误的表达式"; } document.getElementById("result").value = result; } </script> </body> </html> ``` 这个计算器页面非常简单，只有一个输入框和一个按钮用于计算表达式，并在下方显示结果。注意到这个计算器使用了 JavaScript 的 `eval()` 函数来计算输入的表达式，这个函数可以将字符串当作 JavaScript 代码执行，但也因此存在一些安全风险，所以需要确保输入的表达式不会被恶意篡改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值