Какой тип функции мне следует использовать для копирования случайно сгенерированного шестнадцатеричного значения? - PullRequest
Новая
       0

Какой тип функции мне следует использовать для копирования случайно сгенерированного шестнадцатеричного значения?

1 голос
/ 20 июня 2020

Я пытаюсь применить функцию к кнопке copyHexValue, чтобы скопировать сгенерированное шестнадцатеричное значение в буфер обмена пользователя. Есть ли предложения относительно того, какой код мне следует включить в функцию? 

function genNewColor() {
  var symbols, color;
  symbols = "0123456789ABCDEF";

  color = "#";
  for (var i = 0; i < 6; i++) {
    color = color + symbols[Math.floor(Math.random() * 16)]
  }
  document.body.style.background = color;
  document.getElementById("hex").innerHTML = color
}
body {
  margin: 0;
  padding: 0;
  background: #161818;
  font-family: "Consolas";
}

.color {
  margin-top: 300px;
  text-align: center;
}

#hex {
  display: block;
  color: white;
  font-size: 100px;
  text-transform: uppercase;
  margin: 0px;
}

.color button {
  background: none;
  outline: 10px;
  color: white;
  cursor: pointer;
  font-size: 40px;
  border: 3px solid white;
}
<!DOCTYPE html>
<html>

<head>
  <title>
    Color Generator
  </title>
</head>

<body>

  <div class="color">
    <span id="hex">#??????</span>
    <button onclick="genNewColor()">Generate new random color</button>
    <button onclick="copyHexValue()">Copy hex value</button>
  </div>

</body>

</html>

Ответы [ 2 ]

1 голос
/ 20 июня 2020

Это то, что вы хотите. Вы можете узнать больше о копировании в буфер обмена в школах w3 - здесь

Просто запустите сниппет, чтобы увидеть его в действии. 

function genNewColor() {
  var symbols, color;
  symbols = "0123456789ABCDEF";

  color = "#";
  for (var i = 0; i < 6; i++) {
    color = color + symbols[Math.floor(Math.random() * 16)]
  }
  document.body.style.background = color;
  document.getElementById("hex").innerHTML = color
}

function copyHexValue() {
  var copyHex = document.createElement('input');
   copyHex.value = document.getElementById("hex").innerHTML;
   document.body.appendChild(copyHex);
   copyHex.select();
   document.execCommand('copy');
   alert('Copied '+copyHex.value)
   console.log('Copied '+copyHex.value)
   document.body.removeChild(copyHex);    
}
body {
  margin: 0;
  padding: 0;
  background: #161818;
  font-family: "Consolas";
}

.color {
  margin-top: 300px;
  text-align: center;
}

#hex {
  display: block;
  color: white;
  font-size: 100px;
  text-transform: uppercase;
  margin: 0px;
}

.color button {
  background: none;
  outline: 10px;
  color: white;
  cursor: pointer;
  font-size: 40px;
  border: 3px solid white;
}
<!DOCTYPE html>
<html>

<head>
  <title>
    Color Generator
  </title>
</head>

<body>

  <div class="color">
    <span id="hex">#??????</span>
    <button onclick="genNewColor()">Generate new random color</button>
    <button onclick="copyHexValue()">Copy hex value</button>
  </div>

</body>

</html>
0 голосов
/ 20 июня 2020

Используйте эту функцию для копирования шестнадцатеричного цвета. 

 function copyHexValue(){

    const el = document.createElement('textarea');

    el.value = document.getElementById("hex").innerHTML;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...