使用按钮更改内容

Question

我想用两个按钮更改 DIV 的内容。寻找纯 javaScript 解决方案。另外，我想要一个自动播放功能，每 2 秒更改一次内容。单击其中一个按钮时，自动播放功能应停止。

现在，我设法用 "poor" 代码做到了这一点，而且没有自动播放功能。也许这里有人知道更好的方法？

change = document.getElementById("change");

button2 = document.getElementById("button2");
button2.addEventListener("click", function() {
  change.style.background = "orange";
  button1.style.background = "orange";
  button2.style.background = "black";
});

button1 = document.getElementById("button1");
button1.addEventListener("click", function() {
  change.style.background = "black";
  button1.style.background = "black";
  button2.style.background = "orange";
});

#change {
  width: 300px;
  height: 100px;
  background: rgba(0, 0, 0, 1);
}

#button1,
#button2 {
  color: grey;
  display: block;
}

<div id="change"></div>
<button id="button1">Button 1</div>
<button id="button2">Button 2</div>

Answer 1

只需在 css 中添加 class 说 orange 即可将背景设置为橙色。您现在可以使用 setInterval() 方法每 2 秒在 div 上切换 orange class，然后使用 clearInterval() 取消间隔单击按钮，现在根据单击切换橙色 class。

var change = document.getElementById("change");
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");

var toggleColor = setInterval(function(){
  change.classList.toggle('orange')
}, 2000);


button2.addEventListener("click", function(){
  change.style.background = "orange";
  button1.style.background = "orange";
  button2.style.background = "black";
  clearInterval(toggleColor);
});

button1.addEventListener("click", function(){
  change.style.background = "black";
  button1.style.background = "black";
  button2.style.background = "orange";
  clearInterval(toggleColor);
});

#change {
width: 300px;
height: 100px;
background: rgba(0,0,0,1);
}
#button1, #button2 {
color: grey;
display: block;
}

#change.orange {
  background: orange;
}

<div id="change"></div>
<button id="button1">Button 1</div>
<button id="button2">Button 2</div>

Answer 2

这可以通过使用 set interval() 来实现，并且可以通过使用 clearInterval() 来停止

这是代码示例

var timer

timer = setInterval(function() { change.style.background = "blue"; }, 2000);

clearInterval(timer);

这是工作示例https://jsfiddle.net/Arpit09/dkz20b61/16/

Answer 3

那么，您似乎想要某种旋转木马。

下面的示例允许您后退或前进浏览内容，还可以自动前进。

您的视图应保存在 array/list 数据类型中。

最后，我会使用类而不是 id。这使得代码更具可扩展性。如果需要，稍后可以对其进行修改以创建插件。

const views = [{
  content : '<h1>View #1</h1>',
  style : { backgroundColor : 'orange', color : 'black' }
}, {
  content : '<h1>View #2</h1>',
  style : { backgroundColor : 'black', color : 'orange' }
}, {
  content : '<h1>View #3</h1>',
  style : { backgroundColor : 'red', color : 'white' }
}];

var timerId = null;
var currentView = 0;

window.addEventListener('DOMContentLoaded', onReady);

function onReady() {
  let ct = document.querySelector('.container');
  ct.querySelector('.btn-prev').addEventListener('click', handlePrevClick);
  ct.querySelector('.btn-next').addEventListener('click', handleNextClick);
  ct.querySelector('.btn-auto').addEventListener('click', handleAutoClick);
  
  initializeView();
}

function handlePrevClick() {
  currentView = (currentView + views.length - 1) % views.length;
  initializeView();
}

function handleNextClick() {
  currentView = (currentView + 1) % views.length;
  initializeView();
}

function handleAutoClick(e) {
  if (timerId == null) {
    e.target.innerHTML = 'Stop';
    timerId = setInterval(() => {
      handleNextClick();
    }, 1000);
  } else {
    e.target.innerHTML = 'Auto';
    clearInterval(timerId);
    timerId = null;
  }
}

function initializeView() {
  let container = document.querySelector('.container');
  let viewport = container.querySelector('.viewport');
  let view = views[currentView];
  
  viewport.innerHTML = view.content; 
  //viewport.style.backgroundColor = view.style.backgroundColor;
  //viewport.style.color = view.style.color;
  Object.assign(viewport.style, view.style); 
}

.container {
  width: 300px;
}

.viewport {
  width: 100%;
  height: 100px;
  border: thin solid grey;
}

.btn-container {
  width: 100%;
  text-align: center;
  margin-top: 0.5em;
}

.btn-container button {
  margin: auto 0.25em;
}

<div class="container">
  <div class="viewport"></div>
  <div class="btn-container">
    <button class="btn-prev">Prev</button>
    <button class="btn-auto">Auto</button>
    <button class="btn-next">Next</button>
  </div>
</div>

使用按钮更改内容

Change content with buttons

javascript

toggle

autoplay