Форум

рони · #11 (**permalink**) 06.09.2017, 17:14

Vardges,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   body{
     display: flex;
      flex-wrap: wrap;
       justify-content: center;
   }

  .element  {
    border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
var elem=document.querySelectorAll('.element');
var color = {};
for (var i=0;i<elem.length;i++){
  elem[i].addEventListener('click',F);
}
function F(){

  var tiv = parseInt(Math.random()*9);
  this.textContent = tiv;
  if (!color[tiv]) {
    var r=parseInt(Math.random()*255);
    var g=parseInt(Math.random()*255);
    var b=parseInt(Math.random()*255);
    color[tiv] = "rgb("+r+", "+g+", "+b+")"

  }
  this.style.backgroundColor = color[tiv]

}


  });

  </script>
</head>

<body>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</body>
</html>

Vardges · #12 (**permalink**) 06.09.2017, 18:11

Сообщение от рони

Vardges,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   body{
     display: flex;
      flex-wrap: wrap;
       justify-content: center;
   }

  .element  {
    border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
var elem=document.querySelectorAll('.element');
var color = {};
for (var i=0;i<elem.length;i++){
  elem[i].addEventListener('click',F);
}
function F(){

  var tiv = parseInt(Math.random()*9);
  this.textContent = tiv;
  if (!color[tiv]) {
    var r=parseInt(Math.random()*255);
    var g=parseInt(Math.random()*255);
    var b=parseInt(Math.random()*255);
    color[tiv] = "rgb("+r+", "+g+", "+b+")"

  }
  this.style.backgroundColor = color[tiv]

}


  });

  </script>
</head>

<body>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</body>
</html>

Нет,тут каждая цифра изначально имеет свой цвет, а нужно чтоб они покрасились только тогда когда есть 2 или более одинаковых цифр.

j0hnik · #13 (**permalink**) 06.09.2017, 18:54

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		div{
			display: inline-block;
			width: 30px;
			height: 30px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<script>
		var elm = document.querySelectorAll('.element');
		elm.forEach(el=> el.onclick=e=>{
				el.innerHTML = Math.floor(Math.random() * 9);
				col();
			});
		function col(){
			elm.forEach(el=>el.style.backgroundColor = 'white');
			var arr = [].slice.call(elm);
			arr.filter((el, i)=> { 
				while (i--) if (+el.textContent == +arr[i].textContent){
					el.style.backgroundColor = 'red';
					arr[i].style.backgroundColor = 'red';
				}
			});
		};
	</script>
</script>
</body>
</html>

может можно как то проще

рони · #14 (**permalink**) 06.09.2017, 18:55

Vardges,
не копируйте сообщение целиком

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   body{
     display: flex;
      flex-wrap: wrap;
       justify-content: center;
   }

  .element  {
    border: 1px dashed  rgb(0, 0, 255); padding: 5px; height: 100px; width: 100px;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
var elem=document.querySelectorAll('.element');
for (var i=0;i<elem.length;i++){
  elem[i].addEventListener('click',F);
}
function F(){

  var tiv = parseInt(Math.random()*9);
  this.textContent = tiv;
  this.setAttribute("tiv", tiv);
  var elem = document.querySelectorAll('[tiv="'+tiv+'"]');
  var color = "transparent";
  if (elem.length > 1) {
    var r=parseInt(Math.random()*255);
    var g=parseInt(Math.random()*255);
    var b=parseInt(Math.random()*255);
    color = "rgb("+r+", "+g+", "+b+")"

  };
  for (var i=0;i<elem.length;i++){
  elem[i].style.backgroundColor = color
  }
}


  });

  </script>
</head>

<body>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript