Jump to content
  • 0

как сделать чтобы квадратики меняли цвет с 1) белого 2) красного 3) синего 4) черного

allcoma

Asked by allcoma,

 Share

Question

allcoma Explorer

allcoma

Posted
Posted 


<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title> - jsFiddle demo by holden321</title>

<style type="text/css">

div {

border: 0px solid black;

width:50px;

height:50px;

float:left;

margin: auto;

text-align: center;

}

#log {text-align:right;}

</style>

<script type="text/javascript">

function zapusk(d) {

if (!d.rgb)

{

d.rgb = 0;

}

s = (d.rgb).toString(16);

while (s.length < 3)

{

s = '0' + s;

}

s = '#' + s;

d.style.backgroundColor = s;

//document.getElementById("log").innerHTML=s;

d.rgb+= 1;

if (d.rgb > 0xfff)

d.rgb = 0;

}

window.onload=function(){

setInterval(function(){zapusk(document.getElementById('cvet1'))}, 100);

setInterval(function(){zapusk(document.getElementById('cvet2'))}, 200);

setInterval(function(){zapusk(document.getElementById('cvet3'))}, 300);

setInterval(function(){zapusk(document.getElementById('cvet4'))}, 400);

}

</script>

</head>

<body>

<div style="width:100px; height:100px; border:0px">

<div id="cvet1"></div>

<div id="cvet2"></div>

<div id="cvet3"></div>

<div id="cvet4"></div>

</div>

<div id="log">#00131e</div>

</body></html>





			
		


		
			

				
					
						

	
	
		

			
				
				

					
				

			
			
			
		

	


					
				
				
			

		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



		

		
		
					
		

			

				
2 answers to this question

				

					
					
				

			

		

	

	



	

		
Recommended Posts

		
	



	
	

		

			
			
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				
			
			



		

	


	
	
	
	
	
		
		

			
				
				

	
		

			
Join the conversation

			

	
				
					You can post now and register later.
				
				If you have an account, sign in now to post with your account.
				
					
Note: Your post will require moderator approval before it will be visible.
				
			

	
		

	




	
	
		
	
		
	
		
	
	
		
		
	
	

		


	
		Guest
	


		

			
				
					
				
					
						
    
							
  • 
								



	
	
	
	

								
							
    • 
						

					
				
					
				
			
			
				
					
						
							
						
						


	

		
		

			
		

		
			
 Answer this question...

		
		

			

				
					×
					  Pasted as rich text.   Paste as plain text instead
				
			

		

		

			

				  Only 75 emoji are allowed.
			

		

		

			

				×
				  Your link has been automatically embedded.   Display as a link instead
			

		

		

			

			

		

		

			

				×
				  Your previous content has been restored.   Clear editor
			

		

		

			

				×
				  You cannot paste images directly. Upload or insert images from URL.
			

		

		
	

		
	

	

	

		

			×
			
		

		

	



						
					
				
					
				
					
				
			
			
    
				
					
						
					
						
					
						
							
  • 
								

    
	

    
								
							
    • 
						
					
				
				
					
  • 

	

    • 
				
			

		

	



			
		

	

	
		

			
				

					


    
          Share
    

    

        
        
            

            
        
    


				

			
			

				


			

			
		

	







	

		
			
				Go to question listing
			
		
	

	




						


	

		
    
			
				
					
					
  • 

    Similar Content
    

    
	
      
	
		
    • 
			
      
				


	
		zeiger2
	

			
      
			
      
				
      Смена background-image при работе с псевдоклассом hover
      
				By 


zeiger2
      
				
					
      
						Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 

      


	
		background-image: none;
	

	
		    background: url(../img/check_icon_red.png) left no-repeat;
	

	
		 
	

	
		Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была.
	


	Должна быть в одном ряду с другими

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		Seadjus
	

			
      
			
      
				
      Как оптимизировать код игры?
      
				By 


Seadjus
      
				
					
      
						Добрый день!
      
	Огромная просьба камнями не кидаться!
      
	Начал изучать JS , пока нет особых продвижений в изучении.
      
	помогите оптимизировать игру в пары. по условиям задания необходимо реализовать игру в пары с таймером, выбором количества карт .
      
	Ниже
      
	https://codepen.io/Seadjus/pen/VwVedaP

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		Mix9
	

			
      
			
      
				
      див уходит за границу экрана
      
				By 


Mix9
      
				
					
      
						есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 

      

.content{
    width: 90%;
    background-color: #333;
}

.video{
    margin: 0px 4px 0px 4px;
    width: 310;
    display: flex;
    flex-direction:column;
}

.video_button_text{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    font-size: 20px;
    color: white;
}

.video_text_div{
    display: inline-block;
    width: 250px;
}

.video_text{
    text-align: justify-all;
    margin: 0px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.slidan_videos{
    margin: 0px 10px 0px 20px;
    overflow: auto;
    width: auto;
    margin-bottom: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

            <div class="content">
                <div class = slidan_videos>
                    <div class = video>
                        <div>
                            <a href = 'ссылка'><img class="img" src=""картинка"></a>
                        </div>
                        <div class = video_button_text>
                            <div class = avatarka_div>
                                <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a>
                            </div>
                            <div class = video_text_div>
                                <p class = video_text><a href="ссылка">текст</a></p>
                            </div>    
                        </div>
                    </div>

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		ilya1203
	

			
      
			
      
				
      Написать файл скрипта, который считает объём комнаты
      
				By 


ilya1203
      
				
					
      
						Прошу помочь с заданием:
      
	Написать файл скрипта, который генерирует три числа, соответствующие значениям высоты, длины и ширины комнаты. Отобразить в консоли:
      
	a.Площадь стен комнаты
      
	b.Объём комнаты
      
	c.*Объём комнаты за вычетом случайно сгенерированного количества чисел, которые определяет объёмы случайно зашедших в комнату людей.
      
	(в итоге запустит скрипт последством консоли)

      


	(заранее огромное спасибо)

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		Марко
	

			
      
			
      
				
      Не работает селектор .class
      
				By 


Марко
      
				
					
      
						Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 

      


      

      

      
					
      
				
			
      
		
      • 
	
	
    

    • 
				
			
		

	


					

					


	

		
		
		
		


	

		
	


	


					

				

			

			
		

		
			
			



	

		×
		


    
	





			
				

					
				

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    • 
				
			

		

	




			







	




	







	

		

			

				
Important Information

				
We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

			

			

				  I accept