如何使用基于值的javascript更改颜色？

时间：2018-02-22 10:31:59

标签： javascript html css javascript-events event-handling

我正在尝试使用javascript转此。如果总数@ 1 =在1-7圈上将颜色变为绿色，则总数@ 4 =在圆圈8-14上将颜色变为黄色，总数@ 7 =在圆圈15-21上将颜色变为蓝色，总数@ 10 =在圆圈22-31上将颜色变为红色。

<style>
body{
  background-color: #f1f1f1;
}
.main-timeline-section{
  position: relative; 
  width: 100%;  
  margin:auto; 
  height:300px;
}
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end{
  position: absolute;
  background:#404040;
  border-radius:100px;
  top:50%;
  transform: translateY(-50%);
  width:30px;
  height:30px;
}
.main-timeline-section .timeline-end{
  right:0px;
}
.main-timeline-section .conference-center-line{
  position: absolute;
  width:100%;
  height:5px;
  top:50%;
  transform: translateY(-50%);
  background:#404040;
}
.timeline-article{
    width: 20%;
    position: relative;
    min-height: 300px;
    float:right;
}
.timeline-article .content-date{
    position: absolute;
    top: 35%;
    left: -5px; 
    font-size:18px;
}
.timeline-article .meta-date{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%); 
    width:20px;
    height:20px;
    border-radius: 100%;
    background:#fff;
    border:1px solid #c00000;
}
.timeline-article .content-box{
  box-shadow: 2px 2px 4px 0px #c1c1c1;
  border:5px solid #c00000;
  border-radius: 5px;
  background-color: #fff;
  width: 100px;
  position: absolute;
  top: 60%;
  left: -55px; 
  padding:10px;
}
.timeline-article-top .content-box:before{
  content: " ";
  position:absolute; 
  left:50%;
  transform: translateX(-50%);
  top:-20px;
  border:10px solid transparent;
  border-bottom-color: #c00000;
}
.timeline-article-bottom .content-date{
  top: 59%;
}
.timeline-article-bottom .content-box{
  top: 0%;
}
.timeline-article-bottom .content-box:before{
  content: " ";
  position:absolute; 
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  border:10px solid transparent;
  border-top-color:#c00000;
}


@media (max-width:460px){
  body{
    display: none;
  }
}
</style>
<html>
<head>
  <title>Major Incident Timeline</title>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <section class="main-timeline-section">
          <div class="timeline-start"></div>
          <div class="conference-center-line"></div>
          <div class="conference-timeline-content">
            <div class="timeline-article timeline-article-top">
                <div class="content-date">
                    <span>22-31</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@10</b></font>
              <br><font size = 3><b>@11</b></font>&nbsp P1
              <br><font size = 3><b>@12</b></font>&nbsp P2
              </p>
                </div>
            </div>

            <div class="timeline-article timeline-article-bottom">
                <div class="content-date">
                    <span>15-21</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@7</b></font>
              <br><font size = 3><b>@8</b></font>&nbsp P1
              <br><font size = 3><b>@9</b></font>&nbsp P2
              </p>
                </div>
            </div>
               <div class="timeline-article timeline-article-top">
                <div class="content-date">
                    <span>8-14</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@4</b></font>
              <br><font size = 3><b>@5</b></font>&nbsp P1
              <br><font size = 3><b>@6</b></font>&nbsp P2
              </p>
                </div>
            </div>

            <div class="timeline-article timeline-article-bottom">
                <div class="content-date">
                    <span>1-7</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@1</b></font>
              <br><font size = 3><b>@2</b></font>&nbsp P1
              <br><font size = 3><b>@3</b></font>&nbsp P2
              </p>
                </div>
            </div> 
          </div>
          <div class="timeline-end"></div>
        </section>
    </div>
  </div>
</div>
</body>
</html>

请帮助我们实现目标。感谢

1 个答案:

答案 0 :(得分：0)

