<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style lang="">
header{
display: flex;
justify-content: space-evenly;
}
div{
width: 500px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<header>
<div>
<h2> 乾坤大挪移</h2>
</div>
<button> 开始 </button>
<div id="two">
</div>
</header>
</body>
</html>
<script>
// 1.获取dom 绑定事件
// 2.获取文本内容
// 3.赋值给新的div
var flag = true
document.querySelector("button").addEventListener("click",function(){
if(flag){
document.querySelector("#two").innerHTML = document.querySelector("div").innerHTML
document.querySelector("div").innerHTML = ""
}else{
document.querySelector("div").innerHTML = document.querySelector("#two").innerHTML
document.querySelector("#two").innerHTML = ""
}
flag = !flag
})
</script>
乾坤大挪移
最新推荐文章于 2024-05-03 15:43:47 发布