用bootstrap(的按钮)做的一个简单的计算器

最新推荐文章于 2025-11-16 02:39:36 发布

原创

最新推荐文章于 2025-11-16 02:39:36 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #jquery #web #html5 #js

这篇博客分享了一年前作者利用Bootstrap的按钮样式制作的一个计算器。计算器存在一个问题：当通过等号按钮得到结果后，直接输入数字会覆盖原有结果，而按下回车键则会在结果后追加数字。文章提供了代码示例，并表明自己是个编程新手。

前言

翻文件夹翻出来的，一年前感觉bootstrap的按钮好好看然后就打了一个计算器玩玩，改了好多bug，通过按钮的‘=’得出了结果后，再次输入数字会覆盖之前的结果，例如结果=1234，再按‘5’，结果=5.然鹅按回车键后得出的结果，再次输入是在结果后+数字，例如结果=1234，再按‘5’，结果=12345.
在这里插入图片描述

直接上代码

提升：请切换成英文输入法进行键盘输入

<!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    //判断是否已经得出结果
				  $(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);						
							  }
						  })
						  //后面的代码是1年前写的，没改过。。。
						  $(".btn").click(function(){
    
    
						  		if(this.id=="a")	{
    
    
						  		//i