基于JavaScript实现网页计算器

最新推荐文章于 2023-11-14 10:53:55 发布
最新推荐文章于 2023-11-14 10:53:55 发布
阅读量579 收藏
点赞数 1
分类专栏： 前端 JavaScript 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47354826/article/details/116258749
版权

先看效果：

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
此外，计算器还附有数字、运算符检查功能：在这里插入图片描述
在这里插入图片描述

下贴源码：

<!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>
<script language="javascript">

	var oper1=prompt("请输入第一个操作数：");
	var oper2=prompt("请输入第二个操作数：");
	var operator=prompt("请输入运算符（+，-，*，/）");
	parse();
	var result;
	switch(operator)
	{
		case"+":
			result=doSum(oper1,oper2);
			alert(oper1+"+"+oper2+"="+result);
			break;
		case"-":
			result=doSubstract(oper1,oper2);
			alert(oper1+"-"+oper2+"="+result);
			break;
		case"*":
			result=doMultiply(oper1,oper2);
			alert(oper1+"*"+oper2+"="+result);
			break;
		case"/":
			result=doDivide(oper1,oper2);
			alert(oper1+"/"+oper2+"="+result);
			break;
		default:
			alert("输入的运算符不合法");
		}
		function parse(){
			if(isNaN(oper1)||isNaN(oper2)){
				alert("输入的数字不合法");
				}
			else{
				oper1=parseFloat(oper1);
				oper2=parseFloat(oper2);
				}
			}
		function doSum(oper1,oper2){
			return oper1+oper2;
			}
		function doSubstract(oper1,oper2){
			return oper1-oper2;
			}
		function doMultiply(oper1,oper2){
			return oper1*oper2;
			}
		function doDivide(oper1,oper2){
			return oper1/oper2;
			}
</script>
</head>

<body>
</body>
</html>

当然，这里只展示了JavaScript源码，还可以使用html+css给计算器设计好看的外观，大家随意发挥。

王祺灏
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于JavaScript的网页版计算器
01-07
JavaScript，作为Web开发中的重要脚本语言，被广泛用于实现网页的动态交互功能。本教程将深入讲解如何利用JavaScript构建一个简单的网页版计算器，这对于初学者来说是一个很好的实践项目。 首先，我们需要理解网页...
JS基于递归实现网页版计算器的方法分析
10-18
主要介绍了JS基于递归实现网页版计算器的方法,结合实例形式分析了javascript采用递归算法实现网页版计算器的步骤与相关操作技巧,需要的朋友可以参考下
用JavaScript和HTML实现一个精美的计算器
黑夜开发者的博客
07-29 3003
计算器是我们日常生活中经常使用的工具之一，可以帮助我们进行简单的数学运算。在本博文中，我将使用JavaScript编写一个漂亮的计算器，并添加加减乘除功能。这个计算器将有一个精美的用户界面，包含9个数字按钮和加减乘除操作符。好了，本文的内容就分享到这里。希望你在使用这个精美计算器的过程中有所收获，它不仅能帮助你进行基本的数学运算，还能为你提供一个愉快的使用体验。如果你对编程感兴趣，也欢迎自行扩展功能，让这个计算器变得更加强大。
用JavaScript制作简单的网页计算器
小言同学的博客
11-12 8348
一、题目 利用JavaScript中的函数，完成数字加、减、乘、除的运算，实现一个简单的计算器。 二、代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>网页计算器</title> </head> <body> <div> <p>数字1：<input type="text" id="num1"/&g
网页计算器
qq_58849698的博客
07-27 228
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function calc(func){ var result =document.getElementById('result'); ...
用JavaScript实现一个简单的网页版计算器
run_bear的博客
08-05 9459
背景 实现效果 最终展现的页面如下图 用到的技术 实现思路 具体实现代码
javascript简易计算器代码,用js做一个计算器代码
最新发布
chatgpt001的博客
11-14 1977
大家好，小编来为大家解答以下问题，利用javascript制作简单的计算器，javascript简易计算器代码，今天让我们一起来看看吧！
【JavaScript源代码】基于JavaScript实现网页计算器.docx
12-30
基于JavaScript实现网页计算器 　本文实例为大家分享了JavaScript实现网页计算器的扫雷游戏的具体代码，供大家参考，具体内容如下　先看效果：　此外，计算器还附有数字、运算符检查功能：　下贴源码：　<!DOCTYPE ...
javascript实现简单计算器
11-27
在这个项目中，“javascript实现简单计算器”是一个基础的编程练习，旨在利用JavaScript创建一个能够执行基本数学运算的计算器。 首先，我们需要理解JavaScript的基础语法。JavaScript是一种弱类型的语言，变量在...
基于JavaScript的贷款计算器
03-11
在这个基于JavaScript的贷款计算器项目中，我们主要探讨以下几个关键知识点： 1. **DOM操作**：HTML（文档对象模型）是网页内容的结构化表示，JavaScript通过DOM API可以动态地操作这些元素。在贷款计算器中，...
JS实现基本的网页计算器功能示例
11-21
本文实例讲述了JS实现基本的网页计算器功能。分享给大家供大家参考，具体如下： <html> <head> <title>网页计算机</title> <meta charset="UTF-8"/> <style type="text/css"> #jsjdiv{ border: solid 1px black; border-radius: 5px; width: 200px; /*hei
使用HTML+JavaScript实现的网页计算器
11-12
使用html，JavaScript和css制作的简单科学计算器，无明显bug
基于JS的计算器实现
11-15
基于JavaScript的网页计算器实现，源代码，可完好地运行。
javascript网页计算器
10-21
用javascript编写程序，实现简单的网页计算器，包括显示当前时间，清零，加减乘除取模运算等。
用js做出计算机界面,网页版计算器的实现(js实现计算功能)
weixin_31826689的博客
07-24 1370
标签都有一个点击事件,appContent(this),相信大家也看得懂,这是把点击的当前的对象当成参数传进方法中,其实这样子做的目的应该能猜到,就是往上面的框框中尾加字符串的意思,除了几个特别的,比如图中的"del","c","="这几个是不能尾加的,所以需要另作考虑,既然这样的话,那我们的代码其实就很简单了:function appContent(td){//找到显示字符串等式的td标签var...
javascript 实现一个网页计算器
godofwarlove的博客
05-24 354
function calc(){ while(1){ var checked=Number(prompt('欢迎使用简易计算器：\n1.加法运算\n2.减法运算\n3.乘法运算\n4.除法运算\n5.退出\n请输入您的选项')) switch(checked){ case 1:var sum= Number(prompt('请输入第一个数') );var sum2=Number(prompt('请输入第二个数'));result=sum+sum2;al...
简单网页计算器代码
热门推荐
qq_33721778的博客
11-13 1万+
注：本人为初学者，欢迎各位大神指教 简单计算器实现效果： HTML代码counter.html 计算器
网页版简易计算器（仅加减乘除）
qq_44544363的博客
07-30 3372
网页版简易计算器（仅加减乘除） ………………………………………………………………………………………………… 开发工具与关键技术：Visual Studio 2015 C# 作者：林敏静 撰写时间：2019年7月25日 ………………………………………………………………………………………………… 每个月总有那么一两天厌倦写代码，为了放松一下自我，我在空闲时间看到了一些的网页版计算器，所以我也跟风写了...
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()函数可能存在安全隐患，不建议在生产环境中使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值