首页 > 网络编程 > JavaScript > javascript类库 > json > javascript json QQ网页登陆 深入javascript json QQ网页登陆 2009-07-06 13:23:32 作者： 下面是个类似QQ网页登陆的一个对话框（DIV）, js + json 动态生成. 效果图 <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需刷新才能执行] 您可能感兴趣的文章:php curl登陆qq后获取用户信息时证书错误WebQQ最新登陆协议的用法C++获取本机登陆过的QQ号码示例程序Android仿QQ登陆窗口实现原理禁止指定QQ号登录的bat代码(前提这个用户在这台机器登陆过)qq防止别人登陆如何禁止别人登陆qq来自天下网吧的QQ登陆界面修改教程正文分析错误微信QQ的二维码登录原理js代码解析js仿QQ中对联系人向左滑动、滑出删除按钮的操作js仿腾讯QQ的web登陆界面
