js实现模拟桌面窗口系统

最新推荐文章于 2023-01-13 18:14:03 发布

zxycode007

最新推荐文章于 2023-01-13 18:14:03 发布

阅读量639

点赞数

分类专栏： HTML/CSS/JavaScript/AJAX等前台文章标签： function button input table

本文链接：https://blog.youkuaiyun.com/zxycode007/article/details/7085364

版权

HTML/CSS/JavaScript/AJAX等前台专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍如何使用JavaScript创建一个模拟桌面窗口系统。通过定义DivWindow对象，并使用windowsNode、mainPanel和titleBar等函数，实现了窗口的创建、设置大小、位置以及添加标题和关闭按钮等功能。关闭按钮通过监听点击事件，实现窗口从页面中移除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DivWindow = {

}

function windowsNode(window_id){

   var _titile="";
   var _width=320;
   var _height=240;
   var allowMaxSize = false;

   var _z_index = 1;
   var title_bar
   var w_id = window_id;

   this.getId = function(){
       return w_id;
   }

}

function mainPanel(mainWindow, height,width, x, y){
   var _height = height;
   var _width = width;
   var xPos = x;
   var yPos = y;
}

function titleBar(mainWindow,title){
   var _name =title;
   var _height='25';
    var _main_window = mainWindow;

   var _bar = _main_window.createElement('table');
   _bar.setAttribute('bgcolor','blue');

   var _bar_tr = _bar.createElement('tr');
   _bar_tr.style.height='25px';

   var _bar_td1 = _bar_tr.createElement('td');
   _bar_td1..style.width = '70%';
   _bar_td1.innerHTML = _name;

   var _bar_td2 = _bar_tr.createElement('td');
   _bar_td1.style.width = '30%';
   //关闭按钮
   var closeBTN = _bar_td2.createElement('input');
   closeBTN.setAttribute('type','button');
   closeBTN.setAttribute('name','close'+_main_window.getId());
   closeBTN.onclick = function(){
       var container = document.getElementById('windowsContainer');
       container.removeChild(document.getElementById(_main_window.getId()));
   }
}