用grid布局来实现一个简单新拟态计算器

2023-11-03 05:30

本文主要是介绍用grid布局来实现一个简单新拟态计算器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

基于vue+网格grid布局的calculator

使用的编辑器codepen 是一个浏览器在线编辑器,有兴趣的小伙伴,网上可自行了解,😉

首先看完成后的效果,也可点击这里尝试一下demo演示
在这里插入图片描述
看这篇文章的小伙伴,跟着文章弄,就可以完成一个新拟态计算器啦

文章分三步,跟我一起吧🍀

1、页面布局 HTML部分

首先我们先把主要的页面布局写好
我们需要19个按钮

    <button >AC</button><button >±</button><button >%</button><button >+</button><button >-</button><button >×</button><button >÷</button><button >=</button><button >1</button><button >2</button><button >3</button><button >4</button><button >5</button><button >6</button><button >7</button><button >8</button><button >9</button><button >0</button><button >.</button>

当然我们还需要一个结果区,用来展示输入的数字和计算后的结果

<div class="result">0
</div>

初始化为‘0’,是因为后面写逻辑代码需要

看页面
在这里插入图片描述

看基本的样式已经完成啦,接下来我们要来写css部分,再写这部分之前,我们先给html元素button便签加上style,等下使用grid布局。🌺

<div class="calculator"><div class="result" style="grid-area: result">{{ equation }}</div><button style="grid-area: ac" >AC</button><button style="grid-area: plus-minus" >±</button><button style="grid-area: percent" >%</button><button style="grid-area: add" >+</button><button style="grid-area: subtract" >-</button><button style="grid-area: multiply" >×</button><button style="grid-area: divide" >÷</button><button style="grid-area: equal">=</button><button style="grid-area: number-1" >1</button><button style="grid-area: number-2" >2</button><button style="grid-area: number-3" >3</button><button style="grid-area: number-4" >4</button><button style="grid-area: number-5" >5</button><button style="grid-area: number-6" >6</button><button style="grid-area: number-7" >7</button><button style="grid-area: number-8" >8</button><button style="grid-area: number-9" >9</button><button style="grid-area: number-0" >0</button><button style="grid-area: dot" >.</button></div>

2、页面样式 CSS部分

开始写样式了,该小demo是使用grid布局来实现的,所以让我们先来讲讲这个项目需要用到的grid布局属性🍃

目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。
基本概念

1.容器和项目🍆
采用网格布局的区域,称为“容器”。容器内部的采用网格定位的子元素称为“项目”

2 容器属性🥒
display属性

display:grid指定一个容器为网格布局

3 grid-template-columns和 grid-template-rows🥕

