Windows9x

ดาวน์โหลดฟรี Windows9x ใน HTML, CSS และ JavaScript

HTML:

<svg style="display:none" version="2.0">
<defs>
<symbol id="windows-icon-16" viewBox="0 0 16 14" fill="none"><path fill="red" d="M3 6H2v2h4V6H4v1H3V6Z"/><path fill="#00F" d="M3 9H2v2h4V9H4v1H3V9Z"/><path fill="#000" d="M0 2h1v2H0z"/><path fill="red" d="M0 5h1v2H0z"/><path fill="#00F" d="M0 8h1v2H0z"/><path fill="#000" d="M0 11h1v2H0zM2 5V3h1v1h1V3h2V2h1V1h2V0h4v1h2v1h1v12h-1v-1h-2v-1H9v1H7v1H2v-2h1v1h1v-1h2V5H2Z"/><path fill="red" d="M8 3v3h1V5h1V2H9v1H8Z"/><path fill="#00F" d="M8 8v3h1v-1h1V7H9v1H8Z"/><path fill="#0F0" d="M13 2h-1v3h1v1h1V3h-1V2Z"/><path fill="#FF0" d="M13 7h-1v3h1v1h1V8h-1V7Z"/></symbol>
<symbol id="default-window-icon-16" viewBox="0 0 16 16" fill="none"><path fill="gray" d="M0 1h16v1H0zM2 5h12v1H2zM0 13h15v1H0zM0 2h1v11H0zM14 2h1v11h-1z"/><path fill="silver" d="M1 2h13v1H1zM1 3h1v10H1z"/><path fill="#000" d="M0 14h16v1H0zM16 2h-1v12h1z"/><path fill="#0000BF" d="M2 3h12v2H2z"/><path fill="#000" d="M8 4h6v1H8z"/><path fill="#fff" d="M8 4h1v1H8zM10 4h1v1h-1zM12 4h1v1h-1zM2 6h12v7H2z"/></symbol>
<symbol id="default-window-icon-32" viewBox="0 0 32 32" fill="none"><path fill="#000" d="M0 30h32v1H0zM31 2h1v28h-1z"/><path fill="gray" d="M0 2h31v1H0zM2 9h27v1H2zM2 10h1v18H2zM0 29h31v1H0zM0 3h1v26H0zM30 3h1v26h-1z"/><path fill="silver" d="M2 3h28v1H2zM2 8h28v1H2zM2 28h28v1H2zM1 3h1v26H1z"/><path fill="silver" d="M29 8h1v20h-1z"/><path fill="#0000BF" d="M2 4h28v4H2z"/><path fill="#000" d="M21 5h9v3h-9z"/><path fill="silver" d="M21 5h2v2h-2zM24 5h2v2h-2zM27 5h2v2h-2z"/><path fill="#fff" d="M3 10h26v18H3z"/></symbol>
<symbol id="minimize-icon" viewBox="0 0 12 10" fill="none"><path fill="#000" d="M2 6h6v2H2z"/></symbol>
<symbol id="maximize-icon" viewBox="0 0 12 10" fill="none"><path fill="#000" fill-rule="evenodd" d="M10 0H1v9h9V0ZM9 2H2v6h7V2Z" clip-rule="evenodd"/></symbol>
<symbol id="restore-icon" viewBox="0 0 12 10" fill="none"><path fill="#000" fill-rule="evenodd" d="M2 3v6h6V6h2V0H4v3H2Zm3 0V2h4v3H8V3H5ZM3 8V5h4v3H3Z" clip-rule="evenodd"/></symbol>
<symbol id="close-icon" viewBox="0 0 12 10" fill="none"><path d="M2 2V1H4V2H5V3H7V2H8V1H10V2H9V3H8V4H7V5H8V6H9V7H10V8H8V7H7V6H5V7H4V8H2V7H3V6H4V5H5V4H4V3H3V2H2Z" fill="black"/></symbol>
<symbol id="programs-icon" viewBox="0 0 24 24" fill="none"><path fill="#D9D9D9" d="M6 8h17v15H6z"/><path fill="#87888F" d="M0 2v13h1V3h17V2h-7V1h-1V0H2v1H1v1H0Z"/><path fill="#fff" d="M1 2v13h1V4h16V3h-7V2h-1V1H2v1H1Z"/><path fill="#FF0" d="M3 1h7v1H3z"/><path fill="#C0C7C8" d="M1 2h10v1H1zM2 4h16v11H2z"/><path fill="#FF0" d="M2 4h1v1H2zM3 5h1v1H3zM7 5h1v1H7zM11 5h1v1h-1zM15 5h1v1h-1zM5 5h1v1H5zM9 5h1v1H9zM14 5h-1v1h1zM18 5h-1v1h1zM3 7h1v1H3zM3 9h1v1H3zM3 11h1v1H3zM3 13h1v1H3zM2 6h1v1H2zM2 8h1v1H2zM2 10h1v1H2zM2 12h1v1H2zM2 14h1v1H2zM4 4h1v1H4zM8 4h1v1H8zM12 4h1v1h-1zM6 4h1v1H6zM10 4h1v1h-1zM14 4h1v1h-1z"/><path fill="#FF0" d="M13 4h-1v1h1zM17 4h-1v1h1zM4 6h1v1H4zM8 6h1v1H8zM12 6h1v1h-1zM6 6h1v1H6zM10 6h1v1h-1zM14 6h1v1h-1z"/><path fill="#FF0" d="M13 6h-1v1h1zM17 6h-1v1h1zM4 8h1v1H4zM4 10h1v1H4zM4 12h1v1H4zM4 14h1v1H4z"/><path fill="#000" d="M5 7h19v17H5z"/><path fill="#87888F" d="M5 7h18v16H5z"/><path fill="#C0C7C8" d="M6 8h17v15H6z"/><path fill="#0000A8" d="M7 9h9v2H7z"/><path fill="#000" d="M16 9h6v2h-6z"/><path fill="#fff" d="M16 9h1v1h-1zM18 9h1v1h-1zM20 9h1v1h-1zM7 12h15v10H7z"/><path fill="#87888F" d="M8 19h3v1H8zM13 19h3v1h-3zM18 19h3v1h-3z"/><path fill="#A80057" d="M8 15v2h1v1h1v-1h1v-3H9v1H8Z"/><path fill="red" d="M9 14h1v3H9v-1H8v-1h1v-1Z"/><path fill="#FF0" d="M9 15h1v1H9z"/><path fill="#C0C7C8" d="M8 17h1v1H8z"/><path fill="#A857A8" d="M12 17h4v1h-4z"/><path fill="#C0C7C8" d="M13 17h1v1h-1z"/><path fill="#00F" d="M13 17v-3h1v1h2v1h-1v1h-2Z"/><path fill="#0FF" d="M13 15h1v1h-1z"/><path fill="#C0C7C8" d="M15 16h1v1h-1z"/><path fill="#00A857" d="M18 18h3v-3h-1v-1h-1v2h-1v2Z"/><path fill="#0F0" d="M19 16h1v1h-1z"/><path fill="#00F" d="M20 16h1v1h-1z"/><path fill="#A8A857" d="M0 15h5v1H0z"/><path fill="#000" d="M1 16h4v1H1zM18 7V3h1v1h1v3h-2Z"/><path fill="#A8A857" d="M18 4h1v3h-1z"/></symbol>
<symbol id="arrow-right" viewBox="0 0 4 7"><path fill="currentColor" d="M0 0v7h1V6h1V5h1V4h1V3H3V2H2V1H1V0H0Z"/></symbol>
</defs>
</svg>
<div class="desktop">
<template id="new-window">
<div class="window" style="width:200px;height:200px;top:100px;left:100px">
<div class="frame">
<div class="title-bar">
<svg class="icon" width="16" height="16">
<use href="/th#default-window-icon-16" />
</svg>
<div class="title">Window</div>
<button class="button minimize">
<div class="bevel">
<svg width="12" height="10"><use href="/th#minimize-icon"/></svg>
</div>
</button>
<button class="button maximize">
<div class="bevel">
<svg class="maximize-icon" width="12" height="10"><use href="/th#maximize-icon"/></svg>
<svg class="restore-icon" width="12" height="10"><use href="/th#restore-icon"/></svg>
</div>
</button>
<button class="button close">
<div class="bevel">
<svg width="12" height="10"><use href="/th#close-icon"/></svg>
</svg>
</div>
</button>
</div>
<div class="content-bevel">
<div class="content">
<h1>Hello, World!</h1>
</div>
</div>
</div>
<div class="grab n-grab"></div>
<div class="grab ne-grab"></div>
<div class="grab e-grab"></div>
<div class="grab se-grab"></div>
<div class="grab s-grab"></div>
<div class="grab sw-grab"></div>
<div class="grab w-grab"></div>
<div class="grab nw-grab"></div>
</div>
</template>
<template id="new-task-bar-item">
<div class="task-bar-item">
<div class="bevel">
<svg class="icon" width="16" height="16">
<use href="/th#default-window-icon-16" />
</svg>
<div class="title">Window</div>
</div>
</div>
</template>
<div class="short-cuts">
<div class="short-cut">
<svg class="icon" width="32" height="32"><use href="/th#default-window-icon-32"/></svg>
<div class="text">New Window</div>
</div>
</div>
<div class="task-bar">
<div class="bevel">
<div class="start-menu hidden">
<div class="side-logo">
<div class="text">
<span class="windows">Windows</span><span class="version">9X</span>
</div>
</div>
<div class="menu">
<ul>
<li>
<svg class="icon" width="24" height="24">
<use href="/th#programs-icon" />
</svg>
<div class="text">
<span class="underline">P</span>rograms
</div>
<svg class="arrow" width="4" height="6" version="2.0">
<use href="/th#arrow-right"/>
</svg>
</li>
</ul>
</div>
</div>
<button class="start-button">
<div class="bevel">
<svg class="icon" width="16" height="14">
<use href="/th#windows-icon-16"/>
</svg>
Start
</div>
</button>
<div class="task-bar-items"></div>
<div class="notification-area">
<div class="clock"></div>
</div>
</div>
</div>
</div>

คุณอาจต้องการดาวน์โหลด: เครื่องมือสร้างรหัสผ่านแบบสุ่ม — HTML | ซีเอสเอส | จส

ซีเอสเอส:

html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #54A8A8;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 12px;
width: 100%;
height: 100%;
overflow: hidden;
}
*, *::before, *::after {
box-sizing: inherit;
}
svg {
display: block;
}
.desktop {
display: grid;
user-select: none;
position: relative;
width: 100%;
height: 100%;
}
.short-cuts {
margin-bottom: 28px;
}
.short-cut {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 2px;
width: 72px;
.icon {
margin-bottom: 6px;
}
.text {
text-align: center;
color: #FFFFFF;
border: 1px solid transparent;
}
&.selected {
.text {
background-color: #0000A8;
border: 1px dotted #FCFC00;
}
}
}
.window {
position: absolute;
border-top: 1px solid #DFDFDF;
border-left: 1px solid #DFDFDF;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
&.minimized {
display: none;
}
.restore-icon {
display: none;
}
&.maximized {
top: 0!important;
left: 0!important;
width: 100%!important;
height: calc(100% - 28px)!important;
border-top: 0;
border-left: 0;
border-bottom: 0;
border-right: 0;
.frame {
border-top: 0;
border-left: 0;
border-bottom: 0;
border-right: 0;
padding: 0;
}
.maximize-icon {
display: none;
}
.restore-icon {
display: block;
}
}
.frame {
background: #BFBFBF;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #7F7F7F;
border-right: 1px solid #7F7F7F;
padding: 2px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.content-bevel {
border-top: 1px solid #7F7F7F;
border-left: 1px solid #7F7F7F;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
flex-grow: 1;
height: calc(100% - 20px);
}
.content {
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #DFDFDF;
border-right: 1px solid #DFDFDF;
background-color: #FFFFFF;
height: 100%;
padding: 0 8px;
overflow: auto;
}
&.active {
.title-bar {
background-color: #0000A8;
.title {
color: #FFFFFF;
}
}
}
.grab {
position: absolute;
}
.n-grab {
top: -1px;
left: 3px;
right: 3px;
height: 4px;
cursor: ns-resize;
}
.ne-grab {
top: -1px;
right: -1px;
width: 4px;
height: 4px;
cursor: nesw-resize;
}
.e-grab {
top: 3px;
right: -1px;
bottom: 3px;
width: 4px;
cursor: ew-resize;
}
.se-grab {
bottom: -1px;
right: -1px;
width: 4px;
height: 4px;
cursor: nwse-resize;
}
.s-grab {
bottom: -1px;
left: 3px;
right: 3px;
height: 4px;
cursor: ns-resize;
}
.sw-grab {
bottom: -1px;
left: -1px;
width: 4px;
height: 4px;
cursor: nesw-resize;
}
.w-grab {
left: -1px;
top: 3px;
bottom: 3px;
width: 4px;
cursor: ew-resize;
}
.nw-grab {
top: -1px;
left: -1px;
width: 4px;
height: 4px;
cursor: nwse-resize;
}
}
.title-bar {
background-color: #7F7F7F;
padding: 1px 2px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
.icon {
}
.title {
margin-left: 3px;
flex-grow: 1;
color: #BFBFBF;
font-weight: bold;
}
.button {
padding: 0;
background: #BFBFBF;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
.bevel {
border-top: 1px solid #DFDFDF;
border-left: 1px solid #DFDFDF;
border-bottom: 1px solid #7F7F7F;
border-right: 1px solid #7F7F7F;
}
&.close {
margin-left: 2px;
}
&:active {
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
svg {
position: relative;
top: 1px;
left: 1px;
}
.bevel {
border-top: 1px solid #7F7F7F;
border-left: 1px solid #7F7F7F;
border-bottom: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
}
}
}
&.animating {
position: absolute;
transition: all 200ms linear;
background-color: #0000A8;
z-index: 1000;
.title {
color: #FFFFFF;
}
.button {
display: none;
}
}
}
.task-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #C0C7C8;
height: 28px;
border-top: 1px solid #C0C7C8;
z-index: 1000;
> .bevel {
border-top: 1px solid #FFFFFF;
padding: 2px;
display: flex;
}
.start-button {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
background-color: #C0C7C8;
display: flex;
padding: 0;
font-size: 11px;
.bevel {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #87888F;
border-right: 1px solid #87888F;
background-color: #C0C7C8;
padding: 2px 3px 3px 3px;
}
.icon {
margin-right: 3px;
}
&.active {
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
.bevel {
border-top: 1px solid #87888F;
border-left: 1px solid #87888F;
padding: 2px 2px 2px 3px;
}
}
}
.start-menu {
position: absolute;
bottom: 26px;
left: 2px;
background-color: #C0C7C8;
display: flex;
padding: 2px;
border-top: 1px solid #C0C7C8;
border-left: 1px solid #C0C7C8;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #87888F;
border-right: 1px solid #87888F;
}
&.hidden {
display: none;
}
.side-logo {
background-color: #87888F;
width: 21px;
min-height: 150px;
.text {
font-size: 20px;
transform: rotate(-90deg) translate3d(-120px, -1px, 0);
}
.windows {
color: #C0C7C8;
font-weight: 900;
}
.version {
color: #FFFFFF;
}
}
.menu {
ul {
list-style: none;
margin: 0;
padding: 0;
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 6px;
.text {
flex-grow: 1;
min-width: 74px;
}
.icon {
margin-right: 6px;
}
&:hover {
background-color: #0000A8;
color: #FFFFFF;
}
}
}
.underline {
text-decoration: underline;
}
}
}
.task-bar-items {
margin-left: 1px;
display: flex;
justify-content: flex-start;
flex-grow: 1;
}
.task-bar-item {
width: 157px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
margin-left: 3px;
.bevel {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
border-bottom: 1px solid #87888F;
border-right: 1px solid #87888F;
background-color: #C0C7C8;
padding-left: 3px;
}
.icon {
margin-right: 4px;
}
&.active {
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
.bevel {
position: relative;
border-top: 1px solid #87888F;
border-left: 1px solid #87888F;
border-bottom: 1px solid #C0C7C8;
border-right: 1px solid #C0C7C8;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='none'><path fill='%23fff' d='M0 0h2v2H0z'/><path fill='%23C0C7C8' d='M0 0h1v1H0zM1 1h1v1H1z'/></svg>");
background-repeat: repeat;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
width: 100%;
background-color: #FFFFFF;
}
}
}
}
.notification-area {
border-top: 1px solid #87888F;
border-left: 1px solid #87888F;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
padding: 1px;
.clock {
margin-right: 10px;
min-width: 50px;
text-align: right;
}
}
}
@mixin scroll-border {
border-top: 1px solid #C0C7C8;
border-left: 1px solid #C0C7C8;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
box-shadow: inset -1px -1px 0 0 #87888F, inset 1px 1px 0 0 #FFFFFF;
}
::-webkit-scrollbar {
width: 16px;
height: 16px;
}
::-webkit-scrollbar-thumb {
@include scroll-border;
width: 16px;
height: 16px;
background-color: #C0C7C8;
z-index: 1;
}
::-webkit-scrollbar-track {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='none'><path fill='%23fff' d='M0 0h2v2H0z'/><path fill='%23C0C7C8' d='M0 0h1v1H0zM1 1h1v1H1z'/></svg>");
background-repeat: repeat;
}
::-webkit-scrollbar-corner {
background-color: #C0C7C8;
}
::-webkit-scrollbar-button {
@include scroll-border;
display: block;
width: 16px;
height: 16px;
background-color: #C0C7C8;
background-repeat: no-repeat;
&:horizontal:decrement {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'><path fill='%23000' d='M4 6v1h1v1h1v1h1v1h1V3H7v1H6v1H5v1H4Z'/></svg>");
}
&:horizontal:increment {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'><path fill='%23000' d='M9 7V6H8V5H7V4H6V3H5v7h1V9h1V8h1V7h1Z'/></svg>");
}
&:vertical:decrement {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'><path fill='%23000' d='M7 5H6v1H5v1H4v1H3v1h7V8H9V7H8V6H7V5Z'/></svg>");
}
&:vertical:increment {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'><path fill='%23000' d='M6 9h1V8h1V7h1V6h1V5H3v1h1v1h1v1h1v1Z'/></svg>");
}
&:active {
border-top: 1px solid #87888F;
border-left: 1px solid #87888F;
border-bottom: 1px solid #87888F;
border-right: 1px solid #87888F;
box-shadow: none;
background-position: 1px 1px;
}
&:horizontal:increment:start { display: none; }
&:horizontal:decrement:end { display: none; }
&:vertical:increment:start { display: none; }
&:vertical:decrement:end { display: none; }
}

