html写了一个模拟Windows系统的应用弹窗程序

CZ工作室官方

于 2023-11-20 19:53:06 发布

阅读量258

点赞数 1

文章标签： html 前端 windows

本文链接：https://blog.csdn.net/chenzhi0122/article/details/134517385

版权

本来打算做一个模拟Windwos系统（就像网上流行的那个win12），结果呢发现有些难

写了如下代码，发现一些bug：
放大按钮问题

等

很多

先放上代码，看看有没有大佬帮我看看，也供大家学习（学习，但是别用到哪去）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>写啥呢？不写了</title>
<style>
    #desktop {
        width: 100%;
        /*height: calc(100vh - 10vh);*/
        height: 95%;
        background-color: #f1f1f1;
        padding: 20px;
    }
    #dock {
        width: 100%;
        /*height: 10vh;*/
        height: 5%;
        background-color: #333;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px;
        z-index: 999;
    }
    #dock a {
        color: #ffffff;
        margin-right: 10px;
    }
    .window {
        position: absolute;
        width: 300px;
        height: 200px;
        background-color: #ffffff;
        border: 1px solid #ccc;
        resize: both;
        overflow: auto;
    }
    .window .title-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;
        background-color: #f1f1f1;
        padding: 5px;
    }
    .window .content {
        padding: 10px;
        resize: both;
    }
    .fullscreen {
        width: 100%;
        /*height: calc(100% - 1px);*/
        height: 95%;
        /*top: 0px;
        left: 0px;
        position: absolute;*/
        z-index: 99;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .resize-handle {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #333; 
        bottom: 0;
        right: 0;
        cursor: se-resize;
    }
</style>

</head>
<body>
<div id="desktop">
    <a href="#" onclick="openWindow('window1')">应用窗口1</a>
    <a href="#" onclick="openWindow('window2')">应用窗口2</a>
    <a href="#" onclick="openWindow('window3')">应用窗口3</a>
</div>
<div id="dock">
    <!-- 应用窗口超链接 -->
</div>

<script>
    var windowMap = {};

    function openWindow(windowId) {
        var dock = document.getElementById('dock');
        var link = document.createElement('a');
        link.href = '#' + windowId;
        link.textContent = '应用窗口';
        dock.appendChild(link);

        var windowDiv = document.createElement('div');
        windowDiv.id = windowId;
        windowDiv.className = 'window';
        windowDiv.style.left = (Math.random() * 500) + 'px';
        windowDiv.style.top = (Math.random() * 300) + 'px';

        var titleBar = document.createElement('div');
        titleBar.className = 'title-bar';

        var fullscreenBtn = document.createElement('button');
        fullscreenBtn.textContent = '「」';
        fullscreenBtn.onclick = function () {
            if (windowDiv.classList.contains('fullscreen')) {
                windowDiv.classList.remove('fullscreen');
                fullscreenBtn.textContent = '「」';
            } else {
                windowDiv.classList.add('fullscreen');
                fullscreenBtn.textContent = '」「';
            }
        };

        var hideBtn = document.createElement('button');
        hideBtn.textContent = '-';
        hideBtn.onclick = function () {
            windowDiv.style.display = 'none';
        };

        var closeBtn = document.createElement('button');
        closeBtn.textContent = '×';
        closeBtn.onclick = function () {
            dock.removeChild(link);
            windowDiv.parentNode.removeChild(windowDiv);
        };
        titleBar.appendChild(fullscreenBtn);
        titleBar.appendChild(hideBtn);
        titleBar.appendChild(closeBtn);

        var content = document.createElement('div');
        content.className = 'content';
        // 自定义每个窗口的内容
        content.innerHTML = getCustomContent(windowId);

        windowDiv.appendChild(titleBar);
        windowDiv.appendChild(content);
        document.body.appendChild(windowDiv);

        // 初始化拖动窗口
        dragElement(windowDiv);

        // 存储窗口信息
        windowMap[windowId] = {
            link: link,
            windowDiv: windowDiv
        };
    }

    function getCustomContent(windowId) {
        // 根据窗口ID返回自定义内容
        switch (windowId) {
            case 'window1':
                return '<h3>窗口1的内容</h3>';
            case 'window2':
                return '<p>这是窗口2的内容</p>';
            case 'window3':
                return '<img src="image.jpg" alt="图像">';
            default:
                return '';
        }
    }

    function dragElement(el) {
        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        el.querySelector('.title-bar').onmousedown = dragMouseDown;

        function dragMouseDown(e) {
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            el.style.top = (el.offsetTop - pos2) + "px";
            el.style.left = (el.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    window.onhashchange = function () {
        var hash = window.location.hash;
        var windowId = hash.replace('#', '');
        var windowInfo = windowMap[windowId];
        if (windowInfo) {
            windowInfo.windowDiv.style.display = 'block';
        }
    };
</script>
</body>
</html>