1.创建多个按钮,实现点击按钮通过Dom新增元素将内容新增到输入框
2.实现输入框内单个内容添加onclick事件清除内容
3.实现清除所有内容
4.使用setInterval定时器实现广告轮播 `
<!DOCTYPE html>
<html>
<head>
<title>Button Example</title>
<head>
<style>
#content{
width:200px;
height:500px;
}
</style>
<body>
<input type="text" id="inputBox">
<br>
<button id="clearButton">Clear</button>
<br>
<button id="addButton1">Sandeep</button>
<button id="addButton2">America</button>
<br>
<button id="addButton3">Chaela</button>
<button id="addButton4">Makayla</button>
<br>
<button id="addButton5">Savaria</button>
<button id="addButton6">Briton</button>
<br>
<button id="addButton7">Rosalie</button>
<button id="addButton8">Jovia</button>
<br>
<button id="addButton9">Kaimana</button>
<button id="addButton10">laindain</button>
<br>
<button id="addButton11">Chantara</button>
<button id="addButton12">Fumiya</button>
<div id="slideshow"></div>
<script>
document.getElementById('addButton1').addEventListener('click', function() {
document.getElementById('inputBox').value += 'Sandeep';
});
document.getElementById('addButton2').addEventListener('click', function() {
document.getElementById('inputBox').value += 'America';
});
document.getElementById('addButton3').addEventListener('click', function() {
document.getElementById('inputBox').value += 'Chaela';
});
document.getElementById('addButton4').addEventListener('click', function() {
document.getElementById('inputBox').value += 'Makayla';
});
document.getElementById('addButton5').addEventListener('click', function() {
document.getElementById('inputBox').value += 'Savaria';
});
document.getElementById('addButton6').addEventListener('click', function() {
document.getElementById('inputBox').value += 'Briton';
});
document.getElementById('addButton7').addEventListener('click', function() {
document.getElementById('inputBox').value += 'Rosalie';
});
document.getElementById('addButton8').addEventListener('click', function() {
document.getElementById('inputBox').value += 'Jovia';
});
document.getElementById('addButton9').addEventListener('click', function() {
document.getElementById('inputBox').value += 'Kaimana';
});
document.getElementById('addButton10').addEventListener('click', function() {
document.getElementById('inputBox').value += 'laindain';
});
document.getElementById('addButton11').addEventListener('click', function() {
document.getElementById('inputBox').value += 'Chantara';
});
document.getElementById('addButton12').addEventListener('click', function() {
document.getElementById('inputBox').value += 'Fumiya';
});
document.getElementById('clearButton').addEventListener('click', function() {
document.getElementById('inputBox').value = '';
});
function clearAll() {
document.getElementById('inputBox').value = '';
}
var slideShow = ['广告1', '广告2', '广告3'];
var currentSlide = 0;
var slideShowElement = document.getElementById('slideshow');
var slideInterval = setInterval(nextSlide, 3000);
function nextSlide() {
slideShowElement.innerHTML = slideShow[currentSlide];
currentSlide = (currentSlide + 1) % slideShow.length;
}
</script>
</body>
</html>
