8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

根据正值或负值的颜色 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)
  • Stack Overflow 不是代码编写服务,而是帮助人们解决特定的代码问题。首先尝试自己想出解决方案,然后如果遇到困难再寻求帮助。我可以向你保证,快速的谷歌搜索将帮助你快速完成你想要做的事情。

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

  • 使用 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>
  • 包含 .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>
返回
作者最近主题: