<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<style type="text/css">
p {
cursor:pointer;
}
textarea {
width:300px;
height:400px;
text-align:center;
}
#btnAgree {
width:150px;
}
#divImage {
width:400px;
height:400px;
position:absolute;
top:100px;
left:500px;
}
img {
width:200px;
height:250px;
}
</style>
<input type="button" value="点击添加层" id="btnAddDiv"/>
<br /><br /><br /><br />
<ul>
<li id="li1">
<p>国际新闻</p>
</li>
<li id="li2">
<p>体育新闻</p>
</li>
<li id="li3">
<p>国内新闻</p>
</li>
</ul>
<br /><br /><br /><br /><br />
<div id="divArea">
<textarea>【审慎阅读】您在申请注册流程中点击同意前，应当认真阅读以下协议。请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：
1、与您约定免除或限制责任的条款；
2、与您约定法律适用和管辖的条款；
3、其他以粗体下划线标识的重要条款。
如您对协议有任何疑问，可向平台客服咨询。
【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。如您因平台服务与淘宝发生争议的，适用《淘宝平台服务协议》处理。如您在使用平台服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。
阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。
淘宝平台服务协议
隐私权政策
法律声明
支付宝及客户端服务协议</textarea>
<p><input type="button" value="请仔细阅读协议(5s)" id="btnAgree" disabled="disabled"/></p>
</div>
<div id="divImage">
<img src=""/>
<input id="btnPrevious" value="上一张" type="button"/>
<input id="btnNext" value="下一张" type="button" />
</div>
<script type="text/javascript">
window.onload = function () {
//第一个需求练习
document.getElementById('btnAddDiv').onclick = function () {
//创建一个div元素对象
var divObj = document.createElement('div');
//设置div对象宽，高和背景颜色
divObj.style.width = '200px'
divObj.style.height = '200px';
divObj.style.backgroundColor = 'blue';
//将实例化好的div对象追加到body中
document.body.appendChild(divObj);
};
//第二个需求练习
//定义一个标记变量
var b1 = false;
//p标签的单击事件
document.getElementsByTagName('p')[0].onclick = function () {
if (b1 == false) {
//实例化ul标签
var ulObj = document.createElement('ul');
//实例化三个li标签
var liObj1 = document.createElement('li');
liObj1.innerHTML = '美国';
var liObj2 = document.createElement('li');
liObj2.innerHTML = '日本';
var liObj3 = document.createElement('li');
liObj3.innerHTML = '韩国';
//将实例化完成的li标签追加到ul标签中
ulObj.appendChild(liObj1);
ulObj.appendChild(liObj2);
ulObj.appendChild(liObj3);
//将实例化完成的ul标签追加到当前注册事件元素的父元素中
this.parentElement.appendChild(ulObj);
//改变标记
b1 = true;
}
else {
//得到实例化的ul标签
var sibling = this.nextElementSibling;
//清空ul标签内的所有元素
while (sibling.hasChildNodes()) {
sibling.removeChild(sibling.firstChild);
}
//将ul标签也清除
this.parentElement.removeChild(sibling);
//改变标记
b1 = false;
}
};
var b2 = false;
document.getElementsByTagName('p')[1].onclick = function () {
if (b2 == false) {
var ulObj = document.createElement('ul');
var liObj1 = document.createElement('li');
liObj1.innerHTML = '篮球';
var liObj2 = document.createElement('li');
liObj2.innerHTML = '足球';
var liObj3 = document.createElement('li');
liObj3.innerHTML = '羽毛球';
ulObj.appendChild(liObj1);
ulObj.appendChild(liObj2);
ulObj.appendChild(liObj3);
document.getElementById('li2').appendChild(ulObj);
b2 = true;
}
else {
var obj = document.getElementById('li2').getElementsByTagName('ul')[0];
while (obj.hasChildNodes()) {
obj.removeChild(obj.firstChild);
}
document.getElementById('li2').removeChild(obj);
b2 = false;
}
};
var b3 = false;
document.getElementsByTagName('p')[2].onclick = function () {
if (b3 == false) {
var ulObj = document.createElement('ul');
var liObj1 = document.createElement('li');
liObj1.innerHTML = '山东';
var liObj2 = document.createElement('li');
liObj2.innerHTML = '河南';
var liObj3 = document.createElement('li');
liObj3.innerHTML = '河北';
ulObj.appendChild(liObj1);
ulObj.appendChild(liObj2);
ulObj.appendChild(liObj3);
document.getElementById('li3').appendChild(ulObj);
b3 = true;
}
else {
var obj = document.getElementById('li3').getElementsByTagName('ul')[0];
while (obj.hasChildNodes()) {
obj.removeChild(obj.firstChild);
}
document.getElementById('li3').removeChild(obj);
b3 = false;
}
};
//第三个需求练习
var num = 5;
var intervalID = setInterval(function () {
num--;
if (num >= 0) {
document.getElementById('btnAgree').value = '请仔细阅读协议(' + num + 's)';
}
else {
document.getElementById('btnAgree').value = '同意';
document.getElementById('btnAgree').disabled = false;
clearInterval(intervalID);
}
}, 1000)
//第四个需求练习
var imagesArray = ['images/1.jpg',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg',
'images/5.jpg',
'images/6.jpg'];
//刚开始加载的时候加载第一张图片
document.getElementsByTagName('img')[0].src = imagesArray[0];
document.getElementById('btnPrevious').disabled = true;
//得到当前显示图片的路径
var src = document.getElementsByTagName('img')[0].getAttribute('src');
//得到当前显示图片的索引
var index = imagesArray.indexOf(src);
//点击下一张按钮单击事件
document.getElementById('btnNext').onclick = function () {
document.getElementById('btnPrevious').disabled = false;
//索引加一
index++;
if (index <= imagesArray.length - 1) {
if (index == imagesArray.length - 1) {
this.disabled = true;
}
document.getElementsByTagName('img')[0].src = imagesArray[index];
}
else {
//this.disabled = true;
index--;
//document.getElementsByTagName('img')[0].src = imagesArray[index];
}
};
//点击上一张按钮单击事件
document.getElementById('btnPrevious').onclick = function () {
document.getElementById('btnNext').disabled = false;
//索引减一
index--;
if (index >= 0) {
if (index == 0) {
this.disabled = true;
}
document.getElementsByTagName('img')[0].src = imagesArray[index];
}
else {
index++;
//document.getElementsByTagName('img')[0].src = imagesArray[index];
}
};
};
</script>
</body>
</html>
js需求练习
最新推荐文章于 2022-08-19 16:49:27 发布
9774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
