手机看电视剧网站大全,wordpress改不了密码,网站服务器证书过期怎么解决,青岛网站建初学MWA(Modern Web App#xff09;那些事-3-做一个简单的计算器 目录 初学MWA(Modern Web App#xff09;那些事-3-做一个简单的计算器前言一、本节学习目标二、计算器实例项目创建过程2.1 创建一个HTML文档2.2 查看新建的html文档2.3 Web应用开发#xff1a;初始化设置2.4…初学MWA(Modern Web App那些事-3-做一个简单的计算器 目录 初学MWA(Modern Web App那些事-3-做一个简单的计算器前言一、本节学习目标二、计算器实例项目创建过程2.1 创建一个HTML文档2.2 查看新建的html文档2.3 Web应用开发初始化设置2.4 Web应用开发添加Logo2.5 Web应用开发添加Logo样式2.6 Web应用开发添加Logo其他样式2.7 Web应用开发创建计算器Body2.8 Web应用开发添加计算器按钮2.9 Web应用开发组织布局计算器按钮2.9 Web应用开发为计算器按钮添加样式2.10 Web应用开发将按钮移动到屏幕区2.11 Web应用开发为按钮添加事件类型2.12 Web应用开发设置Javascript2.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应用开发初始化设置
将默认标题“Documents”改成一个喜欢的标题→“我的计算器”添加一个样式链接“_ctyles.css”创建一个名为calculator的类这样保住页面上所有内容定义JavaScript文件路径指向我们创建的空文件“_script.js”
2.4 Web应用开发添加Logo
在上面的html文件中添加一个块在页面中就会自动显示出logo图片。
2.5 Web应用开发添加Logo样式
先在html文件中添加一个“calculator-screen”类再在_styles.css文件中定义body样式在_styles.css文件中给calculator类添加样式最后保存htmlcss文件查看网页中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技术实现一个网页版计算器的整个流程一步步操作下来感觉也不是很麻烦对于这种简单的网页开发一点点积累经验相信很快就能掌握各种技巧实现自己想要的功能。 同时欢迎小伙伴点赞关注收藏我将继续更新相关技术。
