老裴帮助关于右上角消息提示框的小练习 _Web前端

老裴帮助关于右下角消息提示框的小练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
??? <title>右下角信息提示</title>
?
??? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
??? <meta http-equiv="description" content="this is my page">
??? <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
? div{
? margin:0px;
? }
? div.border{
? width:200px;
? height:auto;
? border:1px solid green;
? font-size:14px;
? color:red;
? background-color:#CFDEF4;
? }
?
? div.title{
??? font-size:12px;
?width:200px;
?height:20px;
?color:blue;
?border-bottom:1px solid green;
?cursor: hand;
?font-weight:bold;
?text-indent:8px;
? }
? div.content{
?width:200px;
?height:100px;
?text-align:center;
? }
?
? span.tip{
?float:left;
?text-align:left;
?text-indent:8px;
?padding:3px;
?margin-right:50px;
?color:#0C53C5;
? }
? span.Min{
? ?padding:3px;
?float:left;
?color:Red;
?cursor: pointer;
?font-weight:bold;
? }
? span.Close{
? ?padding:3px;
?float:left;
?color:Red;
?cursor: pointer;
?font-weight:bold;
? }
</style>
? </head>
? <script type="text/javascript">
? var divHeight,divWidth,divTop,divLeft,docHeight,docWidth,i = 0;
? var divContentHeight = 100,divTitleHeight= 20;
? var msgPop = new Object();
? msgPop.id ="msgPop";
? msgPop.obj = function (){
? ?? return document.getElementById(msgPop.id);
? }
? /**
? 创建消息提示框
? */
? msgPop.createInstance = function(divMsg){
? ?if(msgPop.obj()){
? ? var pNode = msgPop.obj().parentNode;
? ? pNode.removeChild(msgPop.obj());
? ?}
?var objDiv = document.createElement("Div");
?objDiv.id = msgPop.id;
??? objDiv.style.width="200px";
??? objDiv.style.visibility="hidden";
??? objDiv.style.position="absolute";
??? objDiv.style.zIndex="99999";
??? objDiv.style.left="0px";
??? objDiv.style.top="0px";
???
??? objDiv.innerHTML = divMsg;
??? document.body.appendChild(objDiv);???? ??
? }
? /**
? 当窗口加载时,打印消息提示框
? */
? function loadMsg(){
? var msg = "<div class=\"border\">"+
? ???"<div class=\"title\">"+
? ???"<span class=\"tip\">消息提示</span>"+
? ???"<span id=\"msgMin\" title=\"最小化窗口\" class=\"Min\" onclick=\"winConvert();\"><b>小</b></span>"+
? ???"<span id=\"msgClose\" title=\"关闭\" class=\"Close\" onclick=\"msgClose();\">关</span>"+
? ???"</div>"+
? ???"<div id=\"msgContent\" class=\"content\">内容区"+
? ???"</div>"+
? ???"</div>";
? ???init(msg);
? }
? /**
? 开始加载消息框
? */
? function init(divMsg){
?? msgPop.createInstance(divMsg);
?? msgPop.onload();
? }
? /**
??? 设置消息框加载时的高度
? */
? msgPop.onload = function(){
? divHeight = parseInt(msgPop.obj().offsetHeight,10);//消息框的高度
? divWidth = parseInt(msgPop.obj().offsetWidth,10);//消息框的宽度
? divTop = parseInt(msgPop.obj().style.top,10)//消息框的顶部位置
? divLeft = parseInt(msgPop.obj().style.left,10);//消息框的左边位置
? docHeight= document.body.clientHeight;//body高度
? docWidth =document.body.clientWidth;//body宽度
?
? msgPop.obj().style.top = parseInt(document.body.scrollTop,10) + docHeight+10;
? msgPop.obj().style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
? msgPop.obj().style.visibility="visible";
? msgPop.timer = window.setInterval(msgPop.moveUp,2);
? }
? /**
? 消息框慢慢的从下面移动出来
? */?
? msgPop.moveUp = function(){
? var top = parseInt(msgPop.obj().style.top,10);
? var height = docHeight - divHeight + parseInt(document.body.scrollTop,10)
? try{
??? if(top <= height){
?????? window.clearInterval(msgPop.timer);
?????? //msgPop.timer = window.setInterval(msgPop.onResize,2);
??? }
? ?divTop = parseInt(msgPop.obj().style.top,10);
? ?msgPop.obj().style.top = divTop - 1;
? }catch(e){
? }
? }
?
?? /**
? 消息框慢慢的从上移下去
? */?
? msgPop.moveDown = function(){
? var top = parseInt(msgPop.obj().style.top,10);
? var height = docHeight - divHeight+divContentHeight + parseInt(document.body.scrollTop,10)
? try{
??? if(top >= height){
?????? window.clearInterval(msgPop.timer);
?????? //msgPop.timer = window.setInterval(msgPop.onResize,2);
??? }
? ?divTop = parseInt(msgPop.obj().style.top,10);
? ?msgPop.obj().style.top = divTop + 1;
? }catch(e){
? }
? }
? /**
? 当屏幕变化时，重新调整高度
? */
? msgPop.onResize = function(){
???? try{
?????? divHeight = parseInt(msgPop.obj().offsetHeight,10);
? ??divWidth = parseInt(msgPop.obj().offsetWidth,10);
? ??docHeight= document.body.clientHeight;
? ??docWidth =document.body.clientWidth;
????? ?msgPop.obj().style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
??????? msgPop.obj().style.left = docWidth - divWidth+ parseInt(document.body.scrollLeft,10);
???? }catch(e){
???? }
? }
? /**
? ?关闭消息框
? */
? msgPop.close = function(){
?? if(msgPop.obj()){
??? var pNode = msgPop.obj().parentNode;
??? pNode.removeChild(msgPop.obj());
?? }
?? if(msgPop.timer){?
?? ?window.clearInterval(msgPop.timer);
?? }
? }
? /**
? ?关闭消息框
? */
? function msgClose(){
? ?msgPop.close();
? }
?
? msgPop.convertWin = function (){
? var msgContent = document.getElementById("msgContent");
? var msgMin = document.getElementById("msgMin");
? var flag = msgContent.style.display == "none";
? if(flag){
? ?msgMin.innerHTML="<b>小</b>";
? ?msgMin.title="最小化窗口";
? ?msgContent.style.display="block";
? ?msgPop.timer = window.setInterval(msgPop.moveUp,2);
? }else{
? ?msgMin.innerHTML="<b>大</b>";
? ?msgMin.title="最大化窗口";
? ?msgContent.style.display="none";
? ?msgPop.timer = window.setInterval(msgPop.moveDown,1);
? }?
? }
? /**
??? 窗口变化
? */
? function winConvert(){
?? msgPop.convertWin();
? }
? </script>
? <body>
? 
? <script type="text/javascript">
? window.onload = loadMsg;
? window.onresize = msgPop.onResize;
? </script>
?
? </body>
</html>