2025年5月1日大约 4 分钟
示例代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素</title>
<style type="text/css">
*{
/*padding:0px;
margin:0px;*/
list-style:none;
text-decoration:none;
font-family:microsoft yahei;
}
#all{
padding:10px;
width:800px;
height:auto;
border:solid 1px #333;
margin:0 auto;
}
#menu a{font-size:14px;}
#header{width:97%;height:80px;border:solid 1px #444;margin:10px;}
#section{width:97%;height:auto;border:solid 1px #444;margin:10px;}
#footer{width:97%;height:50px;border:solid 1px #444;margin:10px;}
#header ul{height:auto;overflow:hidden;padding-left:100px;}
#header ul li{width:60px;height:30px;float:left;border:solid 1px #456;text-align:center;line-height:30px;}
#logo{width:200px;height:auto;float:left;position:relative;}
#logo img{margin-top:-40px;}
#section ul{height:auto;overflow:hidden;padding:20px;}
#section li{width:200px;height:150px;float:left;border:solid 2px pink;padding:10px;margin-right:21px;margin-bottom:21px;position:relative;}
#img{width:100px;float:left;}
#copy{height:auto;overflow:hidden;padding-left:100px;line-height:50px;}
#move{width:120px;height:40px;background:pink;position:fixed;right:0px;top:100px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
#allmove{width:120px;height:40px;background:pink;position:fixed;right:0px;top:200px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
#recovery{width:120px;height:40px;background:pink;position:fixed;right:0px;top:300px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
#ins{width:120px;height:40px;background:lightblue;position:fixed;left:0px;top:100px;cursor:pointer;line-height:40px;text-align:center;}
#app{width:120px;height:40px;background:lightblue;position:fixed;left:0px;top:160px;cursor:pointer;line-height:40px;text-align:center;}
#rem{width:120px;height:40px;background:lightblue;position:fixed;left:0px;top:220px;cursor:pointer;line-height:40px;text-align:center;}
#rep{width:120px;height:40px;background:lightblue;position:fixed;left:0px;top:280px;cursor:pointer;line-height:40px;text-align:center;}
#clo{width:120px;height:40px;background:lightblue;position:fixed;left:0px;top:340px;cursor:pointer;line-height:40px;text-align:center;}
.xx{width:17px;height:17px;border:solid 1px #ddd;background:#eee;position:absolute;right:0px;top:0px;line-height:17px;text-align:center;cursor:pointer;display:none;}
</style>
<script type="text/javascript">
window.onload = function(){
var lis = images.getElementsByTagName('li');//获取所有的li
move.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.transform = 'rotate('+(Math.ceil(Math.random()*90)-45)+'deg)';
}
return false;
}
allmove.onclick = function(){
var d = 0;
var inte = setInterval(function(){
document.body.style.transform = 'rotate('+d+'deg)';
d+=10;
if(d > 360){
clearInterval(inte);
}
},10)
}
recovery.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.transform = 'rotate(0deg)';
}
return false;
}
}
</script>
</head>
<body>
<!-- 内容 start -->
<div id="all">
<!-- 头部 start -->
<div id="header">
<div id="logo"><img src="./sunli/logo.png" alt="" width="100%"></div>
<ul id="menu">
<li><a href="国内">国内</a></li>
<li><a href="国外">国外</a></li>
<li><a href="科技">科技</a></li>
<li><a href="生活">生活</a></li>
</ul>
</div>
<!-- 头部 end -->
<!-- 内容 start -->
<div id="section">
<ul id="images">
<li class="w"><a href=""><img src="./sunli/1.jpg" alt="" width="100%"></a><span class='xx'>X</span></li>
<li class="w"><a href=""><img src="./sunli/2.jpg" alt="" width="100%"></a><span class='xx'>X</span></li>
<li class="w"><a href=""><img src="./sunli/3.jpg" alt="" width="100%"></a><span class='xx'>X</span></li>
</ul>
</div>
<!-- 内容 end -->
<!-- 底部 start -->
<div id="footer">
<div id="img"><img src="./sunli/logo.png" alt="" width="100%" height='50px'></div>
<div id="copy">© Copyright 2014. All Rights Reserved.Beijing</div>
</div>
<!-- 底部 end -->
</div>
<!-- 内容 end -->
<div id="move">Image</div>
<div id="allmove">Body</div>
<div id="recovery">Recovery</div>
<div id='ins'>头部插入节点</div>
<div id='app'>尾部插入节点</div>
<div id='rem'>删除节点</div>
<div id='rep'>替换节点</div>
<div id='clo'>克隆节点</div>
<script type="text/javascript">
var ins = document.getElementById('ins');
var app = document.getElementById('app');
var rem = document.getElementById('rem');
var rep = document.getElementById('rep');
var clo = document.getElementById('clo');
var images = document.getElementById('images');
//从头部插入节点
ins.onclick = function()
{
// alert(12345);
var lis = createLis();
var fir = images.firstElementChild;
images.insertBefore(lis,fir);
}
//从尾部插入节点
app.onclick = function()
{
var lis = createLis();
images.appendChild(lis);
}
//删除节点
rem.onclick = function()
{
var fir = images.firstElementChild;
images.removeChild(fir);
}
//替换节点
rep.onclick = function()
{
var last = images.lastElementChild;
//调用函数
var lis = createLis();
images.replaceChild(lis,last);
}
//克隆节点
clo.onclick = function()
{
var last = images.lastElementChild;
var las = last.cloneNode(true);
var fir = images.firstElementChild;
images.insertBefore(las,fir);
}
//封装函数
function createLis()
{
//创建li
var lis = document.createElement('li');
// lis.innerHTML = "<li><a href=''>img</a></li>";
//创建a链接
var as = document.createElement('a');
//设置属性
as.setAttribute('href','#');
//创建img标签
var img = document.createElement('img');
//设置属性
img.setAttribute('src','./sunli/'+rand(1,13)+'.jpg');
//添加宽
img.setAttribute('width','100%');
var spa = document.createElement('span');
spa.innerHTML = 'X';
spa.setAttribute('class','xx');
//鼠标移上去的事件
lis.onmouseover = function()
{
//让X显示出来
spa.style.display = 'block';
}
//鼠标离开事件
lis.onmouseout = function()
{
//让X隐藏
spa.style.display = 'none';
}
//给X一个单击事件
spa.onclick = function()
{
// alert(1234);
//点击X完成之后的确认框
var res = confirm('你确认要删除吗???'); //返回的是一个boolean
//判断 如果是真的话
if(res){
//获取spa的父级
var ls = this.parentElement;
//从父级里面删除当前li
images.removeChild(ls);
}
}
// <li><a><img>
//把a链接插入到li里面
lis.appendChild(as);
//span插入到li里面
lis.appendChild(spa);
//把img插入到a连接
as.appendChild(img);
//这个函数调用是给外面的li使用
func();
//返回的li
return lis;
}
function rand(m,n)
{
return Math.ceil(Math.random()*(n-m+1))+(m-1);
}
//把外面的li进行删除
function func(){
//首先要获取spa
var sps = document.getElementsByClassName('xx');
for (var i = 0; i < sps.length; i++) {
//给X单击事件
sps[i].onclick = function()
{
// alert(1234);
var res = confirm('你确认要删除吗???'); //返回的是一个boolean
if(res){
//获取spa的父级
var ls = this.parentElement;
images.removeChild(ls);
}
}
};
}
</script>
</body>
</html>