忙活了大半天，公布一个模拟Portlet的js小程序

关注

原创最新推荐文章于 2026-04-26 08:45:00 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

js写的心愿墙小程序-模拟数据库获取数据这个练习是看网上的视频自己又写了一遍，对一些知识点进行的总结，从基础到高级都有讲解，有需要的可以看一下。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>心愿墙</title> &l 阅读详情

<html>
<head>
<title>PortletWin</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type='text/css'>
<!--
body{font-size:12px;}
a:visited{text-decoration:none;color:slategray;}
a:hover{text-decoration:underline;color:slategray;}
a:link{text-decoration:none;color:slategray;}

.win-function{
   position:relative;
   left:0;
   width:12;
   border-width:0px;
   color:white;
   font-family:webdings;
}
-->
</style>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0; //鼠标位置
var x1=0,y1=0; //窗体位置
var offx=5,offy=5; //shadow和win的位差
var moveable=false; //mousemove
var xstart=false, ystart=false;
var hover='orange',normal='#336699';//color;
var index=10000;//z-index;

//拖动，参数obj可能为标题栏或窗体;
var win,shadow;
function getHandler(obj){
   win = obj.parentNode;
   shadow = win.nextSibling;
}
function startDrag(obj){//标识active
   if (event.button==1){
      obj.setCapture();
      //定义对象;
      getHandler(obj);
      //记录鼠标和层位置;
      x0 = event.clientX;
      y0 = event.clientY;
      x1 = parseInt(win.style.left);
      y1 = parseInt(win.style.top);
      //改变风格;
      win.children[0].style.backgroundColor = hover;
      win.style.borderColor = hover;
      win.children[1].style.color = hover;
      shadow.style.left = x1 + offx;
      shadow.style.top = y1 + offy;
      moveable = true;
   }
}
function drag(obj){
   if (moveable){
      win.style.left = x1 + event.clientX - x0;
      win.style.top = y1 + event.clientY - y0;
      shadow.style.left = parseInt(win.style.left) + offx;
      shadow.style.top = parseInt(win.style.top) + offy;
   }
}
function stopDrag(obj){
   getHandler(obj);
   win.style.borderColor     = normal;
   win.children[0].style.backgroundColor = normal;
   win.children[1].style.color    = normal;
   shadow.style.left = win.style.left;
   shadow.style.top = win.style.top;
   obj.releaseCapture();
   obj.style.cursor = "default";
   moveable = false;
}

//改变大小
function alterCursor(obj){
   xstart = event.clientX >= parseInt(obj.style.left)+parseInt(obj.offsetWidth) - 5;
   ystart = event.clientY >= parseInt(obj.style.top)+parseInt(obj.offsetHeight) + 20;
   if (xstart && ystart){
      obj.style.cursor = "se-resize";
   }else if (xstart){
      obj.style.cursor = "w-resize";
   }else if (ystart){
      obj.style.cursor = "s-resize";
   }else{
      obj.style.cursor = "default";
   }
}
function startResize(obj){
   alterCursor(obj);
   if (xstart || ystart){
      obj.fixedWidth = obj.offsetWidth;
      obj.fixedHeight = obj.offsetHeight;
      startDrag(obj);
   }
}
function resize(obj){
   if (moveable){
      if (xstart){
         var width = parseInt(obj.fixedWidth) + event.clientX - x0;
         obj.style.width = Math.max(width, 0);
         win.style.width = obj.offsetWidth + 2*2;
         win.children[0].style.width = obj.offsetWidth;
      }
      if (ystart){
         var height = parseInt(obj.fixedHeight) + event.clientY - y0;
         obj.style.height = Math.max(height, 0);
         win.style.height = obj.offsetHeight + 20 + 2*2;
      }
      drawIcons();
      shadow.style.width = win.style.width;
      shadow.style.height = win.style.height;
   }
}