จาวาสคริปต์:

let desktop = document.querySelector('.desktop');
let windowTemplate = document.querySelector('#new-window');
let shortCutContainer = document.querySelector('.short-cuts');
let shortCuts = document.querySelectorAll('.short-cut');
let startButton = document.querySelector('.start-button');
let startMenu = document.querySelector('.start-menu');
let taskBarItems = document.querySelector('.task-bar-items');
let taskBarItemTemplate = document.querySelector('#new-task-bar-item');
let clock = document.querySelector('.clock');
shortCutContainer.addEventListener('mousedown', ({ target }) => {
if (target !== shortCutContainer) return;
deselectAll();
});
function deselectAllIcons() {
for (let shortCut of shortCuts) {
shortCut.classList.remove('selected');
}
}
function deselectAllWindows() {
windows.forEach(({ win, taskBarItem }) => {
win.classList.remove('active');
taskBarItem.classList.remove('active');
});
}
function deselectAll() {
deselectAllIcons();
deselectAllWindows();
}
function openStartMenu() {
deselectAll();
startButton.classList.add('active');
startMenu.classList.remove('hidden');
onClickOutside = event => {
if (!startMenu.contains(event.target)) {
closeStartMenu();
}
window.removeEventListener('mousedown', onClickOutside);
}
setTimeout(() => window.addEventListener('mousedown', onClickOutside, { passive: true }), 1);
}
function closeStartMenu() {
startButton.classList.remove('active');
startMenu.classList.add('hidden');
}
startButton.addEventListener('mousedown', (event) => {
if (startButton.classList.contains('active')) {
closeStartMenu();
} else {
openStartMenu();
}
});
function setClock() {
let now = new Date();
let hours24 = now.getHours();
let hours12 = hours24 > 12 ? hours24 - 12 : hours24;
clock.textContent = `${hours12}:${now.getMinutes()} ${hours24 >= 12 ? 'PM' : 'AM'}`;
}
setClock();
setInterval(setClock, 1000);
for (let shortCut of shortCuts) {
shortCut.addEventListener('click', () => selectShortCut(shortCut));
shortCut.addEventListener('dblclick', () => execShortCut(shortCut));
}
function selectShortCut(shortCut) {
deselectAllWindows();
for (let sc of shortCuts) {
if (sc === shortCut) {
sc.classList.add('selected');
} else {
sc.classList.remove('selected');
}
}
}
function execShortCut(shortCut) {
createWindow();
}
let windowIndex = 1;
let windows = [];
function dragMove(win, xMove, yMove, xSize, ySize) {
let mouseX, mouseY;
return event => {
if (win.classList.contains('maximized')) return;
mouseX = event.screenX;
mouseY = event.screenY;
const onMove = event => {
let x = event.screenX;
let y = event.screenY;
let dx = x - mouseX;
let dy = y - mouseY;
let style = getComputedStyle(win);
win.style.left = `${parseInt(style.left, 10) + dx * xMove}px`;
win.style.top = `${parseInt(style.top, 10) + dy * yMove}px`;
win.style.width = `${parseInt(style.width, 10) + dx * xSize}px`;
win.style.height = `${parseInt(style.height, 10) + dy * ySize}px`;
mouseX = x;
mouseY = y;
}
const onUp = event => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp);
}
window.addEventListener('mousemove', onMove, { passive: true });
window.addEventListener('mouseup', onUp, { passive: true });
}
}
function createWindow() {
let win = windowTemplate.content.cloneNode(true);
win = win.querySelector('.window');
desktop.appendChild(win);
let taskBarItem = taskBarItemTemplate.content.cloneNode(true);
taskBarItem = taskBarItem.querySelector('.task-bar-item');
taskBarItems.appendChild(taskBarItem);
let windowObject = { win, taskBarItem };
windows.push(windowObject);
win.querySelector('.title-bar .minimize').addEventListener('click', () => minimizeWindow(windowObject));
win.querySelector('.title-bar .maximize').addEventListener('click', () => toggleMaximize(windowObject));
win.querySelector('.title-bar .close').addEventListener('click', () => closeWindow(windowObject));
let titleBarText = win.querySelector('.title-bar .title');
let title = `Window #${windowIndex++}`;
titleBarText.textContent = title;
taskBarItem.querySelector('.title').textContent = title;
titleBarText.addEventListener('mousedown', dragMove(win, 1, 1, 0, 0));
titleBarText.addEventListener('dblclick', () => toggleMaximize(windowObject))
win.querySelector('.n-grab').addEventListener('mousedown', dragMove(win, 0, 1, 0, -1));
win.querySelector('.ne-grab').addEventListener('mousedown', dragMove(win, 0, 1, 1, -1));
win.querySelector('.e-grab').addEventListener('mousedown', dragMove(win, 0, 0, 1, 0));
win.querySelector('.se-grab').addEventListener('mousedown', dragMove(win, 0, 0, 1, 1));
win.querySelector('.s-grab').addEventListener('mousedown', dragMove(win, 0, 0, 0, 1));
win.querySelector('.sw-grab').addEventListener('mousedown', dragMove(win, 1, 0, -1, 1));
win.querySelector('.w-grab').addEventListener('mousedown', dragMove(win, 1, 0, -1, 0));
win.querySelector('.nw-grab').addEventListener('mousedown', dragMove(win, 1, 1, -1, -1));
win.addEventListener('mousedown', () => selectWindow(windowObject), { passive: true });
taskBarItem.addEventListener('mousedown', () => {
if (windowObject.win.classList.contains('active')) {
minimizeWindow(windowObject);
} else {
selectWindow(windowObject);
}
});
addContent(windowObject);
selectWindow(windowObject);
}
function toggleMaximize(windowObject) {
if (windowObject.win.classList.contains('maximized')) {
unmaximizeWindow(windowObject);
} else {
maximizeWindow(windowObject);
}
}
function selectWindow(windowObject) {
deselectAllIcons();
windows = windows.filter(w => w !== windowObject);
for (let i = 0; i < windows.length; i++) {
let w = windows[i].win;
let t = windows[i].taskBarItem;
w.classList.remove('active');
w.style.zIndex = i;
t.classList.remove('active');
}
windowObject.win.classList.add('active');
windowObject.taskBarItem.classList.add('active');
windowObject.win.style.zIndex = windows.length;
if (windowObject.win.classList.contains('minimized')) {
unminimizeWindow(windowObject);
}
windows.push(windowObject);
}
function closeWindow(windowObject) {
windows = windows.filter(w => w !== windowObject);
windowObject.win.remove();
windowObject.taskBarItem.remove();
}
function beforeMinimize({ win }, animatedTitleBar) {
animatedTitleBar.style.top = `${parseInt(win.style.top, 10)+4}px`;
animatedTitleBar.style.left = `${parseInt(win.style.left, 10)+4}px`;
animatedTitleBar.style.width = `${parseInt(win.style.width, 10)-8}px`;
}
function afterMinimize({ taskBarItem }, animatedTitleBar) {
let taskBarRect = taskBarItem.getBoundingClientRect();
animatedTitleBar.style.top = `${taskBarRect.top}px`;
animatedTitleBar.style.left = `${taskBarRect.left}px`;
animatedTitleBar.style.width = `${taskBarRect.width}px`;
}
function afterMaximize({ taskBarItem }, animatedTitleBar) {
animatedTitleBar.style.top = `0px`;
animatedTitleBar.style.left = `0px`;
animatedTitleBar.style.width = `100%`;
}
function minimizeWindow(windowObject) {
let titleBar = windowObject.win.querySelector('.title-bar');
let animatedTitleBar = titleBar.cloneNode(true);
if (windowObject.win.classList.contains('maximized')) {
afterMaximize(windowObject, animatedTitleBar);
} else {
beforeMinimize(windowObject, animatedTitleBar);
}
animatedTitleBar.classList.add('animating');
desktop.appendChild(animatedTitleBar);
let taskBarRect = windowObject.taskBarItem.getBoundingClientRect();
setTimeout(() => {
afterMinimize(windowObject, animatedTitleBar);
}, 1);
animatedTitleBar.addEventListener('transitionend', () => {
windowObject.win.classList.add('minimized');
windowObject.win.classList.remove('active');
windowObject.taskBarItem.classList.remove('active');
animatedTitleBar.remove();
// TODO: select next non-minimized window
});
}
function unminimizeWindow(windowObject) {
let titleBar = windowObject.win.querySelector('.title-bar');
let animatedTitleBar = titleBar.cloneNode(true);
afterMinimize(windowObject, animatedTitleBar);
animatedTitleBar.classList.add('animating');
desktop.appendChild(animatedTitleBar);
setTimeout(() => {
if (windowObject.win.classList.contains('maximized')) {
afterMaximize(windowObject, animatedTitleBar);
} else {
beforeMinimize(windowObject, animatedTitleBar);
}
}, 1);
animatedTitleBar.addEventListener('transitionend', () => {
windowObject.win.classList.remove('minimized');
animatedTitleBar.remove();
});
}
function maximizeWindow(windowObject) {
let titleBar = windowObject.win.querySelector('.title-bar');
let animatedTitleBar = titleBar.cloneNode(true);
beforeMinimize(windowObject, animatedTitleBar);
animatedTitleBar.classList.add('animating');
desktop.appendChild(animatedTitleBar);
let taskBarRect = windowObject.taskBarItem.getBoundingClientRect();
setTimeout(() => {
afterMaximize(windowObject, animatedTitleBar);
}, 1);
animatedTitleBar.addEventListener('transitionend', () => {
windowObject.win.classList.add('maximized');
animatedTitleBar.remove();
});
}
function unmaximizeWindow(windowObject) {
let titleBar = windowObject.win.querySelector('.title-bar');
let animatedTitleBar = titleBar.cloneNode(true);
afterMaximize(windowObject, animatedTitleBar);
animatedTitleBar.classList.add('animating');
desktop.appendChild(animatedTitleBar);
let taskBarRect = windowObject.taskBarItem.getBoundingClientRect();
setTimeout(() => {
beforeMinimize(windowObject, animatedTitleBar);
}, 1);
animatedTitleBar.addEventListener('transitionend', () => {
windowObject.win.classList.remove('maximized');
animatedTitleBar.remove();
});
}
function addContent({ win }) {
let content = win.querySelector('.content');
let numberOfSections = Math.ceil(Math.random()*5)+5;
let lastSectionTag = null;
for (let i = 0; i < numberOfSections; i++) {
if (i > 0 && lastSectionTag !== 'img' && Math.random() > 0.5) {
lastSectionTag = 'p';
let img = document.createElement('img');
let width = Math.round((Math.random()*300)+300);
let height = Math.round((Math.random()*200)+200);
img.src = `https://loremflickr.com/${width}/${height}`;
content.appendChild(img);
lastSectionTag = 'img';
} else {
let p = document.createElement('p');
p.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
content.appendChild(p);
}
}
}
createWindow();

ใช้ข้อมูลโค้ด HTML, CSS และ JavaScript, AllWebCodes.com

เสร็จแล้ว! และเพลิดเพลินไปกับตัวอย่าง Windows9x

ดาวน์โหลดเลย