初学MWA(Modern Web App)那些事-3-做一个简单的计算器

初学MWA(Modern Web App)那些事-3-做一个简单的计算器


目录

  • 初学MWA(Modern Web App)那些事-3-做一个简单的计算器
  • 前言
  • 一、本节学习目标
  • 二、计算器实例项目创建过程
    • 2.1 创建一个HTML文档
    • 2.2 查看新建的html文档
    • 2.3 Web应用开发:初始化设置
    • 2.4 Web应用开发:添加Logo
    • 2.5 Web应用开发:添加Logo样式
    • 2.6 Web应用开发:添加Logo其他样式
    • 2.7 Web应用开发:创建计算器Body
    • 2.8 Web应用开发:添加计算器按钮
    • 2.9 Web应用开发:组织布局计算器按钮
    • 2.9 Web应用开发:为计算器按钮添加样式
    • 2.10 Web应用开发:将按钮移动到屏幕区
    • 2.11 Web应用开发:为按钮添加事件类型
    • 2.12 Web应用开发:设置Javascript
    • 2.13 Web应用开发:Javascript 按钮指针
    • 2.14 Web应用开发:计算器按钮编程
  • 总结


前言

MWA,即Modern Web App(现代Web应用),是指一类采用了最新Web技术和方法论构建的Web应用。这类应用旨在提供接近原生应用的用户体验,同时利用Web平台的优势,如跨平台兼容性、无需安装、实时更新等特性。
MWA的设计和开发重点在于优化性能、提高响应速度、增强用户交互,并确保应用可以在各种设备和浏览器上运行良好。
MWA的概念体现了Web开发领域的持续进步,旨在提供更高效、更灵活和更用户友好的Web应用。随着技术的发展,MWA的实现方式和最佳实践也在不断演进。


一、本节学习目标

  • 练习创建HTML
  • 练习创建CSS
  • 练习创建 JavaScript
  • 练习创建一个计算器实例项目

二、计算器实例项目创建过程

2.1 创建一个HTML文档

1.在电脑中创建一个名为“计算器”(命名随意即可)的文件夹,用于存放将要建立的程序文件;
2.将图片文件“Logo.png”放入上一步创建的“计算器”文件夹里;
3.用VSCode创建三个空文件:
✔ Calculator.html
✔ _styles.css
✔ _script.js
在这里插入图片描述

2.2 查看新建的html文档

右键 HTML 文档,运行“Open with Live Server”,会显示一个空的浏览器窗口,开始我们的web应用开发吧。
在这里插入图片描述

2.3 Web应用开发:初始化设置

  1. 将默认标题“Documents”改成一个喜欢的标题→“我的计算器”;
  2. 添加一个样式链接“_ctyles.css”;
  3. 创建一个名为calculator的类,这样保住页面上所有内容;
  4. 定义JavaScript文件路径指向我们创建的空文件:“_script.js”
    在这里插入图片描述

2.4 Web应用开发:添加Logo

在上面的html文件中添加一个块,在页面中就会自动显示出logo图片。
在这里插入图片描述

2.5 Web应用开发:添加Logo样式

  1. 先在html文件中添加一个“calculator-screen”类
  2. 再在_styles.css文件中,定义body样式
  3. 在_styles.css文件中给calculator类添加样式
  4. 最后保存html+css文件,查看网页中logo图片的动态变化过程
    在这里插入图片描述

2.6 Web应用开发:添加Logo其他样式

  • 设置logo背景颜色、logo大小
  • 保存CSS文件,查看网页中logo的变化
    在这里插入图片描述

2.7 Web应用开发:创建计算器Body

  • 创建名为“.Calculator-screen”类的格式
  • 保存CSS文件,查看网页中的变化
    在这里插入图片描述

2.8 Web应用开发:添加计算器按钮

  • 在HTML文件中,创建名为“calculator-buttons”
  • 保存html文件,查看网页中的变化
    在这里插入图片描述

2.9 Web应用开发:组织布局计算器按钮

  • 在CSS文件中,创建名为“.calculator-buttons”格式,形成一个4列的按钮布局
  • 保存CSS文件,查看网页中的变化
    在这里插入图片描述

2.9 Web应用开发:为计算器按钮添加样式

  • 在CSS文件中,创建名为“.button”样式,用于布置这4列按钮
  • 保存CSS文件,查看网页中的变化
    在这里插入图片描述

2.10 Web应用开发:将按钮移动到屏幕区

  • 在HTML文件中,将名为“calculator-buttons”类移入到名为“calculator”父类中
  • 保存html文件,查看网页中的变化
    在这里插入图片描述在这里插入图片描述

2.11 Web应用开发:为按钮添加事件类型

  • 在CSS文件中,添加3个样式,使得当按下按键时,改变颜色,呈现一种动态的效果
  • 保存CSS文件,查看网页中的变化

在这里插入图片描述
在这里插入图片描述

2.12 Web应用开发:设置Javascript

  • 在Javascript文件中,添加代码,用于创建一个对象,以引用页面中的“屏幕”和“按钮”元素
  • 保存Javascript文件,按F12键
    “控制台”会记录显示由Javascript生成的信息,如果移动光标,屏幕区相关元素将会高亮显示
    在这里插入图片描述

2.13 Web应用开发:Javascript 按钮指针

  • 在Javascript文件中,添加代码,实现在控制台窗口中给每个按钮显示超链接
  • 移动光标到按钮上,计算器应用上将会自动高亮显示相关按钮
    在这里插入图片描述
    在这里插入图片描述

2.14 Web应用开发:计算器按钮编程

  • 在Javascript文件中,添加代码,并删除之前的诊断信息
  • 在网页版计算器上点击按钮,查看效果

在这里插入图片描述

总结

以上就是应用MWA技术实现一个网页版计算器的整个流程,一步步操作下来,感觉也不是很麻烦,对于这种简单的网页开发,一点点积累经验,相信很快就能掌握各种技巧,实现自己想要的功能。
同时,欢迎小伙伴点赞,关注,收藏,我将继续更新相关技术。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/874686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux C++ onnxruntime yolov8 视频检测Demo

linux C onnxruntime yolov8 视频检测Demo 目录 项目目录 效果 ​编辑CMakeLists.txt 代码 下载 项目目录 效果 ./yolov8_demo --help ./yolov8_demo -c2 -ptrue ./yolov8_demo -c1 -strue CMakeLists.txt # cmake needs this line cmake_minimum_required(VERSION 3…

AMD EPYC处理器性能宣称远超Nvidia Grace CPU

AMD近期发布了一份博客文章,其中对比了其EPYC处理器与Nvidia Grace Hopper Superchip(基于Arm架构的72核CPU)在一系列基准测试中的性能,声称EPYC处理器在多种工作负载下的表现最多可高出两倍。这一比较突显了AMD在数据中心CPU市场…

Covalent(CXT)运营商网络规模扩大 42%,以满足激增的需求

Covalent Network(CXT)是领先的人工智能模块化数据基础设施,网络集成了超过 230 条链并积累了数千名客户,目前 Covalent Network(CXT)网络迎来了五位新运营商的加入,包括 Graphyte Labs、PierTw…

使用PicGo操作gitee图床(及web端html不能访问图片的解决办法)

1.新建仓库 2.输入仓库名称,也就是图床名称,必须设置开源可见 也可以在创建仓库后,点击管理->基本信息->是否开源进行设置 鼠标悬浮到右上角头像->设置 点击私人令牌 点击生成新令牌,填写描述,直接点提交即可 点击提交后输入登录密码会生成一个token秘钥,如下,这个…

【C++】——初识模版

文章目录 前言函数模版函数模版的原理函数模版的实例化 类模版类模版的实例化 前言 当我们使用一个通用的函数: //为每一个类型都编写一个重载版本 void Swap(int& left, int& right) {int temp left;left right;right temp; } void Swap(double& …

在Linux、Windows和macOS上释放IP地址并重新获取新IP地址的方法

文章目录 LinuxWindowsmacOS 在Linux、Windows和macOS上释放IP地址并重新获取新IP地址的方法各有不同。以下是针对每种操作系统的详细步骤: Linux 使用DHCP客户端:大多数Linux发行版都使用DHCP(动态主机配置协议)来自动获取IP地址…

七、系统配置与性能评价(考点篇)

1 性能指标 性能指标,是软、硬件的性能指标的集成。在硬件中,包括计算机、各种通信交换设备、各类网 络设备等;在软件中,包括:操作系统、协议以及应用程序等。 1.计算机 对计算机评价的主要性能指标有: 时…

【嵌入式开发之数据结构】树的基本概念、逻辑结构和四种常用的遍历算法及实现

树(Tree)的定义及基本概念 树的定义 树(Tree)是个结点的有限集合T,它满足两个条件: 有且仅有一个特定的称为根(Root)的节点;其余的节点分为个互不相交的有限合集,其中每一个集合又…

日常开发记录分享——C#控件ToolTip实现分栏显示内容

