HTML DOM之实践项目
1、问题描述
2、实践要求
（1）创建多个按钮,实现点击按钮通过Dom新增元素将内容新增到输入框
（2）实现输入框内单个内容添加onclick事件清除内容
（3）实现清除所有内容
（4）使用setInterval定时器实现广告轮播
3、生成代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style scoped>
* {
padding: 0;
margin: 0;
}
.total {
width: 476px;
height: 610px;
margin: 20px auto 0px auto;
}
.total > p {
color: #000;
font-size: 24px;
font-weight: 300;
margin-bottom: 20px;
}
.frame {
width: 100%;
height: 120px;
background-color: #fff;
border: 1px solid #3382ff;
border-radius: 4px;
padding: 10px;
overflow-y: scroll;
}
#clearButton {
background-color: #F25D4B;
border: none;
width: 185px;
height: 32px;
color: #fff;
font-size: 16px;
border-radius: 2px;
margin-left: 15px;
margin-top: 15px;
letter-spacing: 2px;
margin-bottom: 35px;
}
.frame p {
display: inline-block;
padding: 7px;
border-radius: 3px;
background-color: #329A51;
color: #000;
font-size: 18px;
margin-right: 3px;
margin-bottom: 8px;
}
.frame span {
font-weight: 600;
margin-right: 5px;
margin-left: 5px;
cursor: pointer;
}
.addOptions {
width: 100%;
height: 310px;
margin-bottom: 20px;
}
.options {
width: 100%;
height: 36px;
margin-bottom: 20px;
}
.options > button {
display: inline-block;
/*float: right;*/
width: 200px;
height: 34px;
margin: 0 15px;
background-color: #fac388;
border: none;
border-radius: 3px;
color: #000000;
font-size: 18px;
letter-spacing: 3px;
}
#imgBox {
text-align: center;
}
img {
margin: auto;
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<div>
<div class='total'>
<!-- 标题 -->
<div class='frame' id='frame'>
</div>
<!-- 按钮 -->
<button id='clearButton' @click='addAll()'>全部清除</button>
<!-- 添加选项 -->
<div class='addOptions'>
<!-- 第一部分 -->
<div class='options'>
<button @click='add(1)'>Sandeep</button>
<button @click='add(2)'>America</button>
</div>
<div class='options'>
<button @click='add(3)'>Chaela</button>
<button @click='add(4)'>Makayla</button>
</div>
<div class='options'>
<button @click='add(5)'>Savaria</button>
<button @click='add(6)'>Brixton</button>
</div>
<div class='options'>
<button @click='add(7)'>Rosalie</button>
<button @click='add(8)'>Jovia</button>
</div>
<div class='options'>
<button @click='add(9)'>Kaimana</button>
<button @click='add(10)'>Liadain</button>
</div>
<div class='options'>
<button @click='add(10)'>Chantara</button>
<button @click='add(11)'>Fumiya</button>
</div>
</div>
</div>
<div id='imgBox'>
<img src='../../assets/img.png' alt=''>
</div>
</div>
<script setup>
import img from '../../assets/img.png'
import img1 from '../../assets/img_1.png'
import img2 from '../../assets/img_2.png'
import img3 from '../../assets/img_3.png'
let oFrame, buttons
const banners = [img, img1, img2, img3]
window.onload = function() {
oFrame = document.getElementById('frame')
buttons = document.getElementsByTagName('button')
}
const add = (obj) => {
// 需要把 John Doe 添加到 frame 里面去
// 1、创建标签节点
const newP = document.createElement('p')
const newSpan = document.createElement('span')
newP.style.display = 'inline-block'
newP.style.backgroundColor = '#19a1ff'
newP.style.padding = '7px'
newP.style.color = '#000000'
newSpan.style.color = '#ffffff'
newP.style.margin = '3px'
newSpan.style.margin = '3px'
// 2、创建文本节点
const textNode1 = document.createTextNode(buttons[obj].innerHTML)
const textNode2 = document.createTextNode('X')
// 3、将文本节点装进标签节点中
newSpan.appendChild(textNode2)
newP.appendChild(textNode1)
newP.appendChild(newSpan)
// 把newP 装进 oFrame 里面
oFrame.appendChild(newP)
// 给 X 绑定一个点击效果：节点.onclick = function (){}
newSpan.onclick = function() {
// 删掉 newP
oFrame.removeChild(newP)
}
}
// 清除所有
const addAll = () => {
// 删除frame里面所有子节点
const oFrameChild = oFrame.children
console.log(oFrameChild)
for (let i = 0; i < oFrameChild.length; i++) {
oFrame.removeChild(oFrameChild[i])
i--
}
}
let i = 0
setInterval(function() {
const imgs = document.getElementsByTagName('img')
i++
imgs[2].src = banners[i]
if (i == 3) i = 0
}, 2000)
</script>
</body>
</html>
4、实现效果
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。