$(document).ready(function(){
  var contentDateRange = ['1-7','8-14','15-21','22-31'];
  var colorRange = ['green','yellow','blue','red'];
  
  $('.meta-date').each(function(index, elem){
    
    var dateRange = $(this).prev().find('span').text();
    
    //console.log(dateRange);
    
    var dateRangeIndex = contentDateRange.indexOf(dateRange);
    //console.log(dateRangeIndex);
    
    if(dateRangeIndex!==-1){
      $(this).css({
        'background-color': colorRange[dateRangeIndex],
        'border': '1px solid '+ colorRange[dateRangeIndex]
      });
    }
  });


});
<style>
body{
  background-color: #f1f1f1;
}
.main-timeline-section{
  position: relative; 
  width: 100%;  
  margin:auto; 
  height:300px;
}
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end{
  position: absolute;
  background:#404040;
  border-radius:100px;
  top:50%;
  transform: translateY(-50%);
  width:30px;
  height:30px;
}
.main-timeline-section .timeline-end{
  right:0px;
}
.main-timeline-section .conference-center-line{
  position: absolute;
  width:100%;
  height:5px;
  top:50%;
  transform: translateY(-50%);
  background:#404040;
}
.timeline-article{
    width: 20%;
    position: relative;
    min-height: 300px;
    float:right;
}
.timeline-article .content-date{
    position: absolute;
    top: 35%;
    left: -5px; 
    font-size:18px;
}
.timeline-article .meta-date{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%); 
    width:20px;
    height:20px;
    border-radius: 100%;
    background:#fff;
    border:1px solid #c00000;
}
.timeline-article .content-box{
  box-shadow: 2px 2px 4px 0px #c1c1c1;
  border:5px solid #c00000;
  border-radius: 5px;
  background-color: #fff;
  width: 100px;
  position: absolute;
  top: 60%;
  left: -55px; 
  padding:10px;
}
.timeline-article-top .content-box:before{
  content: " ";
  position:absolute; 
  left:50%;
  transform: translateX(-50%);
  top:-20px;
  border:10px solid transparent;
  border-bottom-color: #c00000;
}
.timeline-article-bottom .content-date{
  top: 59%;
}
.timeline-article-bottom .content-box{
  top: 0%;
}
.timeline-article-bottom .content-box:before{
  content: " ";
  position:absolute; 
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  border:10px solid transparent;
  border-top-color:#c00000;
}

@media (max-width:460px){
  body{
    display: none;
  }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  <title>Major Incident Timeline</title>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <section class="main-timeline-section">
          <div class="timeline-start"></div>
          <div class="conference-center-line"></div>
          <div class="conference-timeline-content">
            <div class="timeline-article timeline-article-top">
                <div class="content-date">
                    <span>22-31</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@10</b></font>
              <br><font size = 3><b>@11</b></font>&nbsp P1
              <br><font size = 3><b>@12</b></font>&nbsp P2
              </p>
                </div>
            </div>

            <div class="timeline-article timeline-article-bottom">
                <div class="content-date">
                    <span>15-21</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@7</b></font>
              <br><font size = 3><b>@8</b></font>&nbsp P1
              <br><font size = 3><b>@9</b></font>&nbsp P2
              </p>
                </div>
            </div>
               <div class="timeline-article timeline-article-top">
                <div class="content-date">
                    <span>8-14</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@4</b></font>
              <br><font size = 3><b>@5</b></font>&nbsp P1
              <br><font size = 3><b>@6</b></font>&nbsp P2
              </p>
                </div>
            </div>

            <div class="timeline-article timeline-article-bottom">
                <div class="content-date">
                    <span>1-7</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@1</b></font>
              <br><font size = 3><b>@2</b></font>&nbsp P1
              <br><font size = 3><b>@3</b></font>&nbsp P2
              </p>
                </div>
            </div> 
          </div>
          <div class="timeline-end"></div>
        </section>
    </div>
  </div>
</div>
</body>
</html>

相关问题
最新问题