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实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JavaScript修改注册表实例代码
Jan 05 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 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
基于mysql的论坛(7)
2006/10/09 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python实现方便使用的级联进度信息实例
2015/05/05 Python
python算法表示概念扫盲教程
2017/04/13 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python中update的基本使用方法详解
2019/07/17 Python
python实现批量命名照片
2020/06/18 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
英文升职感谢信
2015/01/23 职场文书
地雷战观后感
2015/06/09 职场文书
公司开业致辞
2015/07/29 职场文书
门卫管理制度范本
2015/08/05 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书