基于html5开发的Win12网页版,抢先体验

简介: windows的更新进度太快了,记得当年上大学的时候,大家用的还是windows xp,之后是windows 7,然后没有经历windows10,现在直接是windwos11。

据 MSPoweruser 报道,Windows 11虽然刚刚开始步入正轨,但最新爆料称微软已经在开启下一个计划,Windows 12 的开发将在 去年3 月份开始。德国科技网站 Deskmodder.de 称,根据内部消息,微软将在 2022年3 月开始开发 Windows 12 系统,尽管 Windows 11 正式版才在去年 10 月份发布。即使 Windows 12 很快进入开发阶段,我们也可能要等待相当长的一段时间,才会迎来微软的官方宣布,毕竟一款系统的开发需要多年的时间。

个人体验

不得不说,windows的更新进度太快了,记得当年上大学的时候,大家用的还是windows xp,之后是windows 7,然后没有经历windows10,现在直接是windwos11。据说微软的系统版本有个特点,就是隔代胜出。比如win xp和win7之间的vista,还有win7和win10之间的win8,都失败了。不知道win12是否能成功。

以下就是win12的体验界面

win12.png

体验地址:https://win12.gitapp.cn

本网页是基于第三方开源项目https://github.com/tjy-gitnub/win12开发的,

开发要点

整个项目的开发是基于html5+jquery+javascript+css实现的,目前实现的功能包括:

  • 基本功能与应用
  • 外观整体优化
  • 加入特效
  • 窗口功能
    • 应用完善
    • 添加更多个性化方面的设置
    • 添加 Edge 应用
    • 为更多应用添加标签页
  • 完善小组件,添加到桌面等功能
  • 动态壁纸

代码结构

该项目结构共分为9个文件夹和主入口文件desktop.html和boot.html。代码结构如下图所示。其中,scripts文件夹包含了所有的js文件,media文件夹包含了所有的音频文件,比如开机启动音乐;img文件夹包含了所有的静态图片。

src-win12.png

关键代码

启动流程是先进入到boot.html,然后进入到desktop.html。

desktop.html关键代码如下:

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />

    <link rel="stylesheet" href="./desktop.css">
    <link rel="stylesheet" href="bootstrap-icons.css">
    <!-- Apps style -->
    <link rel="stylesheet" href="apps/style/setting.css">
    <link rel="stylesheet" href="apps/style/explorer.css">
    <link rel="stylesheet" href="apps/style/calc.css">
    <link rel="stylesheet" href="apps/style/about.css">
    <link rel="stylesheet" href="apps/style/notepad.css">
    <link rel="stylesheet" href="apps/style/terminal.css">
    <link rel="stylesheet" href="apps/style/edge.css">
    <link rel="stylesheet" href="apps/style/camera.css">
    <link rel="stylesheet" href="apps/style/pythonEditor.css">
    <link rel="stylesheet" href="apps/style/run.css">
    <link rel="stylesheet" href="apps/style/whiteboard.css">
    <link rel="stylesheet" href="apps/style/defender.css">
    <link rel="stylesheet" href="apps/style/taskmgr.css">
    <link rel="stylesheet" href="widgets.css">
    <!-- 掌声欢迎 Copilot 的 css 引入(bs -->
    <link rel="stylesheet" href="apps/style/copilot.css">
    <link rel="manifest" href="pwa/manifest.json">
    <link rel="shortcut icon" href="./pwa/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="apps/style/login.css">
    <!-- 各个模块 -->
    <link rel="stylesheet" href="module/tab.css">
    <base target="_blank">

    <title>Windows 12 网页版</title>
    <meta name="description" content="Windows 12网页版是一个在线体验Windows 12操作系统的开源项目,使用 HTML、CSS 和 JavaScript 模拟 Windows 12 操作系统的界面与交互。">
    <meta name="keywords" content="Windows 12, Windows 12网页版, 在线Windows 12">
    <meta name="keywords" content="Windows 12, Windows 12网页版, 在线Windows 12">
</head>

部署运行(nginx)

将代码下载到本地后,在D盘新建文件夹html,然后将源码放到里面,然后配置nginx的html根目录即可。nginx配置如下:

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   D:\html; // 你的代码目录
            index  desktop.html;
        try_files $uri $uri/ /desktop.html;
        }
    }

然后浏览器访问 localhost即可

参考知识

目录
相关文章
|
2月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
113 0
|
4月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
64 0
|
3月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
3月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
2月前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
54 1
【HTML】构建网页的基石
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
4月前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
53 4
|
4月前
|
数据安全/隐私保护
新年快乐鞭炮祝福html网页源码
新年快乐鞭炮祝福html网页源码,动态点燃鞭炮动画祝福新年快乐,带新年背景音乐,无加密完整可用,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面。
50 0
新年快乐鞭炮祝福html网页源码
|
4月前
|
前端开发
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!