深圳網(wǎng)站建設(shè)培訓(xùn)班深圳最新通告今天
據(jù) MSPoweruser 報(bào)道,Windows 11雖然剛剛開(kāi)始步入正軌,但最新爆料稱微軟已經(jīng)在開(kāi)啟下一個(gè)計(jì)劃,Windows 12 的開(kāi)發(fā)將在 去年3 月份開(kāi)始。德國(guó)科技網(wǎng)站 Deskmodder.de 稱,根據(jù)內(nèi)部消息,微軟將在 2022年3 月開(kāi)始開(kāi)發(fā) Windows 12 系統(tǒng),盡管 Windows 11 正式版才在去年 10 月份發(fā)布。即使 Windows 12 很快進(jìn)入開(kāi)發(fā)階段,我們也可能要等待相當(dāng)長(zhǎng)的一段時(shí)間,才會(huì)迎來(lái)微軟的官方宣布,畢竟一款系統(tǒng)的開(kāi)發(fā)需要多年的時(shí)間。
個(gè)人體驗(yàn)
不得不說(shuō),windows的更新進(jìn)度太快了,記得當(dāng)年上大學(xué)的時(shí)候,大家用的還是windows xp,之后是windows 7,然后沒(méi)有經(jīng)歷windows10,現(xiàn)在直接是windwos11。據(jù)說(shuō)微軟的系統(tǒng)版本有個(gè)特點(diǎn),就是隔代勝出。比如win xp和win7之間的vista,還有win7和win10之間的win8,都失敗了。不知道win12是否能成功。
以下就是win12的體驗(yàn)界面
體驗(yàn)地址:https://win12.gitapp.cn
本網(wǎng)頁(yè)是基于第三方開(kāi)源項(xiàng)目https://github.com/tjy-gitnub/win12開(kāi)發(fā)的,
開(kāi)發(fā)要點(diǎn)
整個(gè)項(xiàng)目的開(kāi)發(fā)是基于html5+jquery+javascript+css實(shí)現(xiàn)的,目前實(shí)現(xiàn)的功能包括:
- 基本功能與應(yīng)用
- 外觀整體優(yōu)化
- 加入特效
- 窗口功能
- 應(yīng)用完善
- 添加更多個(gè)性化方面的設(shè)置
- 添加 Edge 應(yīng)用
- 為更多應(yīng)用添加標(biāo)簽頁(yè)
- 完善小組件,添加到桌面等功能
- 動(dòng)態(tài)壁紙
代碼結(jié)構(gòu)
該項(xiàng)目結(jié)構(gòu)共分為9個(gè)文件夾和主入口文件desktop.html和boot.html。代碼結(jié)構(gòu)如下圖所示。其中,scripts文件夾包含了所有的js文件,media文件夾包含了所有的音頻文件,比如開(kāi)機(jī)啟動(dòng)音樂(lè);img文件夾包含了所有的靜態(tài)圖片。
關(guān)鍵代碼
啟動(dòng)流程是先進(jìn)入到boot.html,然后進(jìn)入到desktop.html。
desktop.html關(guān)鍵代碼如下:
<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"><!-- 各個(gè)模塊 --><link rel="stylesheet" href="module/tab.css"><base target="_blank"><title>Windows 12 網(wǎng)頁(yè)版</title><meta name="description" content="Windows 12網(wǎng)頁(yè)版是一個(gè)在線體驗(yàn)Windows 12操作系統(tǒng)的開(kāi)源項(xiàng)目,使用 HTML、CSS 和 JavaScript 模擬 Windows 12 操作系統(tǒng)的界面與交互。"><meta name="keywords" content="Windows 12, Windows 12網(wǎng)頁(yè)版, 在線Windows 12"><meta name="keywords" content="Windows 12, Windows 12網(wǎng)頁(yè)版, 在線Windows 12">
</head>
部署運(yùn)行(nginx)
將代碼下載到本地后,在D盤(pán)新建文件夾html,然后將源碼放到里面,然后配置nginx的html根目錄即可。nginx配置如下:
server {listen 80;server_name localhost;location / {root D:\html; // 你的代碼目錄index desktop.html;try_files $uri $uri/ /desktop.html;}}
然后瀏覽器訪問(wèn) localhost即可
參考知識(shí)
- github的desktop頁(yè)面寫(xiě)法
- javascript學(xué)習(xí)教程
- CSS學(xué)習(xí)教程
- html學(xué)習(xí)教程
- 基于jquery開(kāi)發(fā)的Windows 12網(wǎng)頁(yè)版