当前位置: 首页 > news >正文

没用的计算器

本次的项目仍然属于没用的模块,仅供娱乐,最后附有效果视频,如需要源代码可以私信或评论,本次还是使用vue来实现的,同样也可以修改为JS

一、HTML部分

        <div class="con"><div class="calculator"><input type="text" v-model="firstContent"><select v-model="option"><option v-for="item in optionList" :key="item">{{ item }}</option></select><input type="text" v-model="secondContent">=<!--由于v-if和v-show的效果都会使元素不占位置因此使用三元表达式来解决此问题--><p :class="flag?'pClass':''">{{ countThing }}</p></div><button @click="count">开始计算</button></div>

二、CSS/LESS部分

// 按钮动画
@keyframes moving {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}.calculatorView {.con {width: 300px;height: 100px;margin: 100px auto;box-sizing: border-box;border: 2px solid black;border-radius: 10px;text-align: center;padding-top: 20px;}// 按钮部分button {margin-top: 10px;position: relative;cursor: pointer;background: transparent;height: 40px;width: 100px;border-radius: 10px;font-size: 18px;color: #f4c24c;border: 0;overflow: hidden;&::after,&::before {content: '';position: absolute;}&::after {border-radius: 10px;width: calc(100% - 2 * 2px);height: calc(100% - 2 * 2px);left: 2px;top: 2px;background-color: white;z-index: -1;}&::before {z-index: -2;animation: moving 1s linear infinite;transform-origin: left top;left: 50%;top: 50%;width: 200%;height: 200%;background-color: #68fd72;}}// 计算的东西.calculator {display: flex;justify-content: space-between;input, select {width: 40px;height: 20px;margin: 0 10px;}.pClass {opacity: 1;}p {opacity: 0;width: 80px;}}
}

三、JS部分

export default defineComponent({name: "calculatorView",data() {return {// p是否显示flag: false,// 下拉菜单数组optionList: ['+', '-', '*', '/', '%'],// 第一个输入框的内容firstContent: '',// 第二个输入框的内容secondContent: '',// 输入框内容option: '+',// 显示出来的东西countThing: ''}},methods: {count() {if (this.firstContent !== '' && this.secondContent !== '') {this.flag = truethis.countThing = this.firstContent + this.option + this.secondContent}}}
})

四、显示效果

没用的计算器

相关文章:

没用的计算器

本次的项目仍然属于没用的模块&#xff0c;仅供娱乐&#xff0c;最后附有效果视频&#xff0c;如需要源代码可以私信或评论&#xff0c;本次还是使用vue来实现的&#xff0c;同样也可以修改为JS 一、HTML部分 <div class"con"><div class"calculator&q…...

基于 Python 的大数据的电信反诈骗系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

二、ClickHouse简介

ClickHouse简介 前言一、行式存储二、DBMS功能三、多样化引擎四、高吞吐写入能力五、数据分区与线程级并行六、场景七、特定版本 前言 ClickHouse 是俄罗斯的 Yandex 于 2016 年开源的列式存储数据库&#xff08;DBMS&#xff09;&#xff0c;使用 C 语言编写&#xff0c;主要…...

C++ 11新特性之并发

概述 随着计算机硬件的发展&#xff0c;多核处理器已经成为主流&#xff0c;对程序并发执行能力的需求日益增长。C 11标准引入了一套全面且强大的并发编程支持库&#xff0c;为开发者提供了一个安全、高效地利用多核CPU资源进行并行计算的新框架&#xff0c;极大地简化了多线程…...

jvm问题自查思路

本文聊一下最近处理了一些jvm的问题上&#xff0c;将这个排查和学习过程分享一下&#xff0c;看了很多资料&#xff0c;最终都会落地到几个工具的使用&#xff0c;本文主要是从文档学习、工具学习和第三方技术验证来打开认知和实践&#xff0c;希望有用。 一、文档 不仅知道了…...

任意IOS16系统iPad/Iphone开启台前调度

方法来自GitHub: GitHub - khanhduytran0/TrollPad: Troll SpringBoard into thinking its running on iPadOS 注意操作前iPad/iPhone上需要安装巨魔手机助手和Filza&#xff0c;关于这两个软件的安装自行百度方法。 备注一个巨魔手机助手的下载地址 Release TrollStar 1.2…...

LeetCode、452. 用最少数量的箭引爆气球【中等,贪心,区间问题】

文章目录 前言LeetCode、452. 用最少数量的箭引爆气球【中等&#xff0c;贪心&#xff0c;区间问题】题目链接与分类思路贪心&#xff0c;连续区间数量问题 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客…...

洛谷C++简单题小练习day10—umi的函数

day10--umi的函数--2.13 习题概述 题目背景 umi 找到了一个神秘的函数 f。 题目描述 这个函数接受两个字符串 s1,s2。这些字符串只能由小写字母组成并且具有相同的长度。这个函数的输出是另一个长度与 s1,s2 相同的字符串 g。 g 的第 i 个字符等于 s1 的第 i 个字符和 s2…...

【Linux学习】线程互斥与同步

目录 二十.线程互斥 20.1 什么是线程互斥&#xff1f; 20.2 为什么需要线程互斥? 20.3 互斥锁mutex 20.4 互斥量的接口 20.4.1 互斥量初始 20.4.2 互斥量销毁 20.4.3 互斥量加锁 20.4.4 互斥量解锁 20.4.5 互斥量的基本原理 20.4.6 带上互斥锁后的抢票程序 20.5 死锁问题 死锁…...

前端开发:(三)CSS入门

1. 介绍CSS 1.1 什么是CSS CSS&#xff08;Cascading Style Sheets&#xff09;是一种用于描述文档样式和布局的样式表语言&#xff0c;用于美化和排版HTML和XML等标记语言的内容。 1.2 CSS的作用和优势 CSS的主要作用是控制网页的样式和布局&#xff0c;包括字体、颜色、间…...

一周学会Django5 Python Web开发-Django5创建项目(用PyCharm工具)

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计11条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…...

寒假学习记录13:JS对象

目录 对象转数组 对象双值转数组 Object.entries() &#xff08;转为二维数组&#xff09;&#xff08;属性的值和键&#xff09; 对象右值转数组 Object.values() &#xff08;属性的值&#xff09; 对象左值转数组 Object.keys() (属性的键) 对象左值转…...

学生成绩管理系统|基于Springboot的学生成绩管理系统设计与实现(源码+数据库+文档)

学生成绩管理系统目录 目录 基于Springboot的学生成绩管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能模块 2、学生功能模块 3、教师功能模块 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源…...

C#向数组指定索引位置插入新的元素值:自定义插入方法 vs List<T>.Add(T) 方法

目录 一、使用的方法 1.自定义插入方法 2.使用List.Add(T) 方法 二、实例 1.示例1&#xff1a;List.Add(T) 方法 2.示例&#xff1a;自定义插入方法 一、使用的方法 1.自定义插入方法 首先需要定义一个一维数组&#xff0c;然后修改数组的长度(这里使用Length属性获取…...

【大数据Hive】hive 表设计常用优化策略

目录 一、前言 二、hive 普通表查询原理 2.1 操作演示说明 2.1.1 创建一张表&#xff0c;并加载数据 2.1.2 统计3月24号的登录人数 2.1.3 查询原理过程总结 2.2 普通表结构带来的问题 三、hive分区表设计 3.1 区表结构 - 分区设计思想 3.2 操作演示 3.2.1 创建分区表…...

jvm垃圾收集器之七种武器

目录 1.回收算法 1.1 标记-清除算法(Mark-Sweep) 1.2 复制算法(Copying) 1.3 标记-整理算法(Mark-Compact) 2.HotSpot虚拟机的垃圾收集器 2.1 新生代的收集器 Serial 收集器&#xff08;复制算法&#xff09; ParNew 收集器 (复制算法) Parallel Scavenge 收集器 (复制…...

STM32面试相关问题

STM32面试相关问题&#xff1a; STM32的内核型号&#xff0c;主频&#xff0c;传感器和单片机总线类型&#xff0c;IIC,SPI,RS485UART数据帧项目中一些参数的设置 STM32 系统移植 ARM编译 常用的驱动编写方式 自己写过哪些方面驱动 其实如果问32的问题&#xff0c…...

风行智能电视N39S、N40 强制刷机升级方法,附刷机升级数据MstarUpgrade.bin

升级步骤&#xff1a; 1、下载刷机数据&#xff0c;如是压缩包&#xff0c;需要先解压&#xff0c;然后将刷机bin格式的文件重命名为MstarUpgrade.bin 2、将此文件放到U盘根目录 &#xff08;U盘格式FAT32&#xff0c;单分区&#xff0c;建议4G的优盘刷机成功率高&#xff09;…...

【C语言】简易英语词典

文章目录 一、定义英语单词信息的结构体二、主函数功能逻辑三、查单词函数四、背单词函数五、补充 一、定义英语单词信息的结构体 添加必要的头文件、宏定义和声明&#xff0c;之后定义英语单词信息结构体。 /* 头文件和宏定义 */ #include <stdio.h> #include <std…...

【算法题】104. 二叉树的最大深度

题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3 示例 2&#xff1a; 输入&#xff1a;root [1,nul…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...