正文

轻松上手，用EasyUI jQuery打造实用简单计算器教程

/0 浏览量
1018

在这个数字化时代，计算器是一个不可或缺的工具。而使用EasyUI jQuery来打造一个实用简单的计算器，不仅能够增强用户体验，还能展示前端技术的魅力。以下是一份详细的教程，帮助你轻松上手，打造一个属于自己的计算器。

准备工作

在开始之前，你需要以下准备工作：

  1. 安装EasyUI库：你可以从EasyUI的官方网站下载最新版本的EasyUI库，并将其包含到你的项目中。
  2. HTML结构：创建一个基本的HTML结构，用于承载计算器的界面。
  3. CSS样式：为你的计算器添加一些基础的CSS样式，使其看起来更加美观。

创建计算器界面

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <link rel="stylesheet" type="text/css" href="easyui.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="easyui.min.js"></script>
</head>
<body>
    <div id="calculator" class="easyui-panel" title="简易计算器" style="width:300px;height:400px;padding:10px;">
        <div id="display" class="easyui-textbox" style="width:100%;height:50px;"></div>
        <div style="margin-top:5px;">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear',plain:true">C</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-backspace',plain:true">←</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-divide',plain:true">/</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-multiply',plain:true">*</a>
        </div>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-minus',plain:true">-</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-plus',plain:true">+</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-equal',plain:true">=</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-point',plain:true">.</a>
        </div>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-zero',plain:true">0</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-one',plain:true">1</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-two',plain:true">2</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-three',plain:true">3</a>
        </div>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-four',plain:true">4</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-five',plain:true">5</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-six',plain:true">6</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-seven',plain:true">7</a>
        </div>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-eight',plain:true">8</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-nine',plain:true">9</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-equal',plain:true">=</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-point',plain:true">.</a>
        </div>
    </div>
</body>
</html>

CSS样式

#calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}

#display {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    font-size: 20px;
    margin-bottom: 5px;
}

.easyui-linkbutton {
    margin: 2px;
    padding: 5px 10px;
    font-size: 16px;
}

添加功能

JavaScript代码

$(function() {
    var currentInput = '';
    var operator = '';
    var firstNumber = 0;
    var secondNumber = 0;
    var result = 0;

    $('#calculator').find('.easyui-linkbutton').each(function() {
        $(this).click(function() {
            var value = $(this).text();
            switch (value) {
                case 'C':
                    currentInput = '';
                    break;
                case '←':
                    currentInput = currentInput.slice(0, -1);
                    break;
                case '+':
                case '-':
                case '*':
                case '/':
                    if (currentInput !== '') {
                        firstNumber = parseFloat(currentInput);
                        currentInput = '';
                        operator = value;
                    }
                    break;
                case '=':
                    if (currentInput !== '' && operator !== '') {
                        secondNumber = parseFloat(currentInput);
                        switch (operator) {
                            case '+':
                                result = firstNumber + secondNumber;
                                break;
                            case '-':
                                result = firstNumber - secondNumber;
                                break;
                            case '*':
                                result = firstNumber * secondNumber;
                                break;
                            case '/':
                                result = firstNumber / secondNumber;
                                break;
                        }
                        currentInput = result.toString();
                        operator = '';
                        firstNumber = 0;
                        secondNumber = 0;
                    }
                    break;
                default:
                    currentInput += value;
                    break;
            }
            $('#display').val(currentInput);
        });
    });
});

这段代码实现了计算器的基本功能，包括数字输入、基本运算和清除操作。

总结

通过以上步骤，你已经成功使用EasyUI jQuery创建了一个实用简单的计算器。这个过程不仅能够帮助你提升前端开发技能，还能让你更好地理解JavaScript和EasyUI框架。希望这份教程能对你有所帮助。

-- 展开阅读全文 --