深入javascript json QQ网页登陆-牛翰网

深入javascript json QQ网页登陆

9个月前发布

03814

效果图

图片[1]-深入javascript json QQ网页登陆-牛翰网

<html> <head>     <script type=”text/javascript”><!–         LoginWindow = function(jsonObject)         {             this.width = jsonObject.width;             this.height = jsonObject.height;             this.titleColor = jsonObject.titleColor;             this.backgroundColor = jsonObject.backgroundColor;             this.LwHeight = (document.body.clientHeight – this.width) / 2; //让div在屏幕的中间             this.LwWidth = (document.body.clientWidth – this.height) / 2; //让div在屏幕的中间         }         LoginWindow.prototype =         {             createLoginBody: function() //创建登陆框， 即整个框             {                 var loginWindow = document.createElement(“div”);                 with(loginWindow.style)                 {                     border = “1px solid black”;                     position = “absolute”;                     width = this.width + “px”;                     height = this.height + “px”;                     top = this.LwHeight + “px”;                     left = this.LwWidth + “px”;                     backgroundColor = this.backgroundColor;                                      }                 return loginWindow;             },             createLoginTitle:function() //创建 标题 即效果图的黑色标题             {                 var title = document.createElement(“div”);                 var table = document.createElement(“table”);                 var tbody = document.createElement(“tbody”);                 var tr = document.createElement(“tr”);                 var td_1 = document.createElement(“td”);                 var td_2 = document.createElement(“td”);                 var close = document.createElement(“a”);                 close.onclick = function()                 {                     document.body.removeChild(title.parentNode);                                      }                 close.innerHTML = “X”;                 td_1.innerHTML = “welcome”;                 with(title.style)                 {                     width = “100%”;                     height = this.height / 8 + “px”;                     backgroundColor = this.titleColor;                 }                 with(table.style)                 {                     width = “100%”;                     backgroundColor = this.titleColor;                     color = “white”;                 }                 td_2.style.textAlign = “right”;                 td_2.appendChild(close);                 tr.appendChild(td_1);                 tr.appendChild(td_2);                 tbody.appendChild(tr);                 table.appendChild(tbody);                 title.appendChild(table);                 return title;                      },             loadWindow : function() //组合窗口             {                 var loginWindow = this.createLoginBody();                 var title = this.createLoginTitle();                 loginWindow.appendChild(title);                 document.body.appendChild(loginWindow);                      }                      }                        // –></script> </head> <body>     <script type=”text/javascript”><!–         var go = new LoginWindow({width : “300”, height : “200”, backgroundColor : “white”, titleColor : “black”});         go.loadWindow();      // –></script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

来源链接：https://www.jb51.net/article/18991.htm

© 版权声明

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END

node.js 前端开发编程开发
# JavaScript # json # QQ # 网页登陆

支持一下吧

相关推荐

评论抢沙发

请文明发言！

提交

暂无评论内容