js重寫alert控件(適合學(xué)習(xí)js的新手朋友)
更新時間：2014年08月24日 09:19:36 投稿：whsnow
這篇文章主要介紹js重寫alert控件的過程比較適合學(xué)習(xí)js的新手朋友,需要的朋友可以參考下
純粹是為了打發(fā)時間，手寫了一個JS的 alert控件。
代碼如下：
<html>
<head>
<script type="text/javascript">
var alertObj = new Object();
var generalStyle = {
zIndex: 0,
width: "200px",
height: "100px",
border: "thick solid #CCCCCC",
background: "#FFFFFF",
position: "absolute",
top: "35%",
left: "40%"
}
var txtStyle = {
textAlign: "center"
}
var btnStyle = {
position: "absolute",
left: "40%",
top: "70%",
color: "#333333",
fontWeight: "bold",
outlineColor:"#3366FF",
outlineStyle:"ridge",
outlineWidth:"thin",
//outline: "thin ridge #3366FF",
innerHTML: "OK"
}
alertObj = {
generalSet: generalStyle,
txtSet: txtStyle,
btnSet: btnStyle,
isExist: false
}
alertObj.createComponent = function() {
var component = document.createElement(arguments[0]);
var styles = arguments[1];
for (var property in styles) {
if (styles[property] != null) {
try{
component.style[property] = styles[property];
}catch(err){
document.write(err.name+":"+property+"<br/>");//set property error!
}
}
}
return component;
}
alertObj.show = function() {
if(!this.isExist){
this.isExist = true;
var bodyObj = document.body;
bodyObj.style.zIndex = -1;
bodyObj.style.background = "#999999";
var divObj = this.createComponent("div", this.generalSet);
var txtObj = this.createComponent("p", this.txtSet);
txtObj.innerHTML = arguments[0];
var btnObj = this.createComponent("button", this.btnSet);
btnObj.innerHTML = this.btnSet.innerHTML;
btnObj.onclick = function() {
bodyObj.style.zIndex=0;
bodyObj.style.background="";
bodyObj.removeChild(divObj);
if(alertObj.isExist){
alertObj.isExist = false;
}
}
divObj.appendChild(txtObj);
divObj.appendChild(btnObj);
bodyObj.appendChild(divObj);
}
}
function show(s) {
alertObj.show(s);
}
</script>
</head>
<body>
<p onclick="show('inner test');">Click show alert</p>
</body>
</html>
相關(guān)文章
JavaScript改變this指向的四種方法(bind、call、apply 和箭頭函數(shù))
JavaScript中的this是一個非常重要且容易困惑的概念,主要用于引用執(zhí)行上下文,然而,this的指向經(jīng)常因為不同的執(zhí)行環(huán)境而改變,為了解決這個問題,JavaScript提供了多種方法來明確指定this的指向,本文將詳細(xì)介紹JavaScript中常用的四種改變this指向的方法2025-03-03
編程語言中，函數(shù)Func(Type a,……)直接或間接調(diào)用函數(shù)本身，則該函數(shù)稱為遞歸函數(shù)。遞歸函數(shù)不能定義為內(nèi)聯(lián)函數(shù)。這篇文章主要介紹了JS中遞歸函數(shù)的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了js分析url獲取url參數(shù)，可以獲取?前面部分、#及后面部分，大家看代碼吧2013-12-12
在WEB開發(fā)中，許多開發(fā)者都比較喜歡使用javascript來獲取當(dāng)前url網(wǎng)址，本文就此為大家總結(jié)一下比較常用獲取URL的javascript實現(xiàn)代碼2015-06-06
微信小程序獲取手機網(wǎng)絡(luò)狀態(tài)的方法【附源碼下載】
這篇文章主要介紹了微信小程序獲取手機網(wǎng)絡(luò)狀態(tài)的方法,涉及微信小程序wx.getNetworkType函數(shù)檢查網(wǎng)絡(luò)連接狀態(tài)的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JavaScript中for-in和for-of的不同之處及如何正確使用
這篇文章主要給大家介紹了關(guān)于JavaScript中for-in和for-of的不同之處及如何正確使用它們的相關(guān)資料,無論是for...in還是for...of語句都是迭代一些東西,它們之間的主要區(qū)別在于它們的迭代方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
javascript 模式設(shè)計之工廠模式詳細(xì)說明
2010-05-05
interface 是typescript核心內(nèi)容,用來定義規(guī)范,無論是函數(shù),數(shù)組或者對象,還是類都可以用接口interface來進行規(guī)范,而接口本身也是可以繼承和擴展的,本文給大家詳細(xì)介紹了TypeScript interface的高級用法,需要的朋友可以參考下2025-03-03
javascript addLoadEvent函數(shù)說明
網(wǎng)頁加載完整后會觸發(fā)一個onload事件，默認(rèn)地一個事件只能和一個函數(shù)綁定。2010-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級評價，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11