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

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

---

---

前言

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

原文地址：https://blog.csdn.net/lichuanxichina/article/details/140466958

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！