资讯专栏INFORMATION COLUMN

JavaScript 实现 iOS 下的计算器

Forest10 / 2446人阅读

摘要:最后一次更新于效果演示图计算器该项目可在浏览器页面上实现计算器。需要实现的功能是每当用户点击按钮,文本框要实时显示被更新的表达式。如果当前表达式无法被计算,被异常处理捕获并在文本框显示。

最后一次更新于2019/07/08

效果演示图

iOS 计算器

该项目可在浏览器页面上实现 iOS 计算器。

该项目可被分成三部分: HTMLCSSJavaScript。 具体实现方法会在下方详细展开。

HTML

首先,我们需要创建一个 HTML 文件来定义 iOS 计算器的布局。它只有一个文本框。 第一行的按钮均为特殊操作符按钮 (被标记为 btn orange_btn)。除此之外,最后一列的按钮表示常见操作符 (被标记为 gray_btn)。 剩下的按钮均为普通数字按钮 (被标记为 btn). 所有的按钮被包裹在 table 标签下。

具体代码如下:




    
    
    
     

    JavaScript Calculator


CSS

第二个任务是渲染 iOS 的布局。比如在我们的事例中,所有按钮的边缘都是圆角。除此之外,gray_btn 对应的按钮16进制的颜色表示是 #a6a6a6orange_btn 对应的按钮16进制的颜色表示是 #ff9705btn 对应的按钮16进制的颜色表示是 #333333

具体代码如下:

button,input,td,body{
    border: 0;
    margin: 0;
    padding: 0;
    outline:none; /* 移除用户点击时按钮边缘出现的蓝框 */
}

table{
    display: block;
    position:absolute;
    width: 400px;
    height: 620px;
    top:50%;
    left:50%;
    margin-top: -310px;
    margin-left: -200px;
    border-spacing: 0px;
    background-color: black;
}

td{
    width: 100px;
    height: 100px;
    text-align:center;
}
.output_txt {
    width: 340px;
    height: 100px;
    border:0px;
    color: white;
    font-size: 70px;
    text-align: right;
    margin-left: 0px;
    background-color: black;
}
.btn{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    font-size:40px;
    color:#ffffff;
    background-color: #333333;
}

.btn_long{
    width: 180px;
    height: 80px;
    border-radius: 50px;
}

.orange_btn{
    background-color: #ff9705;
}

.gray_btn{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    font-size:40px;
    color: black;
    background-color: #a6a6a6;
}
JavaScript

我提供了两种用 JavaScript 实现的计算方法(只是形式上不同,本质还是一致的)。在 JavaScript 中,它有现成的内置函数 eval() 用于计算表达式的结果,这样就不需要我们自己去写相对应的算法啦。需要实现的功能是每当用户点击按钮,文本框要实时显示被更新的表达式。如果表达式有错误(不是算术表达式),那么就需要立刻在文本框提示用户当前表达式是"Error"。

简单的 Javascript 写法的代码如下:

/**
 * 最基本的 Javascript 写法。
 * @author Hephaest
 * @version 2018/10/20
 */

/**
 * 以防输入错误。
 * @param text 用户输入的文本。
 * @returns {*} 检查结果。
 */
function handle_undefined(text){
    var check = (parseInt(text)) * 0.01;
    text = toString(check)!== "object undefined"? check : "Error";
    return text;
}

/**
 * 以防用户输入的表达式会引起异常。
 * @param text 即将被计算的表达式文本。
 * @returns {any} 计算结果或"Error"。
 */
function calculator(text){
    var output;
    try{
        // 如果当前表达式能被 eval() 计算,说明表达式无误,否则进入异常处理。
        output = eval(text);
    } catch(e){
        output= "Error";
    }
    return output;
}

/**
 * 遍历所有的按钮并实时更新文本框的表达式。
 */
window.onload = function () {
    let button = document.getElementsByClassName("btn");
    let expression = document.getElementsByClassName("output_txt")[0];
    let special_op = document.getElementsByClassName("gray_btn");
    let record = false;
    for (let i = 0; i < special_op.length; i++) {
        special_op[i].onclick = function () {
            if (this.value === "AC") expression.value = "0";
            else if (this.value === "+/-") expression.value = parseInt(expression.value)* (-1);
            else expression.value = handle_undefined(expression.value);
            }
    }

    for (let i = 0; i < button.length; i++) {
        button[i].onclick = function () {
            if (this.value === "."){
                if (expression.value.indexOf(".") === -1) expression.value += this.value;
            } else if (this.value === "÷" || this.value === "×"){
                if(this.value === "÷") expression.value += "/";
                else expression.value += "*";
            } else if(this.value === "="){
                expression.value = calculator(expression.value);
                record = true;
            } else {
                if(expression.value === "0" || record === true){
                    expression.value = this.value;
                    record = false;
                } else{
                    expression.value += this.value;
                }
            }
        }
    }
}

