深入javascript json QQ网页登陆 时间:2020-05-12 人气:0 效果图 <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需刷新才能执行] 加载全部内容
