文档章节

简易网页计算器

Lee12
 Lee12
发布于 2017/08/05 13:35
字数 314
阅读 0
收藏 0
点赞 0
评论 0

简易网页计算器,实现简单的"+-*/"的计算结果,写的比较繁琐,不喜勿喷

最终效果

css 样式

* {
                margin: 0;
                padding: 0;
            }
            
            .container {
                width: 500px;
                margin: 0 auto;
                border: 1px solid #000;
                font-size: 32px;
                background-color: black;
            }
            
            input {
                display: inline-block;
                width: 99%;
                height: 80px;
                margin: 3px auto;
            }

内容部分

<div class="container">
            <table width="100%" style="text-align: center;">
                <tr>
                    <td colspan="3"><input type="text" id="screen" value="0" disabled="disabled" style="text-align: right;"></td>
                    <td><input type="button" value="清除" id="clear"></td>
                </tr>
                <script type="text/javascript">
                    var btnStr = ["789+", "456-", "123*", "0.=/"],
                        point = 0;
                    var html = "";
                    for (var i = 0; i < btnStr.length; i++) {
                    console.log(btnStr[i]);
                        html += "<tr>"
                        for (var j = 0; j < btnStr[i].length; j++) {
                            html += "<td><input  class=btn type='button' value='";
                            html += btnStr[i][j];
                            html += "'/></td>";
                        }
                        html += "</tr>";
                    }
                    document.write(html);
                </script>
            </table>
        </div>
        <script type="text/javascript">
            var screen = document.getElementById("screen");
            var isNew = true;
            var result = 0; /*计算结果*/
            var preOperator = "+"; /*前一次点击的运算符*/
            document.body.onload = function() {
                var btns = document.getElementsByClassName("btn");
                for (var i in btns) {
                    btns[i].onclick = function(e) {
                        if ("0123456789.".indexOf(this.value) >= 0) {//输入数字
                            if (isNew == true) {
                                if(preOperator=="="){
                                    result=0;
                                    preOperator="+";
                                }
                                if (screen.value == "0" && this.value == "0") return;
                                if (this.value == ".")
                                    screen.value = "0" + this.value;
                                else
                                    screen.value = this.value;
                                    isNew = false;
                                if (screen.value != 0)
                                    isNew = false;
                            } else {
                                if (screen.value.indexOf(".") >= 0 && this.value == ".")
                                    return;
                                screen.value += this.value;
                            }
                        } else { /*运算符*/
                            if (isNew == true) { //连续点击运算符
                                preOperator = this.value;
                                return;
                            }
                            isNew = true;
                            switch (preOperator) {
                                case "+":
                                    result += screen.value - 0;
                                    break;
                                case "-":
                                    result -= screen.value;
                                    break;
                                case "*":
                                    result *= screen.value;
                                    break;
                                case "/":
                                    result /= screen.value;
                                    break;
                            }
                            screen.value = result;
                            preOperator = this.value;
                        }
                    }
                }
            }
            var clear = document.getElementById("clear");
            clear.onclick = function(e) {
                screen.value = "0";
                isNew = true;
                result = "0";
                preOperator = "=";
            }
        </script>

© 著作权归作者所有

共有 人打赏支持
Lee12
粉丝 4
博文 12
码字总数 11258
作品 0
昆明
前端工程师
使用Ruby写的一个安卓语音计算器

RubyMotion使得能使用Ruby来写跨平台应用。 这里使用RubyMotion开发了一个简易的安卓语音计算器,https://github.com/ChenZhongPu/VoiceCalculator,UI界面和锤子计算器很像。...

chenzhongpu ⋅ 2016/07/22 ⋅ 0

Java仿windows自带的计算器-课程设计

一段尘封已久的代码,当年的课程设计。《java程序设计》课程设计报告 课题名称:GUI计算器设计 1. 课程设计题目 基于GUI的计算器设计 2. 课程设计目的 1. 巩固和加深课堂所学知识; 2. 将课本...

城邑耕夫 ⋅ 2012/04/14 ⋅ 1

JS制作一个简易计算器

//javascript简易计算器 <!DOCTYPE html><html> <head> <title> 事件</title> <script type="text/javascript"> function count(){ //获取第一个输入框的值 var node1=document.getElementB......

