今天我们来学习如何用javascript做出网页中的剪切效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>剪切板</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#box{
width:400px;
margin:100px auto;
}
ul{
width:150px;
height:300px;
border:1px solid chocolate;
float:left;
text-align:center;
}
#btn{
float:left;
margin:100px 10px;
}
</style>
</head>
<body>
<div id="box">
<ul id="ul1">
<li>瘦瘦1</li>
<li>瘦瘦2</li>
<li>瘦瘦3</li>
<li>瘦瘦4</li>
<li>瘦瘦5</li>
<li>瘦瘦6</li>
</ul>
<button id="btn">移动</button>
<ul id="ul2"></ul>
</div>
</body>
<script>
var oUl1=document.getElementById('ul1');
var oUl2=document.getElementById('ul2');
var oBtn=document.getElementById('btn');
oBtn.onclick=function () {
//获取值
var oLi=oUl1.children[0];
//添加到ul2
oUl2.appendChild(oLi);
}
</script>
</html>
网友评论