js实现简单的计算器功能
话不多说，请看示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的计算器</title>
<style>
* {
margin: 0 auto;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
}
.wrap {
width: 30%;
min-width: 250px;
margin: 0 auto;
border: 1px solid #b1b1b1;
}
.wrap .screen {
width: 100%;
height: 150px;
background-color: #8d8d8d;
}
.wrap .screen .string {
height: 100%;
user-select: none;
font-size: 30px;
word-break: break-all;
}
.wrap .button-group {
width: 100%;
margin-top: 5px;
}
.wrap .button-group td {
width: 25%;
}
.wrap .button-group td a {
display: inline-block;
height: 80px;
text-align: center;
background-color: #d5d5d5;
color: #000;
line-height: 80px;
font-size: 25px;
width: 100%;
user-select: none;
}
.wrap .button-group td a:hover {
background-color: #9d9d9d;
color: #002a80;
}
.wrap .button-group td a.active {
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="screen">
<p class="string"></p>
</div>
<div class="button-group">
<table cellspacing="5" cellpadding="10" border="0" width="100%">
<tr>
<td><a href="javascript:void(0);">7</a></td>
<td><a href="javascript:void(0);">8</a></td>
<td><a href="javascript:void(0);">9</a></td>
<td><a href="javascript:void(0);">*</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);">4</a></td>
<td><a href="javascript:void(0);">5</a></td>
<td><a href="javascript:void(0);">6</a></td>
<td><a href="javascript:void(0);">/</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);">1</a></td>
<td><a href="javascript:void(0);">2</a></td>
<td><a href="javascript:void(0);">3</a></td>
<td><a href="javascript:void(0);">+</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);">DEL</a></td>
<td><a href="javascript:void(0);">0</a></td>
<td><a href="javascript:void(0);" class="active">=</a></td>
<td><a href="javascript:void(0);">-</a></td>
</tr>
</table>
</div>
</div>
<script>
var numString = document.getElementsByClassName("string")[0];
var buttonGroup = document.getElementsByTagName("a");
var screen = document.getElementsByClassName("string")[0];
var num1 = 0;
var num2 = 0;
var count = 0;
var f;
var flag = true;
/*控制输入的是数字*/
var flag2 = true;
/*控制是否连续点击符号*/
screen.onclick = function () {
numString.innerHTML = "";
};
for (var i = 0; i < buttonGroup.length; i++) {
buttonGroup[i].onclick = function () {
switch (this.innerHTML) {
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
if (!flag) {
numString.innerHTML = "";
flag2 = true;
}
flag = true;
numString.innerHTML += this.innerHTML;
break;
case "DEL":
numString.innerHTML = numString.innerHTML.substr(0, numString.innerHTML.length - 1);
break;
case "+":
case "-":
case "*":
case "/":
f = this.innerHTML;
count++;
if (flag2) {
flag = false;
/*控制输入的是符号*/
if (count == 1) {
num1 = numString.innerHTML;
} else {
flag2 = false;
num2 = numString.innerHTML;
numString.innerHTML = eval(num1 + f + num2);
num1 = numString.innerHTML;
}
}
break;
case "=":
num2 = numString.innerHTML;
numString.innerHTML = eval(num1 + f + num2);
count = 0;
flag = !flag;
break;
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
html+js实现简单的计算器代码(加减乘除)
html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&
-
超级简易的JS计算器实例讲解(实现加减乘除)
废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> body{ margin: 0; } .tab{ border: 3px solid black ; border-radius: 2px; border-collapse:collapse; width: 268p
-
纯js代码实现简单计算器
本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title> new document </title> <script type="text/javascript"> function count(){ var txt1 = parseInt( document.getElementById(
-
简易的JS计算器实现代码
看看手机中的计算器,分为普通计算器和科学计算器 自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能) 看看图示效果: 一.知识准备 1+1 = ? 正常来说,我们看到这个表达式都知道怎么运算,知道运算结果 但计算机不一样,计算机无法识别出这串表达式,它只能识别特定的规则:前缀表达式+ 1 1 或后缀表达式1 1 + 举个栗子 (3 + 4) × 5 - 6 就是中缀表达式 - × + 3 4 5 6 前缀表达式 3 4 + 5 × 6 - 后缀表达式 所以
-
vue.js实现简单的计算器功能
使用vue.js来编写一个简单的计算器,供大家参考,具体内容如下 效果如图所示:是一个十分简单的计算器,包含了加减乘除,不是用原生js写的,而是用vue.js写的 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"
-
js实现简单的计算器功能
话不多说,请看示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> * { margin: 0 auto; padding: 0px; } html, body { width: 100%; height: 100%; } a { text-
-
JS实现的简单四则运算计算器功能示例
本文实例讲述了JS实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <meta name="content-type" content="text/html; charset=UTF-8"> <head> <title>www.jb51.net 计算器 Calculator</title> <!
-
jQuery实现的简单在线计算器功能
本文实例讲述了jQuery实现的简单在线计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
-
原生JS实现简单的倒计时功能示例
本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr
-
使用Angular.js实现简单的购物车功能
先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script
-
js实现简单锁屏功能实例
本文实例讲述了js实现简单锁屏功能的方法.分享给大家供大家参考.具体实现方法如下: //********* 锁屏DIV *************************** function LockScreen(tag,title,width,height,url) { if (tag) //锁屏 { var lockdiv = document.getElementById("lockscreen"); if (lockdiv!=null) { lockdiv.style.dis
-
PHP实现的简单在线计算器功能示例
本文实例讲述了PHP实现的简单在线计算器功能.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf8"> <title>简单的计算器(www.jb51.net)</title> </head> <body> <?php //如果用户单击了计算按
-
C#实现简单的计算器功能完整实例
本文实例讲述了C#实现简单的计算器功能.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Collections; usi