手把手教你制作简易计算器

7ff75399e853db52cbc30fd1bf07a1f6_%E6%84%9F%E8%B0%A2%E8%AF%BB%E8%80%85.png

实现过程:
HTML+Css+JS
具体通过标签实现计算器整个的框架
通过Css样式实现计算器页面布局及框架优化
通过JavaScript+算法实现计算器计算过程

次实验过程:
背景图片+背景音乐(看个人意愿加!)

安排:

<!--HTML源码页-->
<head><link rel="icon" href="猫.png"><title>简易计算器</title>
</head>
<body background="5-121106095005.gif"</body>
<h2><p align="center">此工具由白猫制作完成!</p></h2>
<link href="计算器.css" rel="stylesheet" type="text/css" />
<script src="计算器.js"></script>
<table id="calculater" onClick="calculater()"><tr><td id="display" colspan="5">0</td></tr><tr><td class="numberkey" >1</td><td class="numberkey" >2</td><td class="numberkey" >3</td><td class="numberkey" >+</td><td class="numberkey" id="deletesign"><a href="计算器.htm" class="item">归零</a></td></tr><tr><td class="numberkey" >4</td><td class="numberkey" >5</td><td class="numberkey" >6</td><td class="numberkey" >-</td><td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td></tr><tr><td class="numberkey" >7</td><td class="numberkey" >8</td><td class="numberkey" >9</td><td class="numberkey" >*</td></tr><tr ><td class="numberkey" >+/-</td><td class="numberkey" >0</td><td class="numberkey" >.</td><td class="numberkey" >/</td></tr><script>alert("手把手教你制作简易计算器!")</script>
/*CSS样式源码页*/
*{padding:0;margin:1px;}#calculater{margin: auto;margin-top: 30px;border: solid 6px #2371D3;border-spacing: 0px;}#display{width: 100%;height: 30px;border-bottom: solid 4px #2371D3;font-weight: bold;color: #193D83;font-family: 黑体;padding-left: 2px;}.numberkey{cursor: pointer;width: 40px;height: 30px;border: solid 1px #FFFFFF;background: #2371D3;color: #ffffff;text-align: center;font-weight: bold;font-family: 黑体;}#equality{cursor: pointer;width: 40px; height: 100%;background: #2371D3;border: solid 1px #FFFFFF;color: #ffffff;text-align: center;font-weight: bold;font-family: 黑体; }.numberkey:hover{background: #EA6F30; }#equality:hover{background: #EA6F30; }
/*JS计算器算法源码页*/
var results="";var calresults="";function calculater(){if (event.srcElement.innerText=="=") {return;}results+=event.srcElement.innerText;display.innerText=results;}function resultscalcaulte(){calresults=eval(results);display.innerText=calresults;}

过程检验:
image.png

总体框架完美实现

image.png
image.png

算法逻辑检验正确

image.png

归零内部逻辑正确

检验成功!
简易计算器制作完成!!

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

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

相关文章

安装tron_具有Tron效果的JavaFX 2 Form

安装tron这是一个具有TRON效果的简单JavaFX登录表单。 在此示例中&#xff0c;我使用CSS设置TextField和Button的样式。 这是CSS和Effect代码的片段&#xff1a; .text-field{-fx-background-color: transparent;-fx-border-color: #00CCFF;-fx-text-fill: white; }.password-f…

在Spring 4.2中更简单地处理异步事务绑定事件

介绍 如您可能已经知道的&#xff08;例如&#xff0c;从我以前的博客文章中 &#xff09;&#xff0c;不再需要创建一个单独的类&#xff0c;该类使用onApplicationEvent方法实现ApplicationListener以便能够对应用程序事件做出响应&#xff08;包括来自Spring Framework本身和…

linux chattr 无权限,从零开始学习Linux(二十八):文件权限之chattr权限

1、chattr命令命令格式&#xff1a; chattr [-] [选项] 文件名或者目录名&#xff1b;参数说明&#xff1a;&#xff1a;增加权限&#xff1b;-&#xff1a;删除权限&#xff1b; 等于某权限&#xff1b;选项说明&#xff1a;i&#xff1a;如果对文件设置i属性&#xff0c;则不…

初等数论及其应用——中国剩余定理

在线性代数中&#xff0c;我们用高斯消元解决多元的线性方程组&#xff0c;而在数论中&#xff0c;面对一元变量的线性模方程组&#xff0c;我们利用中国剩余定理去求解x。 转载于:https://www.cnblogs.com/rhythmic/p/5928483.html

linux c 11 运行库,11.1.3 运行库与I/O

11.1.3 运行库与I/O在了解了glibc和MSVC的入口函数的基本思路之后&#xff0c;让我们来深入了解各个初始化部分的具体实现。但在具体了解初始化之前&#xff0c;我们要先了解一个重要的概念&#xff1a;I/O。IO(或I/O)的全称是Input/Output&#xff0c;即输入和输出。对于计算…

linux windows 丢失,Win10预览版9879硬盘丢失的Linux解决方案

IT之家讯 12月3日消息&#xff0c;最近IT之家论坛网友九仙仙总结了Win10预览版9879硬盘问题的解决方法&#xff0c;并在论坛中发布出来。经测试&#xff0c;此为快速有效的解决方法&#xff0c;故公之于众供朋友们参考。以下为作者原文。开头说明两点&#xff1a;1、这是我个人…

Android开发——Android系统启动以及APK安装、启动过程

0. 前言 从Android手机打开开关&#xff0c;到我们可以使用其中的app时&#xff0c;这个启动过程到底是怎么样的&#xff1f;1. 系统上电当给Android系统上电&#xff0c;在电源接通的瞬间&#xff0c;CPU内的寄存器和各引脚均会被置为初始状态&#xff0c;CPU复位之后&#…