//获得焦点;
function getFocus(obj){
   if (obj.style.zIndex!=index){
      index = index + 2;
      obj.style.zIndex = index;
      obj.nextSibling.style.zIndex = index-1;
   }
}

/**
* 最小化;
* obj：标题栏的一个小图标
*/
function min(obj){
   var win = obj.parentNode.parentNode;
   var shadow = win.nextSibling;
   var win_title = obj.parentNode;
   var win_body = win_title.nextSibling;

   win.style.height = parseInt(win_title.style.height) + 2*2;
   if (obj.innerHTML == "2"){ //还原
      win.style.height = parseInt(win_body.style.height) + parseInt(win.style.height);
      win_body.style.display = "block";
      obj.innerHTML = "0";
   }else{
      obj.innerHTML = "2";
      win_body.style.display = "none";
   }
   shadow.style.height = win.style.height;
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg){
   index = index+2;
   this.id      = id;
   this.width   = w;
   this.height = h;
   this.left    = l;
   this.top     = t;
   this.zIndex = index;
   this.title   = tit;
   this.message = msg;
   this.obj     = null;
   this.bulid   = bulid;
   this.bulid(); //调用方法
}
//初始化;
function bulid(){
   var str = "<div id='xMsg" + this.id
     + "' style='z-index:" + this.zIndex + ";"
     + "width:" + this.width + ";height:" + this.height + ";left:" + this.left + ";top:" + this.top + ";"
     + "background-color:" + normal + ";"
     + "color:" + normal + ";"
     + "font-size:8pt;font-family:Tahoma;"
     + "position:absolute;"
     + "cursor:default;"
     + "border:2px solid " + normal + ";' "
     + "onmousedown='getFocus(this)'>"
//标题栏
       + "<div style='background-color:" + normal + ";"
       + "width:" + (this.width-2*2) + ";height:20;color:white;font-weight:bold' "
       + "onmousedown='startDrag(this)' onmouseup='stopDrag(this)' onmousemove='drag(this)' "
       + "ondblclick='min(this.childNodes[1])'>"
         + "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
         + "<span class='win-function' onclick='min(this)'>0</span>"
         + "<span class='win-function' onclick='ShowHide()'>r</span>"
       + "</div>"
   //窗体显示区域
       + "<div style='width:100%;height:" + (this.height-20-2*2) + ";left:"+this.left+";top="+(this.top-20-2)
       + ";background-color:white;line-height:14px;word-break:break-all;padding:3px;"
       + "' onmouseover='alterCursor(this)' onmousedown='startResize(this)' onmousemove='alterCursor(this);resize(this)' onmouseup='stopDrag(this)'>"
       + this.message + "</div>"
    + "</div>"
//窗体背景
    + "<div id='xMsg" + this.id + "bg' style='"
    + "width:" + this.width + ";height:" + this.height + ";top:" + this.top + ";left:" + this.left + ";"
    + "z-index:" + (this.zIndex-1) + ";position:absolute;background-color:black;"
    + "filter:alpha(opacity=30);'></div>"
document.body.insertAdjacentHTML("beforeEnd",str);
}
function drawIcons(){
   var title = win.children[0];
   while (title.children.length > 1){
      title.removeChild(title.lastChild);
   }
   title.insertAdjacentHTML("beforeEnd","<span class='win-function' onclick='min(this)'>0</span>");
   title.insertAdjacentHTML("beforeEnd","<span class='win-function' onclick='ShowHide()'>r</span>");
   title.children[0].style.width = parseInt(title.style.width) - 24;
}
//显示隐藏窗口
function ShowHide(){
   if (arguments.length > 0){
      win = document.getElementById("xMsg"+arguments[0]);
   }else{
      win = event.srcElement.parentNode.parentNode;
   }
   var bdisplay = (win.style.display==null || win.style.display=="none") ? "block" : "none";
   win.style.display = bdisplay;
   win.nextSibling.style.display = bdisplay;
}
//-->
</script>