当前位置： 首页 > news >正文

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

news 2026/2/1 0:16:21

据 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网页版

相关文章：

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

据 MSPoweruser 报道&#xff0c;Windows 11虽然刚刚开始步入正轨&#xff0c;但最新爆料称微软已经在开启下一个计划&#xff0c;Windows 12 的开发将在 去年3 月份开始。德国科技网站 Deskmodder.de 称&#xff0c;根据内部消息&#xff0c;微软将在 2022年3 月开始开发 Wind…...

编程日记 2023/10/16 3:40:36

Studio One6.5中文版本下载安装步骤

在唱歌效果调试当中&#xff0c;我们经常给客户安装的几款音频工作站。第一&#xff0c;Studio One 6是PreSonus公司开发的一款功能强大的音频工作平台&#xff0c;具有丰富的音频处理功能和灵活的工作流程。以下是Studio One6的一些主要特点&#xff1a; 1.多轨录音和编辑&…...

编程日记 2023/10/16 3:38:35

Java架构师缓存架构设计解决方案

目录 1 缓存常见的三大问题1.1 缓存雪崩1.2 缓存穿透1.3 缓存击穿2 缓存key的生成策略3 热点数据集中失效的问题4 如何提高缓存的命中率5 缓存和数据库双写不一致的问题6 如何对缓存数据进行分片想学习架构师构建流程请跳转：Java架构师系统架构设计 1 缓存常见的三大问题 缓…...

编程日记 2023/10/16 3:37:34

【玩转Redhat Linux 8.0系列 | 实验—使用Bash shell执行命令】

今天继续分享一些Redhat Linux 8.0的知识&#xff0c;记得关注&#xff0c;会一直更新~ 访问命令行 任务执行清单 在本实验中&#xff0c;您将使用Bash shell来执行命令。 成果 使用Bash shell命令行成功运行简单的程序。 执行用于识别文件类型并显示文本文件部分内容的命…...

编程日记 2023/10/16 3:36:33

Linux系统编程详解

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

编程日记 2023/10/16 3:35:31

ios设备管理软件iMazing 2.17.11官方中文版新增功能介绍

iMazing 2.17.11官方中文版(ios设备管理软件)是一款管理苹果设备的软件&#xff0c; Windows 平台上的一款帮助用户管理 IOS 手机的应用程序&#xff0c;软件功能非常强大&#xff0c;界面简洁明晰、操作方便快捷&#xff0c;设计得非常人性化。iMazing官方版与苹果设备连接后&…...

编程日记 2023/10/16 3:34:30

算法通关村第18关【青铜】| 回溯

回溯算法是一种解决组合优化问题和搜索问题的算法。它通过尝试各种可能的选择来找到问题的解决方案。回溯算法通常用于问题的解空间非常大&#xff0c;而传统的穷举法会导致计算时间爆炸的情况。回溯算法可以帮助限制搜索空间&#xff0c;以提高效率。 回溯算法的核心思想是在…...

编程日记 2023/10/16 3:33:29

【环境搭建】linux docker-compose安装seata1.6.1，使用nacos注册、db模式

新建目录&#xff0c;挂载用 mkdir -p /data/docker/seata/resources mkdir -p /data/docker/seata/logs 给权限 chmod -R 777 /data/docker/seata 先在/data/docker/seata目录编写一个使用file启动的docker-compose.yml文件&#xff08;seata包目录的script文件夹有&#…...

编程日记 2023/10/16 3:31:25

20231008-20231013 读书笔记

计算机硬件 基本硬件系统&#xff1a;运算器、控制器、存储器、输入设备和输出设备中央处理单元&#xff08;CPU&#xff09;:运算器、控制器、寄存器组和内部总线等部件组成 功能&#xff1a;程序控制、操作控制、时间控制、数据处理运算器&#xff1a;ALU、AC、DR、PSW控制器…...

编程日记 2023/10/16 3:30:23

YOLOv8 windows下的离线安装 offline install 指南 -- 以 带有CUDA版本的pytorch 为例

文章大纲 简介基础环境与安装包的准备windows 下 lap 包的离线安装conda 打包基础环境使用 pip 下载 whl 包特别的注意：pytorch cuda 版本的下载迁移与部署流程基础python 的conda 环境迁移与准备必备包： 安装cuda 版本 的torch，torchvision，ultralytics参考文献与学习路径…...

编程日记 2023/10/16 3:29:22

百度车牌识别AI Linux使用方法-armV7交叉编译

1、获取百度ai的sdk 百度智能云-登录 (baidu.com) 里面有两个版本的armV7和armV8架构。v7架构的性能比较低往往需要交叉编译&#xff0c;v8的板子性能往往比较好&#xff0c;可以直接在板子上编译。 解压到ubuntu里面。这里介绍v7架构的。 2、ubuntu环境配置 ubuntu下安装软件…...

编程日记 2023/10/16 3:26:17

数学建模——确定性时间序列分析方法

目录 介绍 确定性时间序列分析方法 1、时间序列的常见趋势 &#xff08;1&#xff09;长期趋势 &#xff08;2&#xff09;季节变动 &#xff08;3&#xff09;循环变动 &#xff08;4&#xff09;不规则变动 常见的时间序列模型有以下几类 2、时间序列预测的具体方法 …...

编程日记 2023/10/16 3:24:14

Opencv——颜色模型+通道分离与合并

视频加载/摄像头调用 VideoCapture允许一开始定义一个空的对象 VideoCapture video VideoCapture(const String &filename,int apiPreferenceCAP_ANY) filename:读取的视频文件或者图像序列名称 apiPreference:读取数据时设置的属性&#xff0c;例如编码格式、是否调用Op…...

编程日记 2023/10/16 3:23:13

解码自然语言处理之 Transformers

自 2017 年推出以来&#xff0c;Transformer 已成为机器学习领域的一支重要力量&#xff0c;彻底改变了翻译和自动完成服务的功能。 最近&#xff0c;随着 OpenAI 的 ChatGPT、GPT-4 和 Meta 的 LLama 等大型语言模型的出现&#xff0c;Transformer 的受欢迎程度进一步飙升。这…...

编程日记 2023/10/16 3:22:12

【前端设计模式】之迭代器模式

迭代器模式是一种行为设计模式&#xff0c;它允许我们按照特定的方式遍历集合对象&#xff0c;而无需暴露其内部实现。在前端开发中&#xff0c;迭代器模式可以帮助我们更好地管理和操作数据集合。 迭代器模式特性 封装集合对象的内部结构&#xff0c;使其对外部透明。提供一…...

编程日记 2023/10/16 3:20:09

【Android知识笔记】图片专题（BitmapDrawable）

如何计算一张图片的占用内存大小？ 注意是占用内存，不是文件大小可以运行时获取重要的是能直接掌握计算方法基础知识 Android 屏幕像素密度分类： （其实还有一种 ldpi = 120，不过这个已经绝种了，所以最低的只需关心mdpi即可） 上表中的比例为：m : h : xh : xxh: xxxh = …...

编程日记 2023/10/16 3:18:05

前端工程化知识系列（10）

目录 91. 了解前端工程化中的容器化和云部署概念&#xff0c;以及如何使用Docker和Kubernetes等工具来实现它们&#xff1f;92. 你如何管理前端项目的文档和知识共享&#xff0c;以确保团队成员都能理解和使用前端工程化工具和流程&#xff1f;93. 了解前端开发中的大规模和跨团…...

编程日记 2023/10/16 3:16:04

大数据flink篇之三-flink运行环境安装（一）单机Standalone安装

一、安装包下载地址 https://archive.apache.org/dist/flink/flink-1.15.0/ 二、安装配置流程 前提基础&#xff1a;Centos环境&#xff08;建议7以上&#xff09; 安装命令&#xff1a; 解压&#xff1a;tar -zxvf flink-xxxx.tar.gz 修改配置conf/flink-conf.yaml&#xff1…...

编程日记 2023/10/16 3:12:59

Redisson使用延时队列

延时队列 在开发中&#xff0c;有时需要使用延时队列。 比如&#xff0c;订单15分钟内未支付自动取消。 jdk延时队列 如果使用 jdk自带的延时队列&#xff0c;那么服务器挂了或者重启时&#xff0c;延时队列里的数据就会失效&#xff0c;可用性比较差。 Redisson延时队列 …...

编程日记 2023/10/16 3:11:58

基于php 进行每半小时钉钉预警

前言 业务场景&#xff1a;监控当前业务当出现并发情况时技术人员可以可以及时处理 使用技术栈&#xff1a; laravelredis 半小时触发一次报警信息实现思路 1、xshell脚本 具体参数就不详细解释了&#xff0c;想要详细了解可以自行百度 curl -H "Content-Type:appl…...

编程日记 2023/10/16 3:08:55

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/12/20 15:01:20

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2026/1/28 8:48:34

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2026/1/30 3:39:57