首页 > 其他分享 >基于html5开发的Win12网页版,抢先体验

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

时间:2023-10-15 22:36:28浏览次数:49  
标签:文件夹 12 网页 Windows desktop html 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的体验界面

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

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

开发要点

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

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

代码结构

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

关键代码

启动流程是先进入到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即可

参考知识

标签:文件夹,12,网页,Windows,desktop,html,html5,开发,Win12
From: https://www.cnblogs.com/net19880504/p/17766351.html

相关文章

  • 车辆车型识别系统python+TensorFlow+Django网页界面+算法模型
    一、介绍车辆车型识别系统。本系统使用Python作为主要开发编程语言,通过TensorFlow搭建算法模型网络对收集到的多种车辆车型图片数据集进行训练,最后得到一个识别精度较高的模型文件。并基于该模型搭建Django框架的WEB网页端可视化操作界面。实现用户上传一张车辆车型图片识别其名称......
  • 车辆车型识别系统python+TensorFlow+Django网页界面+算法模型
    一、介绍车辆车型识别系统。本系统使用Python作为主要开发编程语言,通过TensorFlow搭建算法模型网络对收集到的多种车辆车型图片数据集进行训练,最后得到一个识别精度较高的模型文件。并基于该模型搭建Django框架的WEB网页端可视化操作界面。实现用户上传一张车辆车型图片识别其名......
  • GitHub 3个初中生开源了windows 12网页版,目前5k+ star!
    国内3个初中生开源了Windows12网页版,尽管项目基本涉及前端,对于大多数开发者来说可能没什么太高的技术含量,可是想到他们才上初中,真的是后生可畏呀!目前项目已经获得了5k+star。GitHub:https://github.com/tjy-gitnub/win12在线体验:https://tjy-gitnub.github.io/win12/deskt......
  • 【CSS3】CSS3 3D 转换 ③ ( 3D 透视视图 | translateZ 转换分析 | 网页调试工具调试 t
    文章目录一、translateZ转换分析1、translateZ转换对应的空间分析2、网页调试工具调试translateZ属性值二、代码示例-translateZ转换分析1、代码示例-translateZ为0的参照示例2、代码示例-translateZ为200示例一、translateZ转换分析1、translateZ转换对应的......
  • 从零开发一款图片编辑器(使用html5+javascript)
    最近开发了一个图片编辑器,类似于photoshop的网页版,源码参考自GitHub上,顺便也总结下使用html+js开发一个编辑器需要用到哪些知识点。预览地址:https://ps.gitapp.cngithub地址:https://github.com/photopea/photopea架构设计选型:jquery.js和blueimp-canvas.js都是强大的......
  • HTML5 大文件断点续传完整思路整理
    用html5的新特性分割文件,为达到断点续传功能用spark.js获取文件md5以确保文件的唯一性流程概述: 复制代码(此功能前端共需调用3个接口,分别为简称作A/B/C)1,获取文件信息:使用HTML5的原生上传input,选择文件后,获取文件的所有信息(文件名、文件总字节数等)......
  • HTML5实现文件断点续传的方法
    HTML5的FILEapi,有一个slice方法,可以将BLOB对象进行分割。前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接。断点续传原理目前比较常用的断点续传的方法有两种,一种是通过websocket接口进行文件上传......
  • 手把手带你用Python和文心一言搭建《AI看图写诗》网页项目
    今年年初,ChatGPT的火爆在全球掀起AI大模型的开发热潮,国内外的科技公司纷纷加入“百模大战”行列。百度在率先发布了国内第一款人工智能大语言模型“文心一言”后,又推出了文心千帆大模型平台,帮助企业和开发者加速大模型应用落地。而最近百度创始人、董事长兼首席执行官李彦宏在一场......
  • Loadrunner12.5-录制http://www.gw.com.cn/网页时提示“SSL身份验证失败”错误
    问题:LR产品,录制http://www.gw.com.cn/网页时提示下图错误,这是为什么呢?请在如下recordingoptions中选择正确的SSL版本,再进行录制。注:如何确定那个SSL版本是正确的呢?答:需要与网站这边进行确认,问他们网站使用的SSL版本是多少? ......
  • 网页全屏及退出全屏
    一、实现页面全屏1functiondoFullscreen(el){2if(el==null){3el=document.documentElement4}5constfunc=el.requestFullscreen||el.requestFullScreen||el.webkitRequestFullScreen||el.mozRequestFullScreen||......