JQuery 写法的代码如下:

/**
 * 只使用 JQuery 的写法。
 * @author Hephaest
 * @version 2018/10/20
 */

/**
 * 确认将被计算或显示的表达式是否有误。
 * @type {{handle_undefined: (function(*=): *), calculator: (function(*=): any)}}
 */
$.func={
    // 如果用户输入有误,在文本框显示"Error"。
    handle_undefined: function (text) {
        var check = (parseInt(text)) * 0.01;
        text = (toString(check)!= "object undefined")? check : "Error";
        return text;
    },

    // 如果当前表达式无法被计算,被异常处理捕获并在文本框显示"Error"。
    calculator: function (text) {
        var output;
        try{
            output = eval(text);
        } catch(e){
            output= "Error";
        }
        return output;
    }

}

/**
 * 捕获用户输入的字符并实时更新文本框里显示的表达式。
 */
$(document).ready(function () {
    var button = $(".btn");
    var expression = $(".output_txt")[0];
    var special_op = $(".gray_btn");
    var record = false;

    // 判断是否是特殊操作符。
    special_op.bind("click",function () {
        if (this.value === "AC") {
            expression.value = "0";
        }
        else if (this.value === "+/-") {
            expression.value = parseInt(expression.value)* (-1);
        }
        else {
            expression.value = $.func.handle_undefined(expression.value);

        }
    })

    // 连接操作符和数字形成表达式。
    button.bind("click", function () {
        if (this.value === "."){
            if (expression.value.indexOf(".") === -1) expression.value += this.value;
        } else if (this.value === "÷" || this.value === "×"){
            if(this.value === "÷") expression.value += "/";
            else expression.value += "*";
        } else if(this.value === "="){
            expression.value = $.func.calculator(expression.value);
            record=true;
        } else {
            if(expression.value === "0" || record === true){
                expression.value = this.value;
                record = false;
            } else{
                expression.value += this.value;
            }
        }
    })

})
源码

如果我的文章可以帮到您,劳烦您点进源码点个 ★ Star 哦!
https://github.com/Hephaest/i...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114917.html

相关文章

  • JavaScript 实现 iOS 下的算器

    摘要:最后一次更新于效果演示图计算器该项目可在浏览器页面上实现计算器。需要实现的功能是每当用户点击按钮,文本框要实时显示被更新的表达式。如果当前表达式无法被计算,被异常处理捕获并在文本框显示。 最后一次更新于2019/07/08 效果演示图 showImg(https://segmentfault.com/img/bVbuLX9?w=691&h=1073); iOS 计算器 该项目可在浏览器...

    shengguo 评论0 收藏0
  • JavaScript 实现 iOS 下的算器

    摘要:最后一次更新于效果演示图计算器该项目可在浏览器页面上实现计算器。需要实现的功能是每当用户点击按钮,文本框要实时显示被更新的表达式。如果当前表达式无法被计算,被异常处理捕获并在文本框显示。 最后一次更新于2019/07/08 效果演示图 showImg(https://segmentfault.com/img/bVbuLX9?w=691&h=1073); iOS 计算器 该项目可在浏览器...

    elisa.yang 评论0 收藏0
  • 跨平台技术演进

    摘要:接下来,我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年,年,各大厂商快速跟进,已经有了很大的影响力。下面,我们以微信小程序为例,分析小程序的技术架构。 前言 大家好,我是simbawu ,@BooheeFE Team Leader,关于这篇文章,有问题欢迎来这里讨论。 随着移动互联网的普及和快速发展,手机成了互联网行业最大的流量分发入口。以及随着5G...

    魏宪会 评论0 收藏0
  • 跨平台技术演进

    摘要:接下来,我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年,年,各大厂商快速跟进,已经有了很大的影响力。下面,我们以微信小程序为例,分析小程序的技术架构。 前言 大家好,我是simbawu ,@BooheeFE Team Leader,关于这篇文章,有问题欢迎来这里讨论。 随着移动互联网的普及和快速发展,手机成了互联网行业最大的流量分发入口。以及随着5G...

    MasonEast 评论0 收藏0
  • 跨平台技术演进

    摘要:接下来,我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年,年,各大厂商快速跟进,已经有了很大的影响力。下面,我们以微信小程序为例,分析小程序的技术架构。 前言 大家好,我是simbawu ,@BooheeFE Team Leader,关于这篇文章,有问题欢迎来这里讨论。 随着移动互联网的普及和快速发展,手机成了互联网行业最大的流量分发入口。以及随着5G...

    fasss 评论0 收藏0

发表评论

0条评论

Forest10

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<