【屌丝学堂】跟我学JS封装-第一课

最新推荐文章于 2019-08-05 10:08:39 发布

最新推荐文章于 2019-08-05 10:08:39 发布 · 159 阅读

js 同时被 2 个专栏收录

4 篇文章

订阅专栏

屌丝学堂

3 篇文章

订阅专栏

博主分享了一次有趣的生活经历后，介绍了如何使用JavaScript封装一个设置元素透明度的函数，并计划讲解单击冒泡函数对象。

许久没写博客了，混在蓝色里面聊天打炮，最近项目也闲下来了，哥就艹笔重艹旧业，开始我的博客记录

我是个90后，纯屌丝，我很喜欢我的女神，但是在女神面前我就是个矮丑穷。

有一次半夜，我还在敲击着代码，滴滴滴...女神的头像闪了起来

‘在吗？’ 我很高兴，女神这么晚了怎么还找我聊天...我不经幻想起来和女神啪啪啪

'在在在...' 我连敲3个在，说明我此时的内心是多么激动！

' 明天有空吗？陪我去趟医院' 啥！医院!

' 你怎么了？是不是身体不舒服？严重吗？我现在就过来！' 我当时真的很担心女神！！

' 呵呵，明天你陪我去就可以了' 女神居然对我呵呵！！

'哦，你现在干嘛呢' 我想和女神在聊会难得的机会啊！！

'呵呵，不聊了，睡觉'

然后女神的头像就灰了，我关了电脑躺床上想着明天和女神去约会，然后去酒店啪啪啪...这一夜我睡的很香!

但是之后才知道女神去医院打胎！！！喜当爹，有木有！！！！

好了开始屌丝学堂第一课：学前端学封装- 封装一个透明函数

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS封装透明度</title>
</head>

<style>
#test1{width:250px;height:250px;text-align:center;background-color:#930;margin:0 auto;color:#F00;}
#test2{width:250px;height:250px;text-align:center;background-color:blue;margin:0 auto;color:#f00;}
</style>

<body bgcolor="#eee">
	
    <div id="test1">我是模块1</div>
    <div id="test2">我是模块2</div>
    
    <script>
		/* 封装setOpacity函数
		 * node 类名 level 透明度
		 *=====================*/
			function setOpacity(node,level){
				node = typeof node=="string" ? document.getElementById(node) : node;
				if(document.all){ //document.all 是IE支持属性 firefox 不支持
					node.style.filter = 'alpha(opacity=' + level+ ')';
				}else{
					node.style.opacity= level/100;	
				}		
			}
			
		/*  调用函数 */
		setOpacity("test1",20);
		setOpacity("test2",20);
		
	</script>

</body>
</html>

下一课，封装一个单击冒泡函数对象

看完请点顶