linux生成文件清单,Linux 获取文件名称生成列表 txt - create_filelist

Linux 获取文件名称生成列表 txt - create_filelist1. find/home/strong/MOTChallenge/MOT16/MOT16/train/MOT16-04/img1/ 文件夹下所有 *.jpg (000001.jpg - 001050.jpg) 的路径 图片名信息写入 txt 文件。1.1 llstrongforeverstrong:~/MOTChallenge/MOT16/MOT16/train/MOT16…

jvm线程分析命令_JVM:如何分析线程转储

jvm线程分析命令本文将教您如何分析JVM线程转储&#xff0c;并查明问题的根本原因。 以我的观点&#xff0c;线程转储分析是掌握Java EE生产支持的任何个人最重要的技能。 您可以从线程转储快照中获取的信息量通常远远超出您的想象。 我的目标是与您分享我在过去10年中积累的有…

[na]华为acl(traffic-filter)和dhcp管理

这个是财务网络的一个问题, 要求财务的某台机器能访问其他部门区的打印机. 其他部门是不能访问到财务网络的. 华为alc配置实例:-traffic-filter # 在VLAN100上配置基于ACL的报文过滤&#xff0c;允许源IP地址为192.168.0.2/32的报文通过&#xff0c;丢弃其他报文。 <HUAWEI&…

在linux中dns不安装coching,ubuntu 8.04下openldap的安装和使用

ubuntu 8.04上openldap的安装和使用1、安装openldap。$ sudo apt-get install slapd ldap-utils2、配置openldap。$ sudo /etc/ldap/slapd.conf需要修改的有以下4处。# The base of your directory in database #1# 域名前缀suffix "dcpeercoaching,dccn"# …

信息系统开发内容

1.按照用于质量管理的能力成熟度模型&#xff08;CMM&#xff09;描述系统开发过程的动机。 2.区分系统生命周期和系统开发方法 3.描述系统开发的10个基本原理 4.定义问题、机会和指示——系统开发项目的能力 5.描述用于把问题、机会和指示进行分类的PIECES框架 6.描述系统开发…

Linux怎么更改声音板卡顺序,51CTO博客-专业IT技术博客创作平台-技术成就梦想

SUN M8000主机 IOU板卡硬件更换一、故障现象1.日志分析XSCF> showstatus*IOU#0 Status:Degraded;XSCF> showlogs -v errorDate: May 24 20:44:22 CST 2019 Code: 80002000-33010000-0167058a00000000Status: Alarm Occurred: May 24 20:44:20.367 C…

设计模式的Java 8 Lambda表达式–命令设计模式

在本博客中&#xff0c;我将说明如何使用Java 8 Lambda表达式以函数式编程方式实现命令模式 。 命令模式的目的是将请求封装为对象&#xff0c;从而为具有不同请求&#xff0c;队列或日志请求的客户端参数化&#xff0c;并支持相应的操作。 命令模式是一种编写通用代码的方法&a…

凝思linux系统显卡设置,TaiShan服务器安装凝思操作系统Linx6.0.90并设置独立显卡WX2100输出...

TaiShan服务器安装凝思操作系统Linx6.0.90并设置独立显卡WX2100输出环境准备&#xff1a;TaiShan 2280服务器&#xff0c;凝思操作系统Linx6.0.90 arm64&#xff0c;WX2100显卡&#xff0c;WX2100显卡固件和驱动安装包第1步&#xff0c;上电服务器&#xff0c;登录BMC输入用户名…

JMeter3.0_插件管理

JMeter Plugins 一直以来&#xff0c;JMeter Plugins为我们提供了很多高价值的JMeter插件&#xff0c;比如: 用于服务器性能监视的PerfMon Metrics Collector用于建立压力变化模型的Stepping Thread Group用于Json解析的JSON Path Extractor用于展示响应时间曲线的Response Tim…

JavaWeb总结(四)

使用Servlet发送服务器端响应信息 Servlet API中定义一个专门的接口类javax.servlet.http.HttpServletResponse用于创建HTTP响应&#xff0c;包括HTTP协议的状态行、响应头以及消息体&#xff1b; HTTP响应示例 设置响应状态行 - 状态行分为HTTP协议、状态码和状态描述三个部分…

java ee开发环境_设置Java EE 6开发环境

java ee开发环境本教程简要说明了如何设置典型的环境来开发基于Java EE 6的应用程序。 除了可以正常工作的Windows XP客户端具有足够的CPU能力和内存外&#xff0c;本教程没有其他先决条件。 在教程中&#xff0c;我们将需要安装以下组件&#xff1a; Java 6 JDK更新26 适用于…

c语言程序运行结果怎么看,帮忙看看我这个C语言程序有什么错误,运行结果不正确...

C语言的最大特点是&#xff1a;功能强、使用方便灵活。C编译的程序对语法检查并不象其它高级语言那么严格&#xff0c;这就给编程人员留下“灵活的余地”&#xff0c;但还是由于这个灵活给程序的调试带来了许多不便&#xff0c;尤其对初学C语言的人来说&#xff0c;经常会出一些…

Java内存体系结构(模型),垃圾回收和内存泄漏

Java内存架构&#xff08;Java内存模型&#xff09; 上面是堆的Java内存模型以及Java虚拟机&#xff08;JVM&#xff09;中运行的任何Java应用程序的PermGen。 还提供了比率&#xff0c;以使您更好地了解如何在每种世代类型之间分配允许的内存。 以上所有内容完全适用于Java 1…