构建一个计算器:UI界面设计

栏目: Html · 发布时间: 6年前

内容简介:从这篇文章开始,将会花几篇文章的篇幅来介绍如何构建一个在线的计算器,将前面学习的一些知识串在一起,通过实战加强对理论知识的理解。实现计算器主要分为两个部分,一个是构建计算器的UI,另一个通过JavaScript实现计算器的功能。在完成这两个部分内容的学习,建议您需要对下面的几个知识点有所了解:这两个部分可以帮助你快速完成计算器的UI效果。这篇文章的目的是通过构建一个简单的计算器来帮助大家如何把学到的知识点串起来,能学习致用。

从这篇文章开始,将会花几篇文章的篇幅来介绍如何构建一个在线的计算器,将前面学习的一些知识串在一起,通过实战加强对理论知识的理解。实现计算器主要分为两个部分,一个是构建计算器的UI,另一个通过JavaScript实现计算器的功能。在完成这两个部分内容的学习,建议您需要对下面的几个知识点有所了解:

这两个部分可以帮助你快速完成计算器的UI效果。

这篇文章的目的是通过构建一个简单的计算器来帮助大家如何把学到的知识点串起来,能学习致用。

构建计算器的UI

在这一节中主要向大家演示如何使用CSS网格和渐变这样的属性构建一个简单的计算器UI,其中网格主要用来实现计算器的布局,然后使用渐变来构建计算器每个按键的效果。在开始阅读下面的内容之前,你最好对网格和渐变有一定的了解,因为我们在接下来的内容并不会花时间来阐述网格和渐变。只会借助这两个CSS属性来帮助大家构建计算器UI。

注意,整个制作计算器用到的实例,都将在CodePen上完成。

构建一个计算器:UI界面设计

上图是Mac电脑上的一个计算器,我们来做一个类似的,只不过功能可能会更为简单一点。而我们要实现的计算器UI像下面这样:

HTML结构

整个计算器我们分为三个部分,左上角控制窗口的按钮 calculator-bar 、计算器计算值显示区域 calculator-display 和计算器按键 calculator-keys

构建一个计算器:UI界面设计

首先我们需要一个实现计算器的HTML结构:

<div class="calculator">
    <div class="calculator-bar">
        <div class="close"></div>
        <div class="minimize"></div>
        <div class="maximize"></div>
    </div>

    <div class="calculator-display"></div>

    <div class="calculator-keys">
        <button type="button" class="operator" value="+">+</button>
        <button type="button" class="operator" value="-">-</button>
        <button type="button" class="operator" value="*">×</button>
        <button type="button" class="operator" value="/">÷</button>

        <button type="button" value="7">7</button>
        <button type="button" value="8">8</button>
        <button type="button" value="9">9</button>

        <button type="button" value="4">4</button>
        <button type="button" value="5">5</button>
        <button type="button" value="6">6</button>

        <button type="button" value="1">1</button>
        <button type="button" value="2">2</button>
        <button type="button" value="3">3</button>

        <button type="button" value="0">0</button>
        <button type="button" class="decimal" value=".">.</button>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法V

算法V

塞奇威克 (Robert Sedgewick) / 中国电力出版社 / 2003-12 / 54.0

Robert Sedgewick再次给我们提供了重要的流行算法的全面介绍。这次的重点是图形算法,图形算法在很多应用中已日益重要,诸如网络连接、电路设计、调度、事务处理以及资源分配。本书中,Sedgewick同样用简洁的实现将理论和实践成功地结合了起来,这些实现均可在真实应用上测试,这也正是他的著作多年来倍受程序员欢迎的原因。   本书是Sedgewick彻底修订和重写的丛书中的第二本。第一本......一起来看看 《算法V》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码