主页 / 问题 / 1127914
Accepted
Даша Новикова
Asked:2020-05-19 16:24:08 +0000 UTC2020-05-19 16:24:08 +0000 UTC

基于数字的色块

  • 772

PHP 生成如下数据：

<div class="calculate__content">
    <div class="calculate__content-row">
        <div class="calculate__content-cod">
            КОД
        </div>
        <div class="calculate__content-price">
            Сумма
        </div>
    </div>
</div>

在代码字段所在的位置，将生成 4 位数字。

最好是如何在纯 js 上使块的颜色根据数字的 1 位（1、2、3 等最多 9）而变化？

我可怜的努力

let elements = document.querySelectorAll('.calculate__content-cod');

 for (let elem of elements) {

        switch(elem[0]) {
          case '0': 
            elem.style.background-color: = "red";
            break;

          case '1': 
            ...
            break;

          default:
            ...
            break;
        }
  }
javascript

2 个回答

  1. Best Answer

    如果我理解正确，那么解决方案是“在额头上”：

    let aColor = ['transparent', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet', 'grey', 'tomato'];
[...document.querySelectorAll('.calculate__content-cod')].forEach(el => {
  el.style.backgroundColor = aColor[+el.innerText[0]];
});
    <div class="calculate__content">
  <div class="calculate__content-row">
    <div class="calculate__content-cod">
      5623
    </div>
    <div class="calculate__content-price">
      Сумма
    </div>
  </div>
</div>
<div class="calculate__content">
  <div class="calculate__content-row">
    <div class="calculate__content-cod">
      8456
    </div>
    <div class="calculate__content-price">
      Сумма
    </div>
  </div>
</div>
<div class="calculate__content">
  <div class="calculate__content-row">
    <div class="calculate__content-cod">
      1679
    </div>
    <div class="calculate__content-price">
      Сумма
    </div>
  </div>
</div>
<div class="calculate__content">
  <div class="calculate__content-row">
    <div class="calculate__content-cod">
      9534
    </div>
    <div class="calculate__content-price">
      Сумма
    </div>
  </div>
</div>

    • 2

  2. 赶上大傻，但这段代码与IE无关！

    function color(){
	const calc_kod = document.getElementsByClassName( "calculate__content-cod" )
		for (let n of calc_kod){
		let arcolor = {1 : '#DC143C', 2 : '#8B0000', 3 : '#FF4500', 
 					   4 : '#ADFF2F', 5 : '#00FFFF', 6 : '#FFFF00',
 					   7 : '#0000CD', 8 : '#FF00FF', 9 : '#000000'};
 		n.style.backgroundColor = arcolor[+n.innerText];
}

    • 1

相关问题