文章目录 需求来源实现思路实施请看VCR等等别走,有优化 需求来源 需要在鼠标浮动到指定位置后提示出详细的信息,一开始使用的tooltip实现,但是里面的内容效果并不理想,需要有条理性,于是就想到能不能将展示的东西分列…

【Goland编辑器】Goland编辑器设置代码跳转的地方

记录一下: 关闭了插件里面proto相关的插件后, 在这里将Custom folding regions打开后, 点击代码跳转时,由proto生成的文件,就不会再跳转到proto定义处,而是跳转到代码使用的地方【正是我需要的】。

PHP接入consul,注册服务和发现服务【学习笔记】

PHP接入consul,注册服务和发现服务 consul安装 链接: consul安装 启动consul C:\Users\14684>consul agent -dev安装TP5 composer create-project topthink/think5.0.* tp5_pro --prefer-dist配置consul 创建tp5_pro/application/service/Consul.php <?php /*****…

linux版mysql8配置表名不区分大小写

mysql8的安装步骤可参考&#xff1a; mysql8的安装步骤 如果在安装mysql8&#xff0c;初始化之前&#xff0c;没有在my.cnf配置忽略大小写配置&#xff1a; [mysqld] lower_case_table_names1我们就需要重新初始化mysql 1 备份数据库文件 2 停止mysql服务 systemctl stop …

iOS开发设计模式篇第一篇MVC设计模式

目录 1. 引言 2.概念 1.Model 1.职责 2.实现 3.和Controller通信 1.Contrller直接访问Model 2.通过委托(Delegate)模式 3.通知 4.KVO 4.设计的建议 2.View 1.职责 2.实现 3.和Controller通信 1. 目标-动作&#xff08;Target-Action&#xff09;模式 2…

尾气处理系统工作原理

尾气处理系统工作原理 尾气处理系统是汽车发动机排放净化的重要部分&#xff0c;其中主要包括三元催化器、颗粒捕集器和尿素喷射系统等。以下是尾气处理系统的工作原理&#xff1a; 三元催化器&#xff1a;三元催化器是尾气处理系统中最常见的部件&#xff0c;三元催化器是尾气…

汉明权重(Hamming Weight)(统计数据中1的个数)VP-SWAR算法

汉明权重&#xff08;Hamming Weight&#xff09;&#xff08;统计数据中1的个数&#xff09;VP-SWAR算法 定义 汉明重量是一串符号中非零符号的个数。它等于同样长度的全零符号串的汉明距离(在信息论中&#xff0c;两个等长字符串之间的汉明距离等于两个字符串对应位置的不同…

USB转多路串口 - USB CDC设备枚举

先上参考资料&#xff1a; ST社区的&#xff1a; <<USB CDC类入门培训.pdf>>STM32 USB如何配置多个CDC设备状态与枚举过程CDC串口之从认识到认知 USB CDC 类基础 CDC(Communication Device Class)类是 USB2.0 标准下的一个子类&#xff0c;定义了通信相关设备的抽…

在Ubuntu上安装移远EC200M驱动

最近公司在做降本相关工作&#xff0c;考虑移远 EC20 4G模组成本较高&#xff0c;希望通过更低成本替换硬件&#xff0c;最后找到EC200M芯片&#xff0c;虽然EC200M速率(最大下行10M/s 最大上行5M/s)上低于EC20&#xff08;最大下行150M/s 最大上行50M/s&#xff09;,基本上可以…

tongue通lingual:灵根,舌也!

灵&#xff0c;指心灵、精神意识&#xff1b;灵根&#xff1a;汉语“灵根”&#xff0c;通常指人的舌头主。舌头是人心灵的表达根器&#xff0c;因此&#xff0c;灵根——指心灵外化的肉身凭据、可以像树根&#xff08;或一切植物根部&#xff09;一样延伸、像树根一样重要身体…

磁感应传感器 - 从零开始认识各种传感器【第十二期】

1、什么是磁感应传感器 磁感应传感器又叫做磁力计&#xff0c;是可以测量磁场大小或方向的设备。因为地球本质上是一个巨大的磁铁。磁力计可让您测量空间中某一点的磁场强度以及磁场方向。 图1 磁力计 磁力计已广泛应用于各种应用。它们用于测量地球磁场、地理测量、探测潜艇…

Python内存管理:引用计数与垃圾回收

✨ 内容&#xff1a; 在Python中&#xff0c;内存管理是一个重要且常常被忽视的话题。了解Python如何管理内存&#xff0c;不仅能帮助我们编写高效的代码&#xff0c;还能避免潜在的内存泄漏问题。今天&#xff0c;我们将通过一个实际案例&#xff0c;深入探讨Python的内存管理…