JavaScript网页计算器

最新推荐文章于 2023-12-01 19:30:20 发布
最新推荐文章于 2023-12-01 19:30:20 发布
阅读量3.3k 收藏 15
点赞数 3
分类专栏： HTML CSS JavaScript 文章标签： javascript css HTML Js计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34416191/article/details/51912602
版权
JavaScript 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
HTML
13 篇文章 0 订阅
订阅专栏
CSS
7 篇文章 0 订阅
订阅专栏

该计算器是用DW写的！

HTML篇

<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<link href="style/calculator.css" rel="stylesheet" type="text/css" />
<script src="JavaScript/calculator.js"></script>>
</head>

<body >
<form id="form1" name="form1" method="post" action="">
  <table width="320" border="1" cellpadding="0" cellspacing="0" class="trb" id="calculator">
    <tr>
      <td height="100" colspan="4" align="left" valign="top"><label for="txt"></label>
      <input name="txt" type="text" class="txt" id="txt" value="0"  οnfοcus="this.blur();"/></td>
    </tr>
    <tr>
      <td width="80" height="40" align="center" valign="middle" οnclick="deleteAll();">C</td>
      <td width="80" height="40" align="center" valign="middle" οnclick="Backspace();">←</td>
      <td width="80" height="40" align="center" valign="middle" οnclick="sign();">±</td>
      <td width="80" height="40" align="center" valign="middle" class="operator" οnclick="add();">＋</td>
    </tr>
    <tr>
      <td width="80" height="40" align="center" valign="middle" οnclick="command(7);">7</td>
      <td width="80" height="40" align="center" valign="middle" οnclick="command(8);">8</td>
      <td width="80" height="40" align="center" valign="middle" οnclick="command(9);">9</td>
      <td width="80" height="40" align="center" valign="middle" class="operator" οnclick="subtract();">－</td>
    </tr>
    <tr>
      <td width="80" height="40" align="center" valign="middle" οnclick="command(4);">4</td>
      <td width="80" height="40" align="center" valign="middle" οnclick="command(5);">5</td>
      <td width="80" height="40" align="center" valign="middle" οnclick="command(6);">6</td>
      <td width="80" height="40" align="center" valign="middle" class="operator" οnclick="multiply();">×</td>
    </tr>
    <tr>
      <td width="80" height="40" align="center" valign="middle" οnclick="command(1);">1</td>
      <td width="80" height="40" align="center" valign="middle" οnclick="command(2);">2</td>
      <td width="80" height="40" align="center" valign="middle" οnclick="command(3);">3</td>
      <td width="80" height="40" align="center" valign="middle" class="operator" οnclick="divide();">÷</td>
    </tr>
    <tr>
      <td width="80" height="40" align="center" valign="middle" οnclick="command(0);">0</td>
      <td width="80" height="40" align="center" valign="middle" οnclick="dot();">▪</td>
      <td height="40" colspan="2" align="center" valign="middle" bgcolor="#CC6600" οnclick="equal();">＝</td>
    </tr>
  </table>
  <p> </p>
  <p> </p>
</form>
</body>
</html>

CSS篇 

@charset "utf-8";
/* CSS Document */

.trb {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	color: #FFF;
	background-color: #333;
	text-align: center;
	border: 1px solid #999;
}
.operator {
	background-color: #333;
	font-size: 18px;
	color: #C60;
	font-family: Verdana, Geneva, sans-serif;
}
td:hover{ 
	font-size: 28px;
	cursor:pointer; 
}
.txt {
	height: 100px;
	width: 320px;
	background-color: #333;
	text-align: left;
	vertical-align: bottom;
	color: #FFF;
	font-size: 30px;
}

JavaScript篇 

//实现计算器功能


//结果
var result = 0;
//显示框中的数（默认为“0”）
var screenNum = "0";
//数的初始输入状态，默认为0；当按了任意运算符键后，数的输入状态变为1
var state = 0;
//防止重复按运算符键
var avoidRepeat = true;
//运算符键（默认为0--等于号）
var operator = 0;

//第一步：获取按键值，并显示在显示框中
function command(num) {
	//获取显示框的值
	var str = String(document.form1.txt.value);
	//对该值进行判断，如果该值不为"0"，且输入状态0，则返回前者，否则为""(双重三目运算)
	//两个判断条件：1、显示框中值是否为"0",   2、数的输入状态
	str = (str != "0")?((state == 0)?str:""):"";
	//给当前值追加字符
	str = str + String(num);
	//刷新显示
	document.form1.txt.value = str;
	//按了任意数字键后，数的输入状态变为0
	state = 0;
	//重置防止重复按键
	avoidRepeat = true;
}

//第二步：确保输入的数是合法的，每个数至多只有一个小数点
function dot() {
	var str = String(document.form1.txt.value);
	//若该数前面未接运算符，则返回前值，否则为"0"；
	str = (state == 0)?str:"0";
	//Java里String有length()方法，而JS里String有length属性
	for(i=0;i<=str.length;i++) {
		//substr()获取下标从i开始，个数为1个的子串
		if(str.substr(i,1)==".") {
			//当存在小数点时，则程序终止
			return;
		}	
	}
	//若无小数点，则在该数后面加上
	str = str+".";
	//刷新显示
	document.form1.txt.value = str;
	//恢复数的初始输入状态
	state = 0;
	
}

//第三步：处理退格键
function Backspace() {
	var str= String(document.form1.txt.value);
	//若显示框中数不等于"0",则返回str，否则返回""
	str = (str != "0")?str:"";
	//获取子串
	str = str.substr(0,str.length-1);
	//若str不为"",则返回子串str，否则str="0"
	str = (str != "")?str:"0";
	//刷新显示
	document.form1.txt.value = str;
	
}

//第四步：删除所有
function deleteAll() {
	//显示框设为"0"
	document.form1.txt.value = "0";
	//恢复数的初始输入状态
	state = 0;
	//恢复运算符键，默认为0--等于号
	operator = 0;
}

//第五步：加法
function add() {
	//调用计算函数
	calculate();
	//更改数的输入状态
	state = 1;
	//更改运算符键，1--加号
	operator = 1;
	
}

//第六步：减法
function subtract() {
	//调用计算函数
	calculate();
	//更改数的输入状态
	state = 1;
	//2--减号
	operator = 2;
	
	
}

//第七步：乘法
function multiply() {
	//调用计算函数
	calculate();
	//更改数的输入状态
	state = 1;
	//3--乘号
	operator = 3;
	
}

//第八步：除法
function divide() {
	//调用计算函数
	calculate();
	//更改数的输入状态
	state = 1;
	//4--除号
	operator = 4;
	
}

//第九步：正负号
function sign() {
	//5--正负号
	operator = 5;
	//调用计算函数
	calculate();
	//更改数的输入状态
	state = 1;
	//0--等于号
	operator = 0;
	//正负号可以连续按
	avoidRepeat = true;

}

//第十步：等于
function equal() {
	//调用计算函数
	calculate();
	//更改数的输入状态
	state = 1;
	//0--等于号
	operator = 0;
	
	
}

//第十一步：计算
function calculate() {
	//获取显示框中的值
	screenNum = Number(document.form1.txt.value);
	if(avoidRepeat) {	
		switch(operator){
			case 1:
				result = result + screenNum;
				document.form1.txt.value = result;
				break;
			case 2:
				result = result - screenNum;
				document.form1.txt.value = result;
				break;
			case 3:
				result = result * screenNum;
				document.form1.txt.value = result;
				break;
			case 4:
				if(screenNum == 0){
					//设置显示框的值
					document.getElementById("txt").value="除数不能为0";
					//3s后，执行清屏函数
					setTimeout(clearScreen,3000);
				}else{
					result = result/screenNum;
					document.form1.txt.value = result;
				}
				break;
			case 5:
				result = (-1)*screenNum;
				document.form1.txt.value = result;
				break;
			case 0:
				result = screenNum;
				document.form1.txt.value = result;
				break;
			
		}
		//当按了运算符键后，不能再按
		avoidRepeat = false;
	}
	
}

//第十二步：清屏函数
function clearScreen() {
	document.getElementById("txt").value = "0";
		
}








须佐能乎！
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript简易网页计算器
lwangji的博客
07-09 1520
JavaScript简易网页计算器 带时间显示功能的网页计算器，显示效果如图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>calculator</title> <style> .form{ border: 2px solid gold; b
基于JavaScript实现网页计算器
苦涩
04-04 2618
基于JavaScript的网页计算器 基于HTML、CSS、JavaScript制作的网页计算器，其中可以实现加、减、乘、除、取整、求余、阶乘、科学计数等功能 界面如下： 有兴趣的朋友可以继续完善 ^ _ ^ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
JavaScript 网页简易计算器
weixin_62630571的博客
02-06 856
JavaScript 设计简易计算器
用JavaScript和HTML实现一个精美的计算器
黑夜开发者的博客
07-29 3103
计算器是我们日常生活中经常使用的工具之一，可以帮助我们进行简单的数学运算。在本博文中，我将使用JavaScript编写一个漂亮的计算器，并添加加减乘除功能。这个计算器将有一个精美的用户界面，包含9个数字按钮和加减乘除操作符。好了，本文的内容就分享到这里。希望你在使用这个精美计算器的过程中有所收获，它不仅能帮助你进行基本的数学运算，还能为你提供一个愉快的使用体验。如果你对编程感兴趣，也欢迎自行扩展功能，让这个计算器变得更加强大。
用javascript做一个计算器,用js做一个计算器代码
阿发狗伪原创
10-18 3666
大家好，给大家分享一下怎么用javascript做一个简单的计算器，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！  由于在之前的博客中有对html和css进行详细的讲解，再次就不多叙述，直接上代码。因为js中用到了JQuery选择器所以在html中使用标签引入了JQuery，在html中为每个按钮单击绑定计算器事件cal()并传入当前点击对象thispython for语句用法。   .html文件：   .css文件：   静态页面如图示： 1.功能：实现简单的数值的加减乘
【JavaScript项目】如何用JavaScript实现 计算器？（附完整源码）
最新发布
tutu6663的博客
12-01 4381
实现了如上图所示的一般计算器的功能包括（1）加、减、乘、除、取余这样的基本运算（好像计算器“%”这个符号不是取余，是百分号的意思，但在这里是取余的意思）（2）还有功能按键按键：退格，清空，按键“+/-”是给当前数字取相反数的意思（3）最上面的长格子用来显示输入的算式，点击“=”号后会变成计算后结果（4）有一定交互响应，比如鼠标放在按键上，按键颜色会变深。
基于js的网页计算器实现
学习小使者 的专栏
06-17 2297
一个功能非常齐全的计算器，支持十六进制、十进制、八进制、二进制、双曲函数、角度制、弧度制的运算，支持公式计算，以及一些常用的功能。
javascript网页计算器
10-21
JavaScript网页计算器是基于Web浏览器的一种交互式计算工具，利用JavaScript编程语言实现，可以在网页上进行基本的数学运算。本文将详细介绍如何使用JavaScript构建一个具备显示当前时间、清零、加减乘除取模运算...
JavaScript网页计算器-栈实现.html
05-18
使用 JavaScript 写的网页版计算器。可以很好的完成加减乘除，但是并没有括号提供使用。内部实现的话，主要基于入栈出栈，与大学算法书中的简易计算器原理一致。
javascript 网页计算器
12-15
js写的计算机，初学的人可以看看，仅供参考
网页计算器实例
06-21
网页计算器是一种常见的交互式网页元素，它通过JavaScript和HTML技术实现。这个实例是为初学者设计的，旨在帮助他们理解这两种技术如何协同工作以创建动态的网页应用。 首先，我们来了解一下HTML（HyperText Markup...
使用 JavaScript 创建一个简单的计算器
qq_60597540的博客
11-05 7165
通过这个示例，我们可以看到使用 JavaScript 创建一个简单的计算器是非常简单的。JavaScript 提供了丰富的功能和灵活性，使得开发者能够轻松地实现各种交互功能。以上代码是一个简单的 HTML 页面，其中包括两个输入框和四个按钮，用于实现加、减、乘、除操作。JavaScript 是一种广泛应用于网页开发的脚本语言，它具有灵活、动态和强大的特性。本文将演示如何使用 JavaScript 创建一个简单的计算器，并实现基本的加减乘除操作。MDN Web 文档：JavaScript。
js简单计算器的实现,javascript简单计算器
神经网络爱好者
11-27 143
大家好，给大家分享一下js简单计算器的实现，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！
用JavaScript制作简单的网页计算器
小言同学的博客
11-12 8365
一、题目 利用JavaScript中的函数，完成数字加、减、乘、除的运算，实现一个简单的计算器。 二、代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>网页计算器</title> </head> <body> <div> <p>数字1：<input type="text" id="num1"/&g
JavaScript实现网页计算器
Alanx的博客
03-21 4996
Hbuilder X中实现网页计算器（+-*/） 文章目录 一、计算器代码 二、代码分析 一、计算器代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <style type="text/css"> .kuang { border: 2px black soli...
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
HTML：使用JavaScript脚本在网页上编写一个简单的乘法计算器
有意栽花花不发，无心插柳柳成荫。
02-16 3135
hello，大家好，我是wangzirui32，今天我来学习如何使用表单+js脚本编写一个简单的乘法计算器，先创建一个HTML文件，输入： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript乘法计算器</title> <script src="demo.js"></script> </h
JavaScript实现计算器运算网页
05-30
可以使用HTML、CSS和JavaScript来创建一个计算器运算网页。以下是一个简单的实现： HTML代码： ``` <div class="calculator"> <input type="text" id="input" disabled> <div class="buttons"> <button onclick="clearInput()">C</button> <button onclick="backspace()">←</button> <button onclick="insert('+')">+</button> <button onclick="insert('-')">-</button> <button onclick="insert('*')">*</button> <button onclick="insert('/')">/</button> <button onclick="calculate()">=</button> <button onclick="insert('7')">7</button> <button onclick="insert('8')">8</button> <button onclick="insert('9')">9</button> <button onclick="insert('4')">4</button> <button onclick="insert('5')">5</button> <button onclick="insert('6')">6</button> <button onclick="insert('1')">1</button> <button onclick="insert('2')">2</button> <button onclick="insert('3')">3</button> <button onclick="insert('0')">0</button> <button onclick="insert('.')">.</button> </div> </div> ``` CSS代码： ``` .calculator { width: 200px; margin: 0 auto; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5px; } button { background-color: #4CAF50; color: white; border: none; border-radius: 5px; padding: 10px; font-size: 20px; cursor: pointer; } button:hover { background-color: #3e8e41; } ``` JavaScript代码： ``` var input = document.getElementById('input'); function insert(value) { input.value += value; } function backspace() { input.value = input.value.slice(0, -1); } function clearInput() { input.value = ''; } function calculate() { try { input.value = eval(input.value); } catch (e) { if (e instanceof SyntaxError) { input.value = 'Error'; } } } ``` 这个计算器运算网页支持加、减、乘、除、小数点和清空操作，并且使用了eval()函数来进行计算。需要注意的是，eval()函数可能存在安全隐患，不建议在生产环境中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值