Форум

Timid · #1 (**permalink**) 03.06.2015, 23:59

Требуется при нажатии менять цвет фона несколько раз и потом возвращаться назад к первому
Подскажите...
Сейчас есть такой скрипт.

рони · #2 (**permalink**) 04.06.2015, 00:55

Timid,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var i = 0, bgcolors = ["#FFFFCC", "#CCFFCC", "#FFCCCC", "#DCDCDC", "#FFCC99", ""] ;
       $(".bg_fon").click(function () {
		$("body").css({"backgroundColor" : bgcolors[i++ % bgcolors.length]});

		});
});


  </script>
</head>

<body>  
<a href="#" class="bg_fon">Изменить фон</a>


</body>

</html>

Decode · #3 (**permalink**) 04.06.2015, 01:12

Рони опередил

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        html, body {
            height: 100%;
        }
    </style>
</head>
<body>
    <a href="#" class="link">Change color body</a>

    <script>
        var colors = ["red", "green", "blue", "yellow"], i = 0,
            body = document.body,
            link = document.querySelector('.link');

        link.addEventListener('click', function(e) {
           e.preventDefault();
           body.style.backgroundColor = colors[i % colors.length];
           i++;
        });
    </script>
</body>
</html>

Timid · #4 (**permalink**) 04.06.2015, 14:22

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

Timid,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var i = 0, bgcolors = ["#FFFFCC", "#CCFFCC", "#FFCCCC", "#DCDCDC", "#FFCC99", ""] ;
       $(".bg_fon").click(function () {
		$("body").css({"backgroundColor" : bgcolors[i++ % bgcolors.length]});

		});
});


  </script>
</head>

<body>  
<a href="#" class="bg_fon">Изменить фон</a>


</body>

</html>

Все супер, спасибо, а вот как сделать чтоб через CSS классы менялось

Например есть клаcс CSS BG1, BG2, BG3

Через addClass все время добавляется новое значение.

рони · #5 (**permalink**) 04.06.2015, 14:57

Timid,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .BG1{
    background-color: rgb(0, 0, 255);
  }
  .BG2{
    background-color: rgb(255, 0, 0);
  }
  .BG3{
    background-color: rgb(255, 255, 0);
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var i = -1, bgcolors = ["BG1", "BG2", "BG3",""] ;
       $(".bg_fon").click(function () {
        $("body").removeClass(bgcolors[i % bgcolors.length])
		$("body").addClass(bgcolors[++i% bgcolors.length])

		});
});


  </script>
</head>

<body>
<a href="#" class="bg_fon">Изменить фон</a>
</body>

</html>

Timid · #6 (**permalink**) 06.06.2015, 10:00

Рони спасибо Вам огромное!!!

Форум

Справочник

Discord чат

Курсы javascript