1 Тема від ostap34PHP Востаннє редагувалося ostap34PHP (07.05.2018 22:23:16)

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 770
    • Репутація: 454

Тема: Як зробити мигаючий фон JS?

Ось що в мене вийшло...

        <h1>test☺☺☺</h1>
        <style>
            body{
                background-color: black;
                color: #775;
            }   
            h1{
                text-align: center;
                font-size: 50px;
            }
        </style>
        <script>
                setInterval(black(),1000);
                setInterval(white(),1000);

            function white(){
                document.bgcolor = "#fff";
            }
            function black(){
                document.bgcolor = "#000";
            }

        </script>
Подякували: Сергій781

ostap34PHP вебсайт

2 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 770
    • Репутація: 454

Re: Як зробити мигаючий фон JS?

Остап :D , можна просто на фон дати мигаючу .gif картинку!

ostap34PHP вебсайт

3 Відповідь від Betterthanyou

  • Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

Re: Як зробити мигаючий фон JS?

1) Чому ви думаєте що document.bgcolor щось міняє ?
2) Якщо ви одночасно задаєте інтервал в 1 секунду то як він має спрацювати ? Це те саме що написати "зміни колір на білий" і потім зразу "зміни колір на чорний"
3) setInterval приймає в якості першого параметра ім'я функції (не black() а black)

Ось приклад

    <h1>test</h1>
    <style>
        body {
            background-color: black;
            color: #775;
        }

        h1 {
            text-align: center;
            font-size: 50px;
        }
    </style>
    <script>

            setInterval(changeColor, 1000);

            var currentColor = 0;

            function changeColor()
            {
                if (currentColor == 0)
                {
                    document.body.style.backgroundColor = "white";
                    currentColor++;
                }
                else if (currentColor == 1)
                {
                    document.body.style.backgroundColor = "black";
                    currentColor = 0;
                }
            }

    </script>
Подякували: mike, ostap34PHP, 221VOLT3

Betterthanyou вебсайт

4 Відповідь від sapientisat Востаннє редагувалося sapientisat (12.01.2017 17:27:39)

  • sapientisat
  • Користувач
  • Поза форумом
  • Дата реєстрації: 01.12.2016
  • Повідомлень: 24
    • Репутація: 29

Re: Як зробити мигаючий фон JS?

Луркай ось тут:
http://www.w3schools.com/css/css3_animations.asp
Через CSS набагато простіше це зробити.
Перший же приклад - те, що треба, тільки duration встанови на нескінченність.

Якщо хочеш через JS - зроби поступову зміну кольорів і загорни це в цикл.

ЩОсь таке одразу приходить в голову (в дії не перевіряв; звісно ж, це може бути не найкращий варіант:

<script>
            let currentColor = 0;
            document.bgcolor = "rgb(0,0,0)";
            const changingColorStep = 51;
            let isAscending = true; //true - from black to white, false - from white to black
            const durationOfStep = 10;

            function nextStep(){

                if (isAscending){
                    if (currentColor === 255){
                        isAscending = false;
                        currentColor -= changingColorStep;
                    }
                    else currentColor += changingColorStep;
                }
                else {
                    if (currentColor == 0){
                        isAscending = true;
                        currentColor += changingColorStep;
                    }
                    else currentColor -= changingColorStep;
                }
                updateBackgroundColor();
            }

            function updateBackgroundColor(){
                document.bgcolor = `rgb(${currentColor},${currentColor},${currentColor})`;
            }
            setInterval(nextStep, durationOfStep);
 
</script>
Подякували: ostap34PHP, 221VOLT, Сергій783

5 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 770
    • Репутація: 454

Re: Як зробити мигаючий фон JS?

Дуже дякую!

ostap34PHP вебсайт

6 Відповідь від 221VOLT Востаннє редагувалося 221VOLT (12.01.2017 21:54:35)

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 720
    • Репутація: 1876

Re: Як зробити мигаючий фон JS?

sapientisat написав:

Луркай ось тут:
http://www.w3schools.com/css/css3_animations.asp
Через CSS набагато простіше це зробити.
Перший же приклад - те, що треба, тільки duration встанови на нескінченність.

Якщо хочеш через JS - зроби поступову зміну кольорів і загорни це в цикл.

ЩОсь таке одразу приходить в голову (в дії не перевіряв; звісно ж, це може бути не найкращий варіант:

<script>
            let currentColor = 0;
            document.bgcolor = "rgb(0,0,0)";
            const changingColorStep = 51;
            let isAscending = true; //true - from black to white, false - from white to black
            const durationOfStep = 10;

            function nextStep(){

                if (isAscending){
                    if (currentColor === 255){
                        isAscending = false;
                        currentColor -= changingColorStep;
                    }
                    else currentColor += changingColorStep;
                }
                else {
                    if (currentColor == 0){
                        isAscending = true;
                        currentColor += changingColorStep;
                    }
                    else currentColor -= changingColorStep;
                }
                updateBackgroundColor();
            }

            function updateBackgroundColor(){
                document.bgcolor = `rgb(${currentColor},${currentColor},${currentColor})`;
            }
            setInterval(nextStep, durationOfStep);
 
</script>

не в цикл, а викликати по-таймеру(в таймер)

http://htmlbook.ru/css/background
тут - на сторінках знизу є як змінювати css з js (обєктна модель)

http://learn.javascript.ru/settimeout-setinterval
тут- про таймери в js

ost.bregin2014 написав:

Дуже дякую!

дякую- то є кнопочка під повідомленнями :)
а ще - можна/треба і іншим допомагати)

успіхів!!))

Подякували: Betterthanyou, Monolith, ostap34PHP3

221VOLT вебсайт

7 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як зробити мигаючий фон JS?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Просто заголовок</title>
  <style>
    body {
      background-color: red;
    }
  </style>
  <script>
    window.onload = function () {

      var color1 = 'red';
      var color2 = 'green';

      setInterval(function () {
        document.body.style.backgroundColor = ( document.body.style.backgroundColor == color1 ) ? color2 : color1;
      }, 100);
    }
  </script>
</head>
<body>

</body>
</html>

Або так:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Просто заголовок</title>
  <style>
    body {
      background-color: red;
      animation-name: blink;
      animation-duration: 0.1s;
      animation-iteration-count: infinite;
    }
    @keyframes blink {
      from { background-color: red; }
      to { background-color: green; }
    }
  </style>
</head>
<body>

</body>
</html>
Подякували: 221VOLT, ostap34PHP2