一（10分）
getElementsByClassName函数实现获取指定类名的子元素列表，语法如下：
var elements = getElementsByClassName(element, names);
使用示例如下：
如果html元素
<div id="example">
<p id="p1" class="aaa bbb"/>
<p id="p2" class="aaa ccc"/>
<p id="p3" class="bbb ccc"/>
</div>
对应的DOM节点为example, 那么
getElementsByClassName(example, “aaa”); 运行结果为包含id为p1, id为p2的元素列表
getElementsByClassName(example, “bbb ccc”);运行结果为包含id为p3的元素列表
getElementsByClassName(example, “ccc bbb”);运行结果为包含id为p3的元素列表
请实现getElementsByClassName方法，要求浏览器兼容。
解：我是重写的，不是做兼容。
function getElementsByClassName(element, names){
var children = element.getElementsByTagName('*');
var elements = new Array();
var child, attr_class_name, flag;
names = names.split(' ');
for (var i = 0; child = children[i]; i++) {
attr_class_name = ' ' + child.className + ' ';
flag = true;
for (var j = 0, name; name = names[j]; j++) {
if (attr_class_name.indexOf(' ' + name + ' ') == -1) {
flag = false;
break;
}
}
if (flag) {
elements.push(child);
}
}
return elements;
}
getElementsByClassName(example, "aaa bbb");
二（8分）
函数getCookies()解析document.cookie， 并返回一个对象， 该对象的属性名为cookie的name，属性值为cookie的value。请写出该函数的实现代码
解：
function getCookies() {
var cookie={};
var all= document.cookie;
if(all=="")
return cookie;
var list =all.split(";");
for(var i=0;i<list.length;i++){
var item =list[i];
var p=item.indexOf("=");
var name=item.substring(0,p);
name=decodeURLComponent(name);
var value=item.substring(p+1);
value=decodeURLComponent(value);
cookie[name]=value;
}
return cookie;
}
getCookies()
三（10分）
函数fadeout(element)实现了元素的淡出效果（即透明度从1变到0），动画时间为1秒钟。用定时器setInterval实现动画，写出函数fadeout的实现代码：
解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淡出效果</title>
<style>
#demo div.box {float:left;width:31%;margin:0 1%}
#demo div.box h2{margin-bottom:10px}
#demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder}
#demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden}
</style>
</head>
<body>
<div id="demo">
<div class="box">
<h2><input type="button" value="点击淡出" /></h2>
<div id="fadeOut">
<p>函数fadeout(element)实现了元素的淡出效果（即透明度从1变到0），动画时间为1秒钟。用定时器setInterval实现动画</p>
</div>
<p>淡出效果</p>
</div>
</div>
</body>
<script>
window.onload = function(){
//淡出
function fadeout(elem){
var val = 1;
var timer = null;
timer = setInterval(function() {
setOpacity(elem, val);
val -= 0.1;
if(val<0){clearInterval(timer);}
}, 100); //100毫秒*10次=1秒
//设置opacity
function setOpacity(element,value){
element.filters ? element.style.filter ='alpha(opacity='+100*value+')' : element.style.opacity =value;
}
}
/////////////////////////////////////////////////////////////
// 测 试
var btn = $('demo').getElementsByTagName('input')[0];
btn.onclick = function(){ fadeout($('fadeOut')); }
//测试工具
function $(name){return document.getElementById(name);}
}
</script>
</html>
网友评论