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>
|
Цитата:
|
<!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>
может можно как то проще |
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>
|
| Часовой пояс GMT +3, время: 18:20. |