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

据 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体验界面

体验地址: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即可

参考知识

  • github的desktop页面写法
  • javascript学习教程
  • CSS学习教程
  • html学习教程
  • 基于jquery开发的Windows 12网页版

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

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

相关文章

1、验证1101序列(Moore)

题目要求&#xff1a; 用Moore型状态机验证1101序列。 题目描述&#xff1a; 用使用状态机验证1101序列&#xff0c;注意&#xff1a;允许重复子序列。如图 端口描述&#xff1a; module moore_1101(input clk,//时钟信号input clr,//reset复位信号&#xff0c;高电平有效in…

pdf处理工具 Enfocus PitStop Pro 2022 中文 for mac

Enfocus PitStop Pro 2022是一款专业的PDF预检和编辑软件&#xff0c;旨在帮助用户提高生产效率、确保印刷品质量并减少错误。以下是该软件的一些特色功能&#xff1a; PDF预检。PitStop Pro可以自动检测和修复常见的PDF文件问题&#xff0c;如缺失字体、图像分辨率低、颜色空…

在Android平板上使用code-server公网远程Ubuntu服务器编程

文章目录 1.ubuntu本地安装code-server2. 安装cpolar内网穿透3. 创建隧道映射本地端口4. 安卓平板测试访问5.固定域名公网地址6.结语 1.ubuntu本地安装code-server 准备一台虚拟机,Ubuntu或者centos都可以&#xff0c;这里以VMwhere ubuntu系统为例 下载code server服务,浏览器…

​EtherNet/IP 库卡机器人和EtherCAT倍福PLC总线协议连接案例​

EtherNet/IP 是一种适合于工业环境和对时间要求比较苛刻的应用的网络。而远创智控YC-EIPM-ECT通讯网关&#xff0c;是一款自主研发的EtherNet/IP 从站功能的通讯网关。它不仅可以实现EtherNet/IP 和EtherCAT的无缝连接&#xff0c;还可以将EtherNet/IP 作为从站连接到EtherCAT总…

嵌入式数据库sqlite3【基础篇】基本命令操作,小白一看就懂(C/C++)

目录 前言 一、sqlite概念和特性 二、sqlite安装 三、sqlite3数据类型 四、sqlite数据库约束 五、sqlite常用命令 六、SQL语句&#xff08;增删改查&#xff09; 七、sqlite使用实例&#xff08;教学管理数据库&#xff09; 总结 前言 数据在实际工作中应用非常广泛…

【LLM微调范式1】Prefix-Tuning: Optimizing Continuous Prompts for Generation

论文标题&#xff1a;Prefix-Tuning: Optimizing Continuous Prompts for Generation 论文作者&#xff1a;Xiang Lisa Li, Percy Liang 论文原文&#xff1a;https://arxiv.org/abs/2101.00190 论文出处&#xff1a;ACL 2021 论文被引&#xff1a;1588&#xff08;2023/10/14&…

目录启示:使用 use 关键字为命名空间内的元素建立非限定名称

文章目录 参考环境三种名称非限定名称限定名称完全限定名称举个栗子 useuse 关键字use ... as .. 命名冲突真假美猴王两个世界 参考 项目描述搜索引擎Bing、GoogleAI 大模型文心一言、通义千问、讯飞星火认知大模型、ChatGPTPHP 官方PHP ManualPHP 官方language.namespaces.ra…

JavaSE学习值之--认识异常

&#x1f495;"有效知识的前提是承认知识边界&#xff0c;承认我们对边界那边的一切无可奉告。"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;JavaSE学习值之--认识异常 一.什么是异常&#xff1f; 异常就是程序在运行的时候产生的不正常的行为 …

Ubuntu的Python从2.x升级到3.x

我的Ubuntu系统默认是2.7,我想升级为3.5 升级python3.5 下载python sudo apt-get install python3查看 刚才下载的Python程序被安装在usr/local/lib/python3.5 中 cd usr/local/lib备份一下 sudo cp /usr/bin/python /usr/bin/python_bak删除python的旧关联 sudo rm -rf py…

如何降低海康、大华等网络摄像头调用的高延迟问题(二)

目录 1.RTSP介绍 2.解决办法1 3.解决办法2 1.RTSP介绍 RTSP&#xff08;Real-time Streaming Protocol&#xff09;是一种用于实时流媒体传输的网络协议。它被设计用于在服务器和客户端之间传输音频、视频以及其他流媒体数据。 RTSP协议允许客户端通过与服务器建立RTSP会话…

Easysearch压缩模式深度比较:ZSTD+source_reuse的优势分析

引言 在使用 Easysearch 时&#xff0c;如何在存储和查询性能之间找到平衡是一个常见的挑战。Easysearch 具备多种压缩模式&#xff0c;各有千秋。本文将重点探讨一种特别的压缩模式&#xff1a;zstd source_reuse&#xff0c;我们最近重新优化了 source_reuse,使得它在吞吐量…

【linux】日志和journalctl 管理查看日志

目录 既看即用 简略介绍 linux的日志类型 系统日志 介绍 区别的简单说明 区别的详细说明 journalctl是什么&#xff1f;&#xff08;查看系统日志的工具&#xff09; 详细内容 linux的日志类型 systemd日志&#xff08;systemd-journald&#xff09; 放在哪个目录 …

Linux系统编程详解

Linux 多线程编程 什么是线程&#xff1f; 与线程类似&#xff0c;线程是允许应用程序并发执行多个任务的一种机制 线程是轻量级的进程&#xff08;LWP&#xff1a;Light Weight Process&#xff09;&#xff0c;在 Linux 环境下线程的本 质仍是进程。 一个进程可以包含多个线…

[ROS2系列] ubuntu 20.04测试rtabmap 3D建图(二)

接上文我们继续 如果我们要在仿真环境中进行测试&#xff0c;需要将摄像头配置成功。 一、配置位置 sudo vim /opt/ros/foxy/share/turtlebot3_gazebo/models/turtlebot3_waffle/model.sdf 二、修改 <joint name"camera_rgb_optical_joint" type"fixed&…

介绍6种解决电脑找不到vcomp140.dll,无法继续执行代码的方法。

在编程和软件开发领域&#xff0c;我们经常会遇到各种错误和问题。其中&#xff0c;找不到vcomp140.dll文件导致无法继续执行代码是一个非常常见的问题。这个问题可能会影响到软件的正常运行&#xff0c;甚至导致整个项目延期。因此&#xff0c;我们需要找到解决方案来解决这个…

如何导出带有材质的GLB模型?

1、为什么要使用 GLB 模型? GLB格式&#xff08;GLTF Binary&#xff09;是一种用于存储和传输3D模型及相关数据的文件格式&#xff0c;具有以下优点和作用&#xff1a; 统一性&#xff1a;GLB是一种开放标准的3D文件格式&#xff0c;由Khronos Group制定和维护。它融合了GL…

C# 图解教程 第5版 —— 第6章 方法

文章目录 6.1 方法的结构6.2 方法体内部的代码执行6.3 局部变量6.3.1 类型推断和 var 关键字6.3.2 嵌套块中的局部变量 6.4 局部常量6.5 控制流6.6 方法调用&#xff08;*&#xff09;6.7 返回值&#xff08;*&#xff09;6.8 返回语句和 void 方法6.9 局部函数6.10 参数&#…

mysql面试题50:500台数据库,如何在最快时间之内重启

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:500台db,如何在最快时间之内重启呢? 如果需要在最快时间内重启500台数据库,可以考虑采用并行化和自动化的方法来提高效率。比如: 编写自动化脚…

vh、vw、vmin、vmax

1、分别是什么&#xff1f; vh:指屏幕可见视窗的高&#xff0c; vw:指屏幕可见视窗的宽&#xff0c; vmin:vh和vw之间选较小的值&#xff0c; vmax:vh和vw之间选较大的值。 2、和百分比的区别 百分比时基于父元素的宽高&#xff0c;而vh\vw\vmin\vmax基于屏幕可见视图的宽…

protobuf 插件(option)使用

protobuf的option使用 一、需求 来源于工作中的一个需求&#xff1a;在传递message时需要对message中不同的字段进行不同的处理&#xff0c;而处理方式通过注释标注在了每个字段的定义后。 类似于有下面这样一个消息&#xff1a; 其中字段1是始终需要的&#xff0c;字段2和3…