js重写alert控件(适合学习js的新手朋友)


Posted in Javascript onAugust 24, 2014

纯粹是为了打发时间,手写了一个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>
Javascript 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
控制台报错object is not a function的解决方法
Aug 24 #Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 #Javascript
JavaScript验证电子邮箱的函数
Aug 22 #Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 #Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 #Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 #Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 #Javascript
You might like
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
Python生成随机MAC地址
2015/03/10 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Django缓存系统实现过程解析
2019/08/02 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
详解python中eval函数的作用
2019/10/22 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
土地转让协议书范本
2014/04/15 职场文书
法律顾问服务方案
2014/05/15 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
务虚会发言材料
2014/12/25 职场文书
综合实践活动报告
2015/02/05 职场文书
《叶问2》观后感
2015/06/15 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python