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

news2024/11/30 10:30:02

据 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.coloradmin.cn/o/1095742.html

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

相关文章

02_单片机及开发板介绍

单片机简介 单片机&#xff0c;又称为微控制器&#xff08;Microcontroller&#xff09;&#xff0c;是一种集成了微处理器核心、存储器、输入/输出接口及各种功能模块的集成电路芯片。它通常由中央处理器&#xff08;CPU&#xff09;、存储器、输入/输出接口以及各种外设组成&…

HDLbits: Fsm serial

根据题意设计了四个状态&#xff0c;写出代码如下&#xff1a; module top_module(input clk,input in,input reset, // Synchronous resetoutput done ); parameter IDLE 3b000, START 3b001, DATA 3b010, STOP 3b100, bit_counter_end 4d7;reg [2:0] state,next_sta…

关于TCP协议面试中常见的一千个问题

TCP传输层控制协议 TCP是面向连接的、可靠的、基于字节流的传输层通信协议。 TCP 头部格式 1、 源端口和目的端口字段——各占 2 字节。端口是运输层与应用层的服务接口。运输层的复用和分用功能都要通过端口才能实现。 2、 序号字段——占 4 字节。TCP 连接中传送的数据流中…

诊断DLL——Vector模板生成Send2Key.dll

文章目录 前言一、Vector诊断控制台Secutity Access基本原理二、Seed2Key DLL生成GenerateKeyEx源码自定义安全算法源码CAPL调用27服务解密算法前言 在实际诊断工程应用中,如UDS刷写——27服务,经常会遇到一些Seed2Key的算法问题,为了安全保密,这个算法的源码不便公开,我…

【C++基础】10. 指针

文章目录 【 1. 指针的定义 】【 2. 指针的调用 】【 3. NULL 空指针 】【 4. 指针的算术运算 】4.1 指针的递加4.2 指针的递减4.3 指针的比较 【 5. 指针与数组 】5.1 通过指针操作数组5.2 指针数组、数组指针 【 6. 指向指针的指针(多级间接寻址)】【 7. 传递指针给函数 】【…

【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;说下你的vue项目的目录结…

第三章 内存管理 四、连续分配管理方式

目录 一、内存空间的分配与回收 1、连续分配管理方式 &#xff08;1&#xff09;、单一连续分配 优点&#xff1a; 缺点&#xff1a; &#xff08;2&#xff09;、固定分区分配 分区大小相等&#xff1a; 分区大小不等&#xff1a; &#xff08;3&#xff09;、动态分区…

leetcode17.04面试题:消失的数字

数组nums包含从0到n的所有整数&#xff0c;但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在O(n)时间内完成吗&#xff1f; 思路1&#xff1a;暴力枚举 定义一个[0~n]的数组与所给数组nums进行循环遍历&#xff0c;如果不相等则返回那个数。 int missingNumber(int…

Git 安装和配置教程:Windows / Mac / Linux 三平台详细图文教程,带你一次性搞定 Git 环境

Git是一款免费、开源的分布式版本控制系统&#xff0c;广泛应用于软件开发领域。随着开源和云计算的发展&#xff0c;Git已经成为了开发者必备的工具之一。本文将为大家介绍Git在Windows、Mac和Linux三个平台上的安装和配置方法&#xff0c;带你一次性搞定Git环境 Windows平台 …

windows计划任务的配置文件

界面操作 创建计划 依次设置 命令行操作 SCHTASKS 命令简介 SCHTASKS 命令是由微软公司开发并内置于 Windows 系统中的一个命令行工具。该命令可用于设置、修改、查询和删除计划任务&#xff0c;或启动计划任务中所定义的程序或脚本。 SCHTASKS 命令的基本语法 SCHTASKS 命…

【算法|动态规划No.20】leetcode416. 分割等和子集

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

38_Nginx 启动流程

文章目录 src/core/nginx.cint ngx_cdecl main(int argc, char *const *argv) {ngx_buf_t *b;

CSS基础详细解析(附带综合小练习)

目标&#xff1a;掌握 CSS 属性基本写法&#xff0c;能够使用文字相关属性美化文章页。 01-CSS初体验 层叠样式表 (Cascading Style Sheets&#xff0c;缩写为 CSS&#xff09;&#xff0c;是一种 样式表 语言&#xff0c;用来描述 HTML 文档的呈现&#xff08;美化内容&#…

JVM之class文件结构剖析

文章目录 0.前言1. 引言1.1 Java编译原理基础1.2 Class文件在Java编译过程中的角色 2. Class文件的整体结构2.1 Class 文件组成 3. Class文件的详细解析3.1 魔数与版本号的作用和意义3.2 常量池的结构和作用3.3 访问标志的含义和可能的值3.4 类索引、父类索引和接口索引集合的作…

如何在小程序中设置页面显示的文字

不同商家&#xff0c;对于小程序有不同的要求。所以&#xff0c;小程序应该支持商家在后台灵活配置小程序各个页面的文字显示。下面具体介绍如何显示各个页面的文字。 朋友圈分享图文字&#xff1a;会显示在朋友圈海报顶部 升级会员提示&#xff1a;对于普通会员&#xff0c;在…

一些基础知识

一些基础知识笔记Git clone gitxxxxx pip install -r requirements.txt -i https://pypi.mirrors.ustc.edu.cn/simple wget google.com 可以快速看你的服务器到底有没有链接代理 benchmark和baseline L1 loss & MSE loss L1是差的绝对值和&#xff0c;MSE是差的平方和 …

KMP 算法 + 详细笔记

给两个字符串&#xff0c;T"AAAAAAAAB"&#xff0c;P"AAAAB"; 可以暴力匹配&#xff0c;但是太费时和效率不太好。于是KMP问世&#xff0c;我们一起来探究一下吧&#xff01;&#xff01;&#xff01; &#xff08;一&#xff09;最长公共前后缀 D[i] p[…

【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;vue项目本地开发完成后部…

电脑技巧:PrivaZer电脑清理工具介绍

目录 一、软件介绍 二、功能介绍 三、软件特点 清理和保护 防止恢复 Cookie的智能清理 四、软件下载 今天给大家推荐一款非常实用的电脑垃圾清理工具&#xff0c;感兴趣的朋友可以下载看看&#xff01; 一、软件介绍 PrivaZer是一款免费好用的老牌清理软件&#xff0c;除…

详解Pinia和Vuex

一、vuex介绍 1.什么是vuex&#xff1f;为什么要使用vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 在vue最重要的就是数据驱动和组件化&#x…