grid-template-columns:用来指定行的宽度
grid-template-rows:用来指定行的高度
.wrapper{width:450px;background: #e5e5e5;text-align:center;display: inline-grid;grid-template-columns: 150px 150px 150px;grid-template-rows: 150px 150px 150px}

上面这段代码指定的宽高各为150px

当然,出来能指定具体的数值之外,也可以使用百分比来表示

.wrapper {display: grid;grid-template-columns: 33.33% 33.33% 33.33%;grid-template-rows: 33.33% 33.33% 33.33%;
}

3.1 repeat
有时候,重复写同样的值非常麻烦,尤其网格很多时。这时,可以使用repeat()函数,简化重复的值。上面的代码用repeat()改写如下

.wrapper {display: grid;grid-template-columns: repeat(3, 33.33%);grid-template-rows: repeat(3, 33.33%);
}

repeat接受两个参数:第一个数重复的次数(上面的例子是重复3次),第二个是重复的值(上面例子是33.33%)

grid属性不只这些,但我们暂时需要的就是以上的,想要了解更多的,可以看看这篇文章 手把手教你grid布局🙎‍♂

好了,让我们开始写计算器的样式
1、计算器整体样式

.calculator {//设置小格子的宽高--button-width: 80px;--button-height: 80px;//设置网格布局display: grid;//设置网格具体的放置,和之前html设置的style="grid-area: "有关grid-template-areas: "result result result result""ac plus-minus percent divide""number-7 number-8 number-9 multiply""number-4 number-5 number-6 subtract""number-1 number-2 number-3 add""number-0 number-0 dot equal";//看文章3.1,有解释哦grid-template-columns: repeat(4, var(--button-width));grid-template-rows: repeat(6, var(--button-height));//实现拟态效果 box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1), 8px 8px 16px -10px rgba(0, 0, 0, .15);padding: 24px;border-radius: 20px;
}

2、按钮样式

.calculator button {margin: 8px;padding: 0;border: 0;display: block;outline: none;border-radius: calc(var(--button-height) / 2);font-size: 24px;font-family: Helvetica;font-weight: normal;color: #999;background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);//拟态实现box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .3);
}

3、点击后的按钮效果

这里只是加了inset

.calculator button:active {box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset, 4px 4px 10px -8px rgba(0, 0, 0, .3) inset;
}

4、最后是结果区

.result {text-align: right;line-height: var(--button-height);font-size: 48px;font-family: Helvetica;padding: 0 20px;color: #666;
}

3、逻辑书写 JS部分

首先我们需要设置一下vue的环境
在这里插入图片描述
点击setting
在这里插入图片描述
在搜索框里查找vue,选择保存就可以
之后我们在html文件body里面的元素外层包裹

<div id="app">代码。。
</div>

同时,我们先为html的button元素加上 @click事件

<button style="grid-area: ac" @click="clear">AC</button>
<button style="grid-area: plus-minus" @click="calculateToggle">±</button>
<button style="grid-area: percent" @click="calculatePercentage">%</button>
<button style="grid-area: add" @click="append('+')">+</button>
<button style="grid-area: subtract" @click="append('-')">-</button>
<button style="grid-area: multiply" @click="append('×')">×</button>
<button style="grid-area: divide" @click="append('÷')">÷</button>
<button style="grid-area: equal" @click="calculate">=</button><button style="grid-area: number-1" @click="append(1)">1</button>
<button style="grid-area: number-2" @click="append(2)">2</button>
<button style="grid-area: number-3" @click="append(3)">3</button>
<button style="grid-area: number-4" @click="append(4)">4</button>
<button style="grid-area: number-5" @click="append(5)">5</button>
<button style="grid-area: number-6" @click="append(6)">6</button>
<button style="grid-area: number-7" @click="append(7)">7</button>
<button style="grid-area: number-8" @click="append(8)">8</button>
<button style="grid-area: number-9" @click="append(9)">9</button>
<button style="grid-area: number-0" @click="append(0)">0</button><button style="grid-area: dot" @click="append('.')">.</button>

绑定的几个函数
isOperator()
append()
calculate()
calculateToggle()
calculatePercentage()
clear()

new Vue({el: '#app',data: {equation: '0',isDecimalAdded: false,isOperatorAdded: false,isStarted: false,},methods: {// Check if the character is + / - / × / ÷isOperator(character) {return ['+', '-', '×', '÷'].indexOf(character) > -1},// When pressed Operators or Numbersappend(character) {// Startif (this.equation === '0' && !this.isOperator(character)) {if (character === '.') {this.equation += '' + characterthis.isDecimalAdded = true} else {this.equation = '' + character}this.isStarted = truereturn}// If Numberif (!this.isOperator(character)) {if (character === '.' && this.isDecimalAdded) {return}if (character === '.') {this.isDecimalAdded = truethis.isOperatorAdded = true} else {this.isOperatorAdded = false}this.equation += '' + character}// Added Operatorif (this.isOperator(character) && !this.isOperatorAdded) {this.equation += '' + characterthis.isDecimalAdded = falsethis.isOperatorAdded = true}},// When pressed '='calculate() {let result = this.equation.replace(new RegExp('×', 'g'), '*').replace(new RegExp('÷', 'g'), '/')this.equation = parseFloat(eval(result).toFixed(9)).toString()this.isDecimalAdded = falsethis.isOperatorAdded = false},// When pressed '+/-'calculateToggle() {if (this.isOperatorAdded || !this.isStarted) {return}this.equation = this.equation + '* -1'this.calculate()},// When pressed '%'calculatePercentage() {if (this.isOperatorAdded || !this.isStarted) {return}this.equation = this.equation + '* 0.01'this.calculate()},// When pressed 'AC'clear() {this.equation = '0'this.isDecimalAdded = falsethis.isOperatorAdded = falsethis.isStarted = false}}
})

运行就可以实现啦
快来动手试试吧😺

这篇关于用grid布局来实现一个简单新拟态计算器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/335912

相关文章

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

最长公共子序列问题的深度分析与Java实现方式

《最长公共子序列问题的深度分析与Java实现方式》本文详细介绍了最长公共子序列(LCS)问题,包括其概念、暴力解法、动态规划解法,并提供了Java代码实现,暴力解法虽然简单,但在大数据处理中效率较低,... 目录最长公共子序列问题概述问题理解与示例分析暴力解法思路与示例代码动态规划解法DP 表的构建与意义动

java父子线程之间实现共享传递数据

《java父子线程之间实现共享传递数据》本文介绍了Java中父子线程间共享传递数据的几种方法,包括ThreadLocal变量、并发集合和内存队列或消息队列,并提醒注意并发安全问题... 目录通过 ThreadLocal 变量共享数据通过并发集合共享数据通过内存队列或消息队列共享数据注意并发安全问题总结在 J

SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤

《SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤》本文主要介绍了SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤,文中通过示例代码介绍的非常详... 目录 目标 步骤 1:确保 ProxySQL 和 mysql 主从同步已正确配置ProxySQL 的

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

nginx部署https网站的实现步骤(亲测)

《nginx部署https网站的实现步骤(亲测)》本文详细介绍了使用Nginx在保持与http服务兼容的情况下部署HTTPS,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值... 目录步骤 1:安装 Nginx步骤 2:获取 SSL 证书步骤 3:手动配置 Nginx步骤 4:测

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

Idea实现接口的方法上无法添加@Override注解的解决方案

《Idea实现接口的方法上无法添加@Override注解的解决方案》文章介绍了在IDEA中实现接口方法时无法添加@Override注解的问题及其解决方法,主要步骤包括更改项目结构中的Languagel... 目录Idea实现接China编程口的方法上无法添加@javascriptOverride注解错误原因解决方

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》:本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE

MySql死锁怎么排查的方法实现

《MySql死锁怎么排查的方法实现》本文主要介绍了MySql死锁怎么排查的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录前言一、死锁排查方法1. 查看死锁日志方法 1:启用死锁日志输出方法 2:检查 mysql 错误