构建一个计算器: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>

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

查看所有标签

猜你喜欢:

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

程序员修炼之道(影印版)

程序员修炼之道(影印版)

Andrew Hunt、David Thomas / 中国电力出版社 / 2003-8-1 / 39.00

本书直击编程陈地,穿过了软件开发中日益增长的规范和技术藩篱,对核心过程进行了审视——即根据需求,创建用户乐于接受的、可工作和易维护的代码。本书包含的内容从个人责任到职业发展,直至保持代码灵活和易于改编重用的架构技术。从本书中将学到防止软件变质、消除复制知识的陷阱、编写灵活、动态和易适应的代码、避免出现相同的设计、用契约、断言和异常对代码进行防护等内容。一起来看看 《程序员修炼之道(影印版)》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具