文档章节

简易网页计算器

Lee12
 Lee12
发布于 2017/08/05 13:35
字数 314
阅读 1
收藏 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
粉丝 5
博文 12
码字总数 11258
作品 0
昆明
前端工程师
私信 提问
使用Ruby写的一个安卓语音计算器

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

chenzhongpu
2016/07/22
121
0
JS制作一个简易计算器

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

雨醉风尘
2015/09/02
2.1K
0
简易计算器

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

红薯
2013/08/06
1K
0
从编程小白到全栈开发:寻找代码中的问题

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

一斤代码
01/11
0
0
java学习的第一个成果 一 简易的计算器

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

zcs_001
2017/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在10分钟内设置EOS钱包和帐户?

由于SuperNode超级节点社区建立在EOS之上,我们希望引导我们的社区成员设置EOS钱包和帐户,以便充分参与我们的生态系统。 虽然设置过程可能不如其他区块链系统那么简单,但不要担心。本指南旨...

笔阁
14分钟前
1
0
8.04-Win10非U盘重装系统

注意:最好准备一个你所需版本的秘钥(不能是数字0开头的) 【所需:Win10的ISO镜像、能够解压ISO格式的解压缩工具、最好准备你所需版本的秘钥(不能是数字0开头的)】 1、创建新的文件系统为...

静以修身2025
15分钟前
0
0
Docker的架构与自制镜像的发布

一. docker 是什么 大家都知道虚拟机吧,windows 上装个 linux 虚拟机是大部分程序员的常用方案。公司生产环境大多也是虚拟机,虚拟机将物理硬件资源虚拟化,按需分配和使用,虚拟机使用起来...

程序猿拿Q
31分钟前
8
0
ubuntu下pycharm调用Hanlp实践分享

前几天看了大快的举办的大数据论坛峰会的现场直播,惊喜的是hanlp2.0版本发布。Hanlp2.0版本将会支持任意多的语种,感觉还是挺好的!不过更多关于hanlp2.0的信息,可能还需要过一段时间才能看...

左手的倒影
40分钟前
2
0
Python监控服务器实现邮件微信报警[未测试]

本文中笔者暂时实现的只有cpu和内存的监控,python可以监控许多的主机信息,网络,硬盘,机器状态等,以下是代码的实现,代码可以实现windows和linux的监控。 实验环境:Ubuntu16.04和windo...

dragon_tech
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部