时间戳

首页 > 解决方案 > 单击添加待办事项列表的按钮时，如何生成具有不同背景颜色的项目？

javascript - 单击添加待办事项列表的按钮时，如何生成具有不同背景颜色的项目？

问题描述

我正在做一个待办事项列表，我想显示一个与上一个和下一个项目具有不同背景颜色的新项目。
我想提供 3 种颜色选项（例如：蓝色、绿色、粉红色），单击时会显示穿插。如果第一个是蓝色的，那么下一个将是绿色或粉红色。像这个例子：image。

到目前为止我的代码：

const button = document.querySelector('#add-to-list');
const list = document.querySelector('#list');

button.addEventListener('click', function(){

  let newLI = document.createElement('li');
  newLI.textContent = 'A new item';
  list.appendChild(newLI);

  setTimeout(function(){
    newLI.classList = "show";
  },10);  
})

*,
*::before,
*::after{
   margin:0;
   padding:0; 
}

html,
body {
  height:100vh;
}

section{
  height:100vh;
  display:flex;
  align-items: center;
  justify-content: center;
}

li {
  list-style:none;
  background:#d1703c;
  color:#fff;
  line-height:2em;
  padding:0 0.5em;
  width:10em;
  height:0;
  margin:0;
  overflow:hidden;
}

li.show {
  height:2em;
  margin: 2px 0;
}

.fade li {
  transition:all 0.4s ease-out;
  opacity:0;

}

.fade li.show {
  opacity:1;
}

.swing{
  perspective:100px;
}

.swing li {
  opacity:0;
  transform:rotateY(-90deg);
  transition:all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

.swing li.show{
  opacity:1;
  transform:none;
  transition:all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animating List Items</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <section>
    <div class="container">   
      <div class="fade swing">
        <ul id="list"></ul>
      </div>
      <button id="add-to-list">Add a list item</button>
    </div>
  </section>

  <script src="js/todoList.js"></script>
</body>
</html>

标签： javascriptevents

解决方案

这可以通过另外 2 条 js 行来完成。定义一个颜色数组，并在创建新按钮时使用模运算来选择适当的颜色索引，如下所示：

const button = document.querySelector('#add-to-list');
const list = document.querySelector('#list');
const colors = ["red","blue","green","yellow"];
button.addEventListener('click', function(){

    let newLI = document.createElement('li');
    newLI.textContent = 'A new item';
    
    //select color index based on the number of item in the list modulo the number of color
    newLI.style.backgroundColor =  colors[list.childNodes.length % colors.length];
    
    list.appendChild(newLI);


    setTimeout(function(){
        newLI.classList = "show";
    },10);


});
*,
*::before,
*::after{
   margin:0;
   padding:0; 
}

html,
body {
  height:100vh;
}

section{
  height:100vh;
  display:flex;
  align-items: center;
  justify-content: center;
}

li {
  list-style:none;
  background:#d1703c;
  color:#fff;
  line-height:2em;
  padding:0 0.5em;
  width:10em;
  height:0;
  margin:0;
  overflow:hidden;
}

li.show {
  height:2em;
  margin: 2px 0;
}

.fade li {
  transition:all 0.4s ease-out;
  opacity:0;

}

.fade li.show {
  opacity:1;
}

.swing{
  perspective:100px;
}

.swing li {
  opacity:0;
  transform:rotateY(-90deg);
  transition:all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

.swing li.show{
  opacity:1;
  transform:none;
  transition:all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animating List Items</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <section>
    <div class="container">   
      <div class="fade swing">
        <ul id="list"></ul>
      </div>
      <button id="add-to-list">Add a list item</button>
    </div>
  </section>

  <script src="js/todoList.js"></script>
</body>
</html>

推荐阅读