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 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
JavaScript函数柯里化
Nov 07 Javascript
控制台报错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
德生PL330的评价与改造
2021/03/02 无线电
用缓存实现静态页面的测试
2006/12/06 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
JS简单计算器实例
2015/01/20 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
关于box-sizing的全面理解
2016/07/28 HTML / CSS
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
为什么要有struct关键字
2012/05/08 面试题
.NET程序员的数据库面试题
2012/10/10 面试题
给护士表扬信
2014/01/19 职场文书
软件测试专业推荐信
2014/09/18 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL