8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. javascript
  3. 根据正值或负值的颜色 div 也显示文本

根据正值或负值的颜色 div 也显示文本

Ansh Arora 2月前
34 0

我制作了这个计数器，但我希望根据正值或负值为 id=\'clicks\' 着色，并基于此附加文本。var clicks = 0; function clickplus() { cli...

我制作了这个计数器，但我希望根据正值或负值为 id=\'clicks\' 着色，并基于此附加文本。 

     var clicks = 0;
    function clickplus() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
 }
  var clicks = 0;
    function clickless() {
        clicks -= 1;
        document.getElementById("clicks").innerHTML = clicks;
 }
         #btn_plus{
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;}
   #btn_less{
  background-color: red; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;}
<body style="background-color:#F0F0F0">
  <center>
    </br></br></br>
    <h1>
      <p style="color:#002244">COUNT: <a id="clicks">0</a></p>
    </h1>
    <button id="btn_plus" type="button" onClick="clickplus()">+1</button>
    <button id="btn_less" type="button" onClick="clickless()">-1</button>
    </center>
    </body>

有人可以帮忙吗？id=\'clicks\' 如果是负数则显示红色，如果是正数则显示绿色，并根据此显示正/负文本。

帖子版权声明 1、本帖标题：根据正值或负值的颜色 div 也显示文本
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Ansh Arora在本站《javascript》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    Stack Overflow 不是代码编写服务，而是帮助人们解决特定的代码问题。首先尝试自己想出解决方案，然后如果遇到困难再寻求帮助。我可以向你保证，快速的谷歌搜索将帮助你快速完成你想要做的事情。

  • 引用 3楼

    请注意，center 标签已弃用。例如，您可以查看 display flex 以及如何使用它来居中元素

  • 引用 4楼

    使用 document.getElementById("clicks").style.color = color; 

    <body style="background-color:#F0F0F0">
<center></br></br></br><h1><p style="color:#002244">CONTAGEM: <a id="clicks">0</a></p></h1>
<button id="btn_plus" type="button" onClick="clickplus()">+1</button>
<button id="btn_less" type="button" onClick="clickless()">-1</button>

    
    </center>
    </body>
    <script>
    var clicks = 0;
    function setColorAndText(clicks){
      let color = (clicks<0)?"red":(clicks>0)?"green":"black";
      let appendText = (clicks<0)?"negative":(clicks>0)?"positive":"";
      document.getElementById("clicks").innerHTML = clicks + " " + appendText;
      document.getElementById("clicks").style.color = color;
    }
    
    function clickplus() {
        clicks += 1;
        setColorAndText(clicks);    
    }
  
    function clickless() {
        clicks -= 1;
        setColorAndText(clicks);           
    }
    </script>
    
    <style>
         #btn_plus{
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;}
   #btn_less{
  background-color: red; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;}
    </style>
  • Jred 2月前 0 只看Ta
    引用 5楼

    正确 CSS 的 delegation eventListener 现代脚本 center 已弃用）

    此外，我还交换了按钮，因为人类通常看到 0 左边的负值 

    const container = document.getElementById('centerDiv');
const clickCounter = document.getElementById('clicks');
const posNeg = document.getElementById('posneg');
let clicks = 0;

const clickIt = (e) => {
  let tgt = e.target.closest('button.btn');
  if (!tgt) return; // not one of the buttons
  let increment = tgt.id === 'btn_plus' ? 1 : -1;
  clicks += increment;
  clickCounter.textContent = clicks;
  posNeg.classList.toggle('neg', clicks < 0);
  posNeg.classList.toggle('pos', clicks > 0);

};

container.addEventListener('click', clickIt);
    body {
  background-color: #F0F0F0
}

#centerDiv {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.btn {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#btn_plus {
  background-color: #04AA6D;
  /* Green */
}

#btn_less {
  background-color: red;
}

.pos::after {
  color:  #04AA6D;
  content: 'Positive'
}
.neg::after {
  color: red;
  content: 'Negative'
}
    <div id="centerDiv">
  <h1>
    <p id="counter" style="color:#002244">COUNT: <a id="clicks">0</a> <span id="posneg"></span></p>
  </h1>
  <button id="btn_less" class="btn" type="button">-1</button>
  <button id="btn_plus" class="btn" type="button">+1</button>
</div>
  • 引用 6楼

    包含 .negative 的 CSS 类即可 color: red 。然后，您可以使用该类 element.classList.toggle() 添加或删除该类，具体取决于语句是真还是假。文本 positive 和负面的 can be added as pseu-element through CSS using ::after and content`： 

    let count = 0;

const BUTTONS = document.querySelectorAll('button');

BUTTONS.forEach(button => {
  button.addEventListener('click', function() {
    switch (this.id) {
      case 'btn_plus':
        count++;
        break;
      case 'btn_less':
        count--;
        break;
    }
    clicks.value = count;
    clicks.classList.toggle('negative', (count < 0));
  })
})
    body {
  background-color: #FOFOFO;
  margin-top: 3rem;
}

div{
  color: #002244;
  font-size: 2em;
  font-weight: 900;
  output {
    color: green;
    &.negative {
      color: red;
      &::after {
        content: ' negative';
      }
    }
    &::after {
      content: ' positive';
    }
  }
}

#btn_plus {
  background-color: #04AA6D;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#btn_less {
  background-color: red;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
    <body style="background-color:#F0F0F0">
    <div>COUNT: <output id="clicks" role="spinbutton">0</output></div>
    <button id="btn_plus" type="button">+1</button>
    <button id="btn_less" type="button">-1</button>
</body>
返回
作者最近主题：