Форум

Anna_Medvid · #1 (**permalink**) 09.01.2017, 01:21

<div class="wrapper">
	<div id="ball"></div>
</div>

#ball {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			border: 8px solid black;
			-webkit-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
			-moz-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
			box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
			background: black;
			position: absolute;
			top: 100px;
			left: 100px;
		}

$(function(){
	var col1, col2, col3, topLeft;
	
		col1 = Math.round(Math.random()*255); // рандомно вибираються кольори від 0 до 255
		col2 = Math.round(Math.random()*255);
		col3 = Math.round(Math.random()*255);
		Top = Math.random()*($(window).height()-120);
		Left = Math.random()*($(window).width()-120);
	
	$("#ball").css({
		background: 'rgb('+col1+',' +col2+','+col3+')',
		border: '8px solid rgb('+col2+',' +col3+','+col1+')',
		boxShadow: '0px 1px 30px 0px rgba('+col1+','+col2+','+col3+',0.75)',
		left: Left+'px',
		top: Top+'px'
	}); // і фон border ball рендомно змінюється
		
	});

Как сделать так что бы при открытии браузера автоматически запускалось рандомное размещение div#ball и параметры изменялись постоянно

рони · #2 (**permalink**) 09.01.2017, 01:52

Anna_Medvid,
для этого есть раздел Общие вопросы Javascript

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    #ball {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 8px solid black;
      -webkit-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
      box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
      background: black;
      position: absolute;
      top: 100px;
      left: 100px;
      transition: all 1s cubic-bezier(0,-0.96,.84,1.63);
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
+function fn()
{
 var col1, col2, col3, topLeft;

    col1 = Math.round(Math.random()*255); // рандомно вибираються кольори від 0 до 255
    col2 = Math.round(Math.random()*255);
    col3 = Math.round(Math.random()*255);
    Top = Math.random()*($(window).height()-120);
    Left = Math.random()*($(window).width()-120);

  $("#ball").css({
    background: 'rgb('+col1+',' +col2+','+col3+')',
    border: '8px solid rgb('+col2+',' +col3+','+col1+')',
    boxShadow: '0px 1px 30px 0px rgba('+col1+','+col2+','+col3+',0.75)',
    left: Left+'px',
    top: Top+'px'
  });
  window.setTimeout(fn, 1500)
}()

  });


  </script>
</head>

<body>

<div class="wrapper">


    <div id="ball"></div>


</div>

</body>
</html>

Anna_Medvid · #3 (**permalink**) 09.01.2017, 15:10

Спасибо огромное за помощь!

Форум

Справочник

Discord чат

Курсы javascript