基于H5，CSS，JavaScript的网页版标准计算器

最新推荐文章于 2021-09-21 07:58:57 发布

qq_36579437

最新推荐文章于 2021-09-21 07:58:57 发布

阅读量273

点赞数

文章标签： java javascript css

本文链接：https://blog.csdn.net/qq_36579437/article/details/98210705

版权

jsq.html

    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<link rel="stylesheet" href="css/font-awesome.min.css" />
    		<script type="text/javascript" src="js/jsq.js"></script>
    		<link rel="stylesheet" type="text/css" href="css/jsq.css" />
    	</head>
    
    	<body>
    
    		<div class="jsq">
    			<div class="title">
    				<span class="text">计算器</span>
    				<div class="close fa fa-window-close-o" style="padding-top: 4px;"></div>
    				<div class="back fa fa-window-maximize" style="padding-top: 4px;"></div>
    				<div class="back fa fa-window-minimize"></div>
    			</div>
    			<div class="menu">
    				<span>
    				<div class="back list fa fa-bars"></div>
    				<span class="mode">标准</span>
    				</span>
    				<div class="back history fa  fa-history"></div>
    			</div>
    			<div class="sum"></div>
    			<div class="input"></div>
    			<div class="opts">
    				<div class="button">MC</div>
    				<div class="button">MR</div>
    				<div class="button">M+</div>
    				<div class="button">M-</div>
    				<div class="button">MS</div>
    				<div class="button">M^</div>
    			</div>
    			<div class="buttons">
    
    			</div>
    	</body>
    
    </html>


 -jsq.css
 

`
jsq {
	position: relative;
	left: 100px;
	top: 100px;
	width: 200px;
	height: 310px;
	background: #eeeeec;
	border: 1px solid #aac;
}

.title {
	width: 100%;
	height: 25px;
}

.title .text {
	font-size: 12px;
	padding-left: 5px;
}

.title div {
	display: inline-block;
	width: 30px;
	height: 20px;
	font-size: 12px;
	text-align: center;
	float: right;
}

.back:hover {
	background: #ddd;
}

.title .close:hover {
	background: #f22;
	color: #eee;
}

.menu {
	width: 100%;
	height: 35px;
}

.menu .history {
	width: 20px;
	height: 20px;
	padding-top: 7px;
	padding-left: 7px;
	float: right;
}

.menu .list {
	width: 20px;
	height: 20px;
	padding-top: 7px;
	padding-left: 7px;
}

.menu span,
.menu .mode {
	padding-left: 5px;
}

.sum {
	width: 95%;
	height: 20px;
	text-align: right;
	font-size: 10px;
}

.input {
	width: 95%;
	height: 30px;
	text-align: right;
	font-size: 22px;
	font-weight: bold;
	overflow: hidden;
}

.opts {
	width: 100%;
	height: 25px;
}

.opts .button {
	width: 14.366%;
	height: 16px;
	display: inline-block;
	font-size: 10px;
	padding-top: 3px;
	font-weight: bold;
	text-align: center;
	margin: 2px 1.2px 2px 1.2px;
	border: 1px solid #eee;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.opts .button:hover {
	border: 1px solid #aaa;
	background: #ddd;
}

.buttons {
	width: 100%;
}

.buttons .button {
	width: 22.8%;
	height: 20px;
	display: inline-block;
	font-size: 12px;
	padding-top: 3px;
	text-align: center;
	margin: 2px 1.2px 2px 1.2px;
	border: 1px solid #eee;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.buttons .button:hover {
	border: 1px solid #aaa;
	background: #ddd;
}

.numback {
	background: #fafafa;
	font-weight: bold;
}

.othback {
	background: #f4f4f4;
}

jsq.js

var jsf = "+-*/";
var jsstr = "1234567890.";
var numstr = "1234567890";
var bts = ["%", "V", "x^", "1/X", "CE", "C", "x", "/", "7", "8", "9", "*", "4", "5", "6", "-", "1", "2", "3", "+", "+=", "0", ".", "="];
var jscount = 0;
var all = "";
var reset = false;

function buttonclick() {
	var txt = $(event.target).text();

	if(jsstr.indexOf(txt) >= 0) { //  数字
		inputnum(txt);
	} else if(jsf.indexOf(txt) >= 0) { //  数字
		jsnum(txt);
	} else if(txt == "=") {
		jsall();
	} else if(txt == "C") {
		jsall(true);
	}
	all += txt;
}

function jsall(isclear) {
	var input = $(".input");
	if(!isclear) {
		var sum = $(".sum").text();
		var result = eval("(" + sum + input.text() + ")");
		input.text(result);
	} else {
		input.text("");
	}
	$(".sum").text("");
	all = "";
	jscount = 0;
	reset = true;
}

function jsnum(txt) {
	var input = $(".input");
	var sum = $(".sum").text();
	var last = all.substr(all.length - 1, 1);
	if(jsf.indexOf(last) >= 0) {
		$(".sum").text(sum.substr(0, sum.length - 1) + txt);
		return;
	}

	$(".sum").text(sum + input.text() + txt);

	if(jscount >= 1) {
		var result = eval("(" + sum + input.text() + ")");
		input.text(result);
	} else {
		input.text("");
	}
	jscount++;
}

function inputnum(txt) {
	var input = $(".input");
	if(txt == "." && input.text().indexOf(".") >= 0) return;
	var last = all.substr(all.length - 1, 1);

	if((jscount > 1 && jsf.indexOf(last) >= 0) || reset) {
		input.text(txt);
		reset = false;
	} else {
		input.text(input.text() + txt);
	}
}

$(function() {
	for(var i = 0; i < bts.length; i++) {
		var back = "";
		if(numstr.indexOf(bts[i]) >= 0) back = " numback";
		else back = " othback";
		$(".buttons").append($("<div class='button" + back + "'>" + bts[i] + "</div>"));
	}

	$(".button").bind("click", "", buttonclick);

});

效果图