雨醉风尘 ⋅ 2015/09/02 ⋅ 0

从编程小白到全栈开发:寻找代码中的问题

很少有人能一下子就写出完全没有问题的代码。工作良好的程序,都是经过一遍遍的反复测试运行、发现问题、剔除问题(也就是我们所说的找Bug和修Bug)过后的产物,经过了这一过程,程序才能最终...

一斤代码 ⋅ 01/11 ⋅ 0

简易计算器

实现可连续运算的简易计算器。 E.g.,3 4=display 7=display 11=display 15..... [Code4App.com]

红薯 ⋅ 2013/08/06 ⋅ 0

很着急,下午要交作业了,

要求做题个简易计算器,编好后运行起来就一个框框,点击没反应,求大大们帮我看看button1到18分别是1,2,3,4,5,6,7,8,9,0,.,=,+,-,*。/,作者 using System;using System.Collec...

小白兔 ⋅ 2010/12/28 ⋅ 10

java学习的第一个成果 一 简易的计算器

首先 说一下我编写简易计算器用到的相关技术(狗屁技术,就这个你自己也好意思叫技术,但是还是要说的,给自己以后回头来看)。 1.swing;用swing来编写一个窗口 ,然后创 建一个内容,这个是...

zcs_001 ⋅ 2017/11/29 ⋅ 0

iScala的快捷方式

iScala常用的快捷方式: F1 :提供帮助 F4 :列出字段的可选清单,与?作用相同 F5 :简易帮助(相当有用) F7 :小型计算器,在确认后其值可以自动填入字段,这样算折扣的人可以轻松些 其它...

砖头 ⋅ 2010/06/02 ⋅ 0

:开源社区是个好地方:第一个android小程序【简易计算器】

大家好,我是一名新加入开源中国社区的小鸟,在oschina打酱油好久了,突然觉得自己得尝试着写点东西,下面是我做的一个【 简易的android计算器】 程序,程序基本可以实现带括号的数据简单的加...

梁阳波 ⋅ 2013/03/24 ⋅ 6

热爱移动互联网信息安全应该学习哪些知识

接触过的语言有:J(APL方言) Python C# Scheme(LISP方言) 基本上都是只写过 hello world! 以及当简易版的计算器使用 在移动互联网的快速发展的时代 移动设备从手机到智能手环等 的信息安...

AustinCody ⋅ 2014/08/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 13分钟前 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 29分钟前 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 37分钟前 ⋅ 0

vim编辑模式、vim命令模式、vim实践

vim编辑模式 编辑模式用来输入或修改文本内容,编辑模式除了Esc外其他键几乎都是输入 如何进入编辑模式 一般模式输入以下按键,均可进入编辑模式,左下角提示 insert(中文为插入) 字样 i ...

蛋黄Yolks ⋅ 41分钟前 ⋅ 0

大数据入门基础:SSH介绍

什么是ssh 简单说,SSH是一种网络协议,用于计算机之间的加密登录。 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码...

董黎明 ⋅ 今天 ⋅ 0

web3j教程

web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 汇智网最新发布的web3j教程,详细讲解...

汇智网教程 ⋅ 今天 ⋅ 0

谷歌:安全问题机制并不如你想象中安全

腾讯科技讯 5月25日,如今的你或许已经对许多网站所使用的“安全问题机制”习以为常了,但你真的认为包括“你第一个宠物的名字是什么?”这些问题能够保障你的帐户安全吗? 根据谷歌(微博)安...

问题终结者 ⋅ 今天 ⋅ 0

聊聊spring cloud gateway的RedisRateLimiter

序 本文主要研究下spring cloud gateway的RedisRateLimiter GatewayRedisAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/gateway/con......

go4it ⋅ 今天 ⋅ 0

169. Majority Element - LeetCode

Question 169. Majority Element Solution 思路:构造一个map存储每个数字出现的次数,然后遍历map返回出现次数大于数组一半的数字. 还有一种思路是:对这个数组排序,次数超过n/2的元素必然在中...

yysue ⋅ 今天 ⋅ 0

NFS

14.1 NFS介绍 NFS是Network File System的缩写 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导开发,最新为4.1版本 NFS数据传输基于RPC协议,RPC...

派派菠菜 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部