Question

我刚刚开始学习编码，现在我遇到了问题。我已经制作了这个黑色圆圈女巫里面的数字，每次你点击它都会更高，但我现在想要偶数数字是蓝色和奇数红色（1 =红色，2 =蓝色，3 =红色等）< / p>

window.onload = function(){
    var laskuri = document.getElementById('laskuri'); 
    function kasvata() {
        var i =++
        laskuri.innerHTML + i;

        asetaTaustaVari();
    }

    function asetaTaustaVari() {

    }

    laskuri.onclick = kasvata;

}

* {
        box-sizing: border-box;
    }

    main {
        text-align: center;
    }

    #laskuri {
        width: 300px;
        height: 300px;
        background-color: black;
        color: white;
        margin: 50px auto;
        font-size: 200px;
        padding: 30px 0px;
        border-radius: 50%;
        cursor: pointer;
    }

<div id=laskuri>0</div>

Answer 1

您可以通过设置if条件并在其中设置color来完成此操作

 if (val % 2 == 0) {
      color = "blue";
    } else {
      color = "red";
    }

或使用这样的三元运算符

function kasvata() {
  var color = '';
  var i = ++
  document.getElementById('laskuri').innerHTML + i;
  var el = document.getElementById('laskuri');
  color = el.innerHTML % 2 == 0 ? "blue" : "red";
  el.style.color = color;
  asetaTaustaVari();
}

function asetaTaustaVari() {

}

laskuri.onclick = kasvata;

<html lang="fi">

<head>
  <meta charset="utf-8">
  <title>Laskuri</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    main {
      text-align: center;
    }
    
    #laskuri {
      width: 300px;
      height: 300px;
      background-color: black;
      color: white;
      margin: 50px auto;
      font-size: 200px;
      padding: 30px 0px;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <main>
    <div id=laskuri>0</div>

  </main>
</body>

</html>

Answer 2

你可以通过几种方式实现它：

首选：您可以使用特殊的类名并将其与元素一起使用。在JS代码中，您只需更改一个类名，取决于计数器：

"current_observation": {
            "image": {
            "url":"http://icons.wxug.com/graphics/wu2/logo_130x80.png",
            "title":"Weather Underground",
            "link":"http://www.wunderground.com"
            },

可选：您可以更改样式更改的元素的颜色。代码几乎相同：

<style>
    .color_red {
        color: red;
    }
    .color_blue{
        color: red;
    }
</style>

<script>
window.onload = function(){
    var laskuri = document.getElementById('laskuri');
    var i = 0;
    function kasvata() {
        i++;
        laskuri.innerHTML = i;

        asetaTaustaVari();
    }

    function asetaTaustaVari() {
        var clName = i % 2 === 0 ? 'color_blue' : 'color_red';
        laskuri.className = clName;
    }

    laskuri.onclick = kasvata;

}
</script>

P.S。：在您的代码中，请不要用您自己的母语（芬兰语/瑞典语）写，请使用英语单词ALWAYS。不是Laskuri - 而是反击。

Answer 3

您可以从html获取该号码并使用parseInt。然后递增数字并将其添加到html。

然后使用remainder您可以更改颜色。

例如：

＆＃13;

function kasvata() {
  var elm = document.getElementById('laskuri');
  if (elm && elm.innerHTML !== "") {
    var number = parseInt(elm.innerHTML, 10);
    number = number + 1;
    elm.innerHTML = elm.innerHTML = number.toString();
    asetaTaustaVari(number, elm);
  }
}

function asetaTaustaVari(i, elm) {
  if (i % 2 === 0) {
    elm.style.color = "blue";
  } else {
    elm.style.color = "red";
  }
}

laskuri.onclick = kasvata;

＆＃13;

* {
  box-sizing: border-box;
}

main {
  text-align: center;
}

#laskuri {
  width: 300px;
  height: 300px;
  background-color: black;
  color: white;
  margin: 50px auto;
  font-size: 200px;
  padding: 30px 0px;
  border-radius: 50%;
  cursor: pointer;
}

＆＃13;

<main>
  <div id=laskuri>0</div>
</main>

＆＃13;

Answer 4

<!-- Javascript -->

function kasvata() {
            var i =++
                document.getElementById('laskuri').innerHTML + i;

            asetaTaustaVari();
        }

        function asetaTaustaVari() {
            var x = Math.floor(Math.random() * 256);
            var y = Math.floor(Math.random() * 256);
            var z = Math.floor(Math.random() * 256);
            var thergb = "rgb(" + x + "," + y + "," + z + ")";
            console.log(thergb);
            document.getElementById("laskuri").style.color = thergb;
        }

        laskuri.onclick = kasvata;

<!-- CSS3 -->

* {
            box-sizing: border-box;
        }

        main {
            text-align: center;
        }

        #laskuri {
            width: 300px;
            height: 300px;
            background-color: black;
            color: white;
            margin: 50px auto;
            font-size: 200px;
            padding: 30px 0px;
            border-radius: 50%;
            cursor: pointer;
        }

<!-- HTML5 -->

<html lang="fi">
<head>
    <meta charset="utf-8">
    <title>Laskuri</title>
</head>
<body>
<main>
    <div id=laskuri>0</div>
<main>
</body>
</html>

Answer 5

不需要任何其他功能。我认为只需要一个三元运算符。你做了几乎所有事情只需修改你的javascript代码，如bellow

<script>
function kasvata() {
    var i =++
    document.getElementById('laskuri').innerHTML + i;
    var val = document.getElementById('laskuri').innerHTML;
    document.getElementById('laskuri').style.color = val % 2 == 0 ? "blue" : "red";
}
laskuri.onclick = kasvata;
</script>

我希望你可以改变最低限度来完成它。以下是示例https://jsfiddle.net/doehxkLy/

如果你想随意改变颜色。请更改行

document.getElementById('laskuri').style.color = val % 2 == 0 ? "blue" : "red";

要

document.getElementById('laskuri').style.color = "#"+((1<<24)*Math.random()|0).toString(16);

竖起大拇指。

Answer 6

为你做了一个小编码：

https://codepen.io/anon/pen/jZrELZ

你只需要if来查看laskuri的innerHTML是偶数还是奇数。我通过添加/删除类来解决其余问题。你也可以用javascript直接改变背景。

如何根据数字改变颜色

6 个答案: