js+html+bootstrap实现计算器（包含退格，存储，取存，清存，累存，积存）

最新推荐文章于 2022-07-17 08:16:23 发布
最新推荐文章于 2022-07-17 08:16:23 发布
阅读量646 收藏 1
点赞数 1
分类专栏： 数据可视化 文章标签： javascript html bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52458004/article/details/121780141
版权

HTML JavaScript 计算器 存储功能 键盘事件
关键词由CSDN通过智能技术生成

注意，代码放到pycharm会有红色报错，但可以运行，没关系，直接打开html就好。（完全没影响）

布局效果

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<title>计算器</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
			  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
			  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
			  <script src="js/bootstrap.min.js"></script>
			  <script>
				  var str=""    //input框的str字符串
				  var flag=0    //判断是否已经得出结果
				  var storge="" //暂存区
				  $(document).ready(function(){
						  $("input").keypress(function(e){//获取键盘输入
									if(e.key=="+"||e.key=="-"||e.key=="*"||e.key=="/"||e.key=="."||(e.keyCode<=57&&e.keyCode>=48)&&e.key!='Enter')
									//有些keyCode没有连续性，所以e.key和keyCode交替使用了
									{
										str=str+e.key;
										//console.log(str);
										}
							  if(e.key=='Enter')
							  {
								  str=eval(str);
								  //console.log(str);
								    $("#result").val(str);
							  }
						  })
						 $("#changes").click(function (){
							 var tmp = "-"
							 str =tmp + str
						     str=eval(str);
						     $("#result").val(str);
                         })
						  $(".btn").click(function(){
						  		if(this.id=="a")	{

									var value=$(this).val();
										if(flag==1&&value<="9"&&value>="0")//判断是否已经按了=按钮
											{
												flag=0;
												str="";//按了结果清零
											}
											if(flag=0&&(value=="+"||value=="-"||value=="*"||value=="/"||value=="."))
												flag=1;
										str=str+value;
										$("#result").val(str);
								}
						  	})

							$("#submit").click(function(){
										str=eval(str);
										$("#result").val(str);
										flag=1;
							})
							$("#clear").click(function(){
								str="";
								$("#result").val(str);
								flag=0;
							})
					  		$("#cahe").click(function(){ //存储
								storge = str;
								str="";
								$("#result").val(str);
								flag=0;
							})
					  		$("#getcahe").click(function(){//取存

								str=storge;
								$("#result").val(storge);
								flag=0;
							})
					  		$("#backspace").click(function(){//退格

								str = str.substr(0,str.length-1) //去除最后一个字符
								str = eval(str)
								$("#result").val(str);
								flag=0;
							})
					  		$("#sumcahe").click(function(){  //累存
								var tmp =Number(str) + Number(storge)  //先转化成数字，做相加
								str = String(tmp)  //再转成字符
								str=eval(str);
								$("#result").val(str);
								flag=1;
							})
					  		$("#mulcahe").click(function(){  //积存
								var tmp =Number(str) * Number(storge);  //先转化成数字，做相乘
								str = String(tmp);  //再转成字符
								str=eval(str);
								$("#result").val(str);
								flag=1;
							})
					  		$("#clearcahe").click(function(){  //清存
								storge ="";
								str = "";
								storge=eval(storge);
								str=eval(str);
								$("#result").val(storge,str);
								flag=1;
							})
						$(".btn").css({"height": "110px", "width": "170px", "font-size": "55px"} )
					$("#clear,#submit").css({"height": "110px", "width": "170px", "font-size": "55px"})
					});
			  </script>
	</head>
	<body style="background-color: white;">
			<table border="0"  align="center" bgColor="blue" style="height: 900px; width: 720px">
				<tr>
					<td colspan="4"><input   type="text" id="result" style="height: 180px; width: 720px; font-size: 70px" /></td>
				</tr>
				<tr>
					<td  rowspan="1"><button id="cahe" type="button" class=" btn btn-primary ">存储</button></td>
					<td  rowspan="1"><button id="getcahe" type="button" class=" btn btn-primary ">取存</button></td>
					<td  rowspan="1"><button id="backspace" type="button" class=" btn btn-primary ">退格</button></td>
					<td rowspan="1"><button id="clear" type="button" class = " btn btn-primary ">清屏</button></td>
				</tr>
				<tr>
					<td  rowspan="1"><button id="sumcahe" type="button" class=" btn btn-primary ">累存</button></td>
					<td  rowspan="1"><button id="mulcahe" type="button" class=" btn btn-primary ">积存</button></td>
					<td  rowspan="1"><button id="clearcahe" type="button" class=" btn btn-primary ">清存</button></td>
					<td><button id="a" value="/" type="button" class="btn btn-info">÷</button></td>
				</tr>
				<tr>
					<td><button id="a" value="7" type="button" class="btn btn-default">7</button></td>
					<td><button id="a" value="8" type="button" class="btn btn-default">8</button></td>
					<td><button id="a" value="9" type="button" class="btn btn-default">9</button></td>
					<td><button id="a" value="*" type="button" class="btn btn-info">*</button></td>

				</tr>
				<tr>
					<td><button id="a" value="4" type="button" class="btn btn-default">4</button></td>
					<td><button id="a" value="5" type="button" class="btn btn-default">5</button></td>
					<td><button id="a" value="6" type="button" class="btn btn-default">6</button></td>
					<td><button id="a" value="-" type="button" class="btn btn-info">-</button></td>
				</tr>
				<tr>
					<td><button id="a" value="1" type="button" class="btn btn-default">1</button></td>
					<td><button id="a" value="2" type="button" class="btn btn-default">2</button></td>
					<td><button id="a" value="3" type="button" class="btn btn-default">3</button></td>
					<td><button id="a" value="+" type="button" class="btn btn-info">+</button></td>
				</tr>
				<tr>
					<td><button id="a" value="0" type="button" class="btn btn-default">0</button></td>
					<td><button id="a" value="." type="button" class="btn btn-info">.</button></td>
					<td rowspan="1"><button id="changes" type="button" class = " btn btn-primary ">+/-</button></td>
					<td  rowspan="2"><button id="submit" type="button" class=" btn btn-warning ">=</button></td>
				</tr>

				</table>
	</body>
</html>

总结：给自己记录下来，大家一起学习，代码可以在根据所学，再做修改。

爱吃老虎的猫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap-calculator:使用JS和Bootstrap构建简单的计算器
05-19
自举计算器 使用JS和Bootstrap构建简单的计算器 您可以在此处进行演示： :
bootstrap 插件 计算器_基于bootstrap表格导出excel插件
weixin_36183945的博客
12-30 153
tableexport.js表格excel插件，默认设置表格数据，支持表格文字内容和表头项目搜索，一键导出表格excel文件操作功能。(不兼容IE6，7，8，9)使用方法：表格内容修改,根据需求自行删减{field:"user_email",title:"email",align:"center",valign:"middle",sortable:"true"},{field:"user_comp...
Django+Bootstrap实现计算器
小旺的博客
11-07 1169
#Django+Bootstrap实现计算器 准备工作 创建一个应用 添加应用到配置 创建一个html 编写视图函数 from django.shortcuts import render # Create your views here. def home(request): return render(request, 'index.html') 配置路由 from django.contrib import admin from django.urls import path,
用bootstrip敲一个计算器
dwj_1234567的博客
08-10 422
算法提示：{{expression}}                                                                                                                                                                               
基于angularJs和Bootstrap的简易计算器
admin_java的博客
08-10 763
之前看到一个试题，要求用angularJs和Bootstrap写一个简单的计算器，通过百度，发现没有什么好的例子，所以呢，我就把自己写的一个例子发出来给大家。（大牛勿喷）
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
基于HTML+CSS+JS+JQuery+BootStrap仿天猫官网预览地址：.zip
最新发布
08-21
基于HTML+CSS+JS+JQuery+BootStrap仿天猫官网预览地址：.zip基于HTML+CSS+JS+JQuery+BootStrap仿天猫官网预览地址：.zip基于HTML+CSS+JS+JQuery+BootStrap仿天猫官网预览地址：.zip基于HTML+CSS+JS+JQuery+BootStrap...
AngularJs+Bootstrap实现漂亮的计算器
10-19
AngularJs与Bootstrap结合，可以快速实现一个具有现代界面风格的计算器应用。这种结合使得开发者能够利用AngularJs的数据绑定和指令系统，以及Bootstrap丰富的界面组件库，创建出既功能强大又具有良好用户体验的Web...
bootstrap+js+css+html实现静态页面的增删改查
08-19
1. 页面渲染 1) 隔行换色 2) 分数小于60,显示红色 3) 暂无数据和表格要互斥显示 4) 总分和平均分显示到整数部分即可 2. 添加学生 ... $("#addModal").modal('hide');... 3) 再次打开添加框,需要是空的 ...8. 数据存储
html+css+bootstrap实现家具电商bootstrap5模板Furbar.zip
03-09
JavaScript，是一种轻量级的解释型编程语言； jQuery，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互； Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS...
基于Bootstrap 3的精美jQuery计算器插件
12-12
SimpleCalculadora是一款基于Bootstrap 3的简单精美的jQuery计算器插件。该计算器插件的按钮使用3D按钮，整体设计简洁大方，可以完成加减乘除的4则运算。并且可以通过参数来设置按键的颜色和位置。
js实现模拟计算器退格键删除文字效果的方法
10-24
主要介绍了js实现模拟计算器退格键删除文字效果的方法,涉及javascript字符串截取操作的相关技巧,需要的朋友可以参考下
diet-calc:用jQuery和Bootstrap用JS编写的TDEE计算器
03-16
饮食计算 每日卡路里计算器 使用Bootstrap和Vanilla JavaScript构建 大致基于 来自公式 删除班级名称javascript 测试-achecker网站可访问性检查器 每日卡路里计算器 这个项目是一个简单而直接的计算器，它将帮助用户找出他们每天应该摄取多少卡路里，以保持，增加或减轻体重。 它是使用JavaScript，Bootstrap和几行CSS构建的。 用户体验 该网站在设计时考虑了简单性。 一种非常简单的方法，允许用户在几秒钟内获得结果。 任何想知道摄入多少卡路里的人都将从此计算器中受益。 该网站还包含一个“常见问题解答”部分，其中包含有关公式工作方式的重要信息。 布局始终意味着简单且不受干扰。 下图说明了使用Bootstrap组件可以轻松实现的初始概念： 该线框是使用创建的。 用户案例1： 我是约翰，一个30岁的男人，他正努力改善我的一般饮食
使用js写一个功能基本完善的计算器能够实现正确的加减乘除，实现退格和清零。
weixin_44164982的博客
08-08 2586
使用js写一个功能基本完善的计算器能够实现正确的加减乘除，实现退格和清零。
bootstrap+javascript制作体重标准计算器
weixin_44320438的博客
07-17 574
创建表单，通过js读取表单数据并对表单数据处理后输出到页面。
用bootstrap(的按钮)做的一个简单的计算器
dark_Gi的博客
10-02 790
前言 翻文件夹翻出来的，一年前感觉bootstrap的按钮好好看然后就打了一个计算器玩玩，改了好多bug，通过按钮的‘=’得出了结果后，再次输入数字会覆盖之前的结果，例如结果=1234，再按‘5’，结果=5.然鹅按回车键后得出的结果，再次输入是在结果后+数字，例如结果=1234，再按‘5’，结果=12345. 直接上代码 提升：请切换成英文输入法进行键盘输入 <!DOCTYPE html> <html> <head> <title>计算器</tit
bootstrap 插件 计算器_基于Bootstrap 3的精美jQuery计算器插件
weixin_39548541的博客
12-20 309
SimpleCalculadora是一款基于Bootstrap 3的简单精美的jQuery计算器插件。该计算器插件的按钮使用3D按钮，整体设计简洁大方，可以完成加减乘除的4则运算。并且可以通过参数来设置按键的颜色和位置。使用方法使用该计算器插件需要引入Bootstap3依赖文件，以及jQuery和SimpleCalculadorajQuery.css文件，SimpleCalculadorajQue...
五子棋网站设计与实现：HTML+CSS, Bootstrap与JavaScript技术
"这篇毕业设计主要探讨了五子棋游戏的网页实现，使用HTML+CSS，Bootstrap和JQuery等技术。设计目标是创建一个响应式的五子棋网站，支持用户登录和选择游戏难度，兼容多种浏览器。设计内容包括游戏的需求分析、系统...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值