Блог

Главная - Вопросы по программированию - случайное изменение цвета с помощью javascript

случайное изменение цвета с помощью javascript

#javascript

Вопрос:

 <!DOCTYPE html>
<html>
    <head>
        <title>Button Homework</title>
        
        <script>
        
            function first()    {
                document.getElementById('type1').style.position = 'absolute';
                document.getElementById('type1').style.left= "100px";
                document.getElementById('type1').style.top= "200px";
                var red = Math.floor(Math.random() * 256);
                var green = Math.floor(Math.random() * 256);
                var blue = Math.floor(Math.random() * 256);

                var newColor = "rgb("  red   ","   green   ","   blue  ")";
            }
            
            function second()   {
                document.getElementById('type1').style.position = 'absolute';
                document.getElementById('type1').style.left= "0px";
                document.getElementById('type1').style.top= "80px";
            }
        </script>
    </head>
    <body>
        <h1>Special Button</h1>
        
        <input id = 'type1' type = 'button' value = 'Click' onclick = 'output();'
                            onmouseover= 'first()' onmouseout= 'second()';' />
    </body>
</html>

Я пытаюсь заставить кнопку меняться на случайные цвета каждый раз, когда вы наводите на нее курсор, но, похоже, я не могу заставить ее работать, Если кто-нибудь знает, как, пожалуйста, помогите мне. Спасибо!

Комментарии:

1. Привет, Кевин, ты имеешь в виду перемещение положения кнопки при наведении курсора мыши?

2. Нет, но для того, чтобы кнопка менялась на случайные цвета каждый раз, когда вы наводите на нее курсор. пример: начинается как белый, но как только вы наведете на него курсор, он изменится на черный и так далее.

3. Ответ Арона точен, вы никогда не назначаете цвет элементу. Но имейте в виду, что запрос DOM сопряжен с определенными затратами, поэтому, когда это возможно, сохраняйте ссылки на элементы, которыми вам нужно манипулировать, и попытайтесь выполнить пакетные изменения, чтобы избежать повторных перерисовок.

Ответ №1:

Все, что вам нужно сделать, это назначить цвет свойству стиля. В данном случае цвет фона кнопки.

 function first() {
  var red = Math.floor(Math.random() * 256);
  var green = Math.floor(Math.random() * 256);
  var blue = Math.floor(Math.random() * 256);

  var newColor = "rgb("   red   ","   green   ","   blue   ")";
  document.getElementById("type1").style.backgroundColor = newColor;
}

Комментарии:

1. Ваше приветствие 🙂 Если это решило вашу проблему, пожалуйста, можете ли вы отметить ее как ответ?

Ответ №2:

Если вы хотите, чтобы ваша домашняя работа выглядела так, как будто вы скопировали ее из Интернета:

 <!DOCTYPE html>
  <head>
    <title>Button Homework</title>
    <style>
      #type1{
        position: absolute;}

      #type1.mouseover{
        left: 100px;
        top: 200px;}

      #type1:not(.mouseover){
        left: 0px;
        top: 80px;}
    </style>
  </head>
  <body>
    <h1>Special Button</h1>
    <input id="type1" onclick="Output()" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)" type="button" value="click">
    <script>
      function MouseOver(button) {
         button.classList.add('mouseover');
         //set backgroundColor to random hex string
         button.style.backgroundColor = '#'   Math.floor(Math.random()*16777215).toString(16);
       }

       function MouseOut(button) {
         button.classList.remove('mouseover');
       }

       function Output() {
         //whatever this does
       }
    </script>
  </body>
</html>

Обратите внимание, что перемещение расположения кнопок запускает событие перемещения мыши, так что это становится довольно сумасшедшим. <style> похоже, это неприменимо, когда вы вставляете его в фрагмент кода.

Метки: