多功能标准型计算器

实现一个标准型计算器及其各项功能的实现

效果图欣赏

在这里插入图片描述
是不是看起来很漂亮的呢???

功能详解:

  1. 屏幕显示输入的数字和符号
  2. 实现加减乘除运算
  3. 回退和清零功能
  4. 小数的运算
  5. 结果的输出

相信小伙伴们都已经迫不及待的想要知道源码了。

代码展示

HTML页面代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/com.css" type="text/css" /></head><body><table><tr><td colspan="4"><input class="screen" type="text" disabled /></td></tr><tr><td><input class="but_ac but" type="button" value="AC" style="color: orange"></td><td><input class="but_ac but" type="button" value="<—" style="color: orange"></td><td><input class="but" type="button" value="+/-"></td><td><input class="but" type="button" value="/"></td></tr><tr><td><input class="but" type="button" value="7"></td><td><input class="but" type="button" value="8"></td><td><input class="but" type="button" value="9"></td><td><input class="but" type="button" value="*"></td>  </tr><tr><td><input class="but" type="button" value="4"></td><td><input class="but" type="button" value="5"></td><td><input class="but" type="button" value="6"></td><td><input class="but" type="button" value="-"></td></tr><tr><td><input class="but" type="button" value="1"></td><td><input class="but" type="button" value="2"></td><td><input class="but" type="button" value="3"></td><td><input class="but" type="button" value="+"></td></tr><tr><td colspan="2"><input class="but" type="button" value="0" style="width: 180px"></td><td><input class="but" type="button" value="."></td><td><input class="but" type="button" value="=" style="background-color:orange ;color:white"></td></tr></table><script type="text/javascript" src="js/com.js"></script></body>
</html>

com.js代码

window.onload = function() {var num = document.getElementsByClassName("but"); var scr = document.getElementsByClassName("screen")[0]; for (var i = 0; i < num.length; i++) {num[i].onclick = function() {if (this.value == "AC") { scr.value = "";} else if (this.value == "+/-") { if (scr.value == "") {scr.value = "";}else if (isNaN(scr.value.charAt(scr.value.length - 1)) == false && isNaN(scr.value.charAt(scr.value.length - 2)) ==true) {scr.value = scr.value.substr(0, scr.value.length - 1) + "(" + "-" + scr.value.charAt(scr.value.length - 1) + ")";}}else if (this.value == "<—" && this.value != "") {scr.value = scr.value.substr(0, scr.value.length - 1);}else if (scr.value == "" && this.value == ".") {scr.value = "0.";}else if (this.value == "=") {scr.value = eval(scr.value);}else if (scr.value == "" && (this.value == "+" || this.value == "-" || this.value == "*" || this.value == "/")) {scr.value == "";} else {scr.value += this.value;}}}
}

上述代码能完整的实现此多功能计算器,快去完成你的个性计算器吧。

获取更多关注我呦!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/565943.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【OpenCV 例程200篇】51. 直方图处理之直方图反向追踪(cv2.calcBackProject)

『youcans 的 OpenCV 例程300篇 - 总目录』 【OpenCV 例程200篇】51. 直方图处理之直方图反向追踪&#xff08;cv2.calcBackProject&#xff09; 图像直方图是反映图像像素分布的统计表。 灰度直方图是图像灰度级的函数&#xff0c;用来描述每个灰度级在图像矩阵中的像素个数。…

【转需】【金融干货】四步教你:开发风控模型?

一、市场调研 目前市面主流的风控模型 1、互联网金融前10名排行榜(数据截止日期2017-09-12) 互联网金融公司排名分别是蚂蚁金服、陆金所、京东金融、苏宁金融、百度金融、腾讯理财通、宜信、钱大掌柜、万达金融和网易理财。 1.1 蚂蚁金服 1.1.1 大数据技术对接第三方征信公司芝…

推箱子

推箱子小游戏原理的实现 功能分析&#xff1a; 1.找一张类似于箱子的图片自行设置图片的大小 2.设置控制箱子移动的四个方向的按钮 3.使用键盘控制图片上下左右的移动、 效果图演示 原始位置 点击键盘向右移动三次向下移动一次后的位置 看了上述过程是不是感觉很有意思呀&…

我的Go+语言初体验——(5)Go+ 基本语法之 Switch

我的Go语言初体验——&#xff08;5&#xff09;Go 基本语法之 Switch “我的Go语言初体验” | 征文活动进行中… Go 语言中提供多路分支条件语句 switch&#xff0c; 用于在不同条件下执行不同动作。 使用 if-else 嵌套结构也可以实现多路分支条件结构&#xff0c;但程序冗长…

java web 开发之写在前面(0)

java是sun公司&#xff08;现在属于Oracle公司&#xff09;推出的能够跨越多平台的、可以执行最高的一种面向对象的编程语言&#xff0c;也是目前最先进、特征最丰富、功能最强大的计算机语言。利用java可以编写桌面应用程序&#xff0c;web应用程序、分布式系统、嵌入式系统程…

【OpenCV 例程200篇】52. 图像的相关与卷积运算

【OpenCV 例程200篇】52. 图像的相关与卷积运算 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 滤波通常是指对图像中特定频率的分量进行过滤或抑制。图像滤波是在尽可能保留图像细节特征的条件…

java web 之 网页前端开发基础(1)

1.HTML&#xff08;Hypertext Markup Language&#xff0c;HTML&#xff0c;超文本标记语言&#xff09; 1.1 创建第一个HTML文件 编写html语言可以通过两种方式&#xff0c;一种是手工编写html代码&#xff0c;一种是借助一些开发软件&#xff0c;如Dreamweaver或者微软公司…

文本框为空按钮不可点击

在form表单的提交中判断输入框的内容是否为空&#xff0c;如果输入框的内容为空则按钮不可点击&#xff0c;只有当输入框的内容不为空时才能点击并执行之后的提交等操作。 效果图演示 输入框为空&#xff08;按钮不可点击&#xff0c;点击无效果&#xff09; 输入框不为空时…

【youcans 的 OpenCV 学习课】7. 空间域图像滤波

专栏地址&#xff1a;『youcans 的图像处理学习课』 文章目录&#xff1a;『youcans 的图像处理学习课 - 总目录』 【youcans 的 OpenCV 学习课】7. 空间域图像滤波 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像预处理操作。 …

java web开发之上机指导(2)

创建一个用户注册的页面&#xff0c;让用户输入姓名、密码、电话和邮箱&#xff0c;使用javascript脚本完成密码校验、电话号码校验、邮箱校验和空格内容校验。 开发步骤如下。 &#xff08;1&#xff09;创建一个项目名为CheckInfomation&#xff0c;在WebContent文件夹下创…

小程序开发之基础知识(0)

前言&#xff1a;2016年9月21日,微信小程序正式开启内测。 2017年1月9日0点,万众瞩目的微信第一批小程序正式上线,用户可以体验到各种各样小程序提供的服务。 人类发展史大抵经历了石器时代&#xff0c;青铜器与铁器时代、工业与科技时代&#xff08;从第一次工业革命算起&…

鼠标悬浮改变背景颜色

将鼠标放在div上时div的背景颜色发生改变&#xff0c;把鼠标移走div之后&#xff0c;div的背景颜色回复原来的颜色。 效果图演示 没有将鼠标放在div上时&#xff08;lanse&#xff09; 将鼠标放在div上之后&#xff08;变为红色&#xff09; 下面看代码 由于代码较短&…

我的Go+语言初体验——(6)整型有理数数据类型

我的Go语言初体验——&#xff08;6&#xff09;整型有理数数据类型 “我的Go语言初体验” | 征文活动进行中… Go 语言使用后缀 ‘r’ 表示有理数&#xff0c;支持整型、分数型、浮点型三种有理数数据类型&#xff08;Rational number&#xff09;。 在整型有理数变量声明时&…

利用python进行数据分析之准备工作(1)

目录 一、简介 二、重要的python库 1.numpy库 2.pandas 3.matplotlib 4.IPython 5.Scipy 三、python环境安装和数据分析前的数据准备 一、简介 什么是数据&#xff1f;本栏目的数据主要指的是结构化的数据&#xff0c;通常我们使用数据这一说法来笼统地概括所有通用格式…

获取焦点改变输入框背景色

当输入框获取焦点时&#xff08;鼠标点到输入框时&#xff09;为红色&#xff0c;失去焦点时还原&#xff08;鼠标未点输入框内&#xff09;为白色。 效果图演示 没有获取焦点 获取焦点 代码演示 <!DOCTYPE html> <html><head lang"en"><…

【OpenCV 例程200篇】53. Scipy 实现图像二维卷积

【OpenCV 例程200篇】53. Scipy 实现图像二维卷积 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 滤波通常是指对图像中特定频率的分量进行过滤或抑制。图像滤波是在尽可能保留图像细节特征的条…

python基础课程1(看代码看注释)--基本操作和数据类型

python环境自行安装&#xff0c;建议安装3版本的环境。编辑器可以使用pycharm或者sublime&#xff0c;也可以在线上使用jupyterimport this #函数存在于模块中&#xff0c;我们需要先引用这个模块才能使用这个模块里的函数 print(hello,world)#单引号 print("hello,world&…

点击按钮切换图片

点击按钮时将当前显示的图片切换为指定要显示的图片 效果图演示 未点击更换图片之前显示的图片 点击更换图片之后 程序详解&#xff1a; 准备两张互相切换的图片给更换图片按钮添加点击事件把两张图片放在一个数组里点击按钮后执行判断如果是第一张图片就换成第二张&#…

【OpenCV 例程200篇】54. OpenCV 实现图像二维卷积

【OpenCV 例程200篇】54. OpenCV 实现图像二维卷积 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 滤波通常是指对图像中特定频率的分量进行过滤或抑制。图像滤波是在尽可能保留图像细节特征的…

python基础课程2(看代码看注释)--条件判断|循环|函数|生成器|类

##人生苦短&#xff0c;我用python ##课程内容 #条件判断 #循环 #类&#xff1a;简单介绍类的用法##条件判断 #if condiction:# dosomething #else: # dosomething total_cost 32.5 if total_cost>30:discount 0.9 elif total_cost>20:diacount 0.95 else :disco…