скрипт смены фона
Всем привет.
Подскажите, можно ли при помощи js создать на своем сайте input, чтобы пользователи могли вводить произвольные цвета, например, #f4f4f4 и при этом менялся фон сайта? Спасибо. |
Цитата:
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: red;
transition: 2s;
}
</style>
</head>
<body>
<input type="text" id="fon"> Цвет фона <button id="but">сменить</button>
<script>
document.getElementById('but').onclick = e => document.body.style.backgroundColor = document.getElementById('fon').value;
</script>
</body>
</html>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
цвет фона <br>
<input type="range" class="color" min="0" max="255" value="255">R<br>
<input type="range" class="color" min="0" max="255" value="255">G<br>
<input type="range" class="color" min="0" max="255" value="255">B<br>
<script>
var col = document.querySelectorAll('.color');
[].forEach.call(col, function(el){
el.oninput =e=> document.body.style.backgroundColor = `rgb(${col[0].value},${col[1].value},${col[2].value})`;
});
</script>
</body>
</html>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: red;
transition: 2s;
}
</style>
</head>
<body>
<input type="color" id="fon"> Цвет фона
<script>
document.getElementById('fon').onchange= e => document.body.style.backgroundColor = e.target.value;
</script>
</body>
</html>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
transition: 2s;
}
</style>
</head>
<body>
Цвет фона
<select name="" id="fon">
<option value="white">white</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
<script>
document.getElementById('fon').onchange= e => document.body.style.backgroundColor = e.target.value;
</script>
</body>
</html>
|
j0hnik,
:)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
transition: .3s;
}
</style>
</head>
<body>
цвет фона <br>
<input type="range" class="color" min="0" max="255" value="255">R<br>
<input type="range" class="color" min="0" max="255" value="255">G<br>
<input type="range" class="color" min="0" max="255" value="255">B<br>
<script>
var col = [...document.querySelectorAll('.color')];
col.forEach(el => el.oninput =e=> document.body.style.backgroundColor = `rgb(${col.map(e => e.value)})`);
</script>
</body>
</html>
|
Не буду плодить темы, спрошу здесь.
Подскажите, как из этого кода вывести в div id="res" значение выбранного цвета? Например, если пользователь выбрал #333333
<input type="color" id="fon">
<div id="colors"></div>
<div id="res"></div>
<script>
document.getElementById('fon').onchange= e => document.getElementById('colors').style.backgroundColor = e.target.value;
</script>
|
document.getElementById('fon').onchange =e=> {
document.getElementById('res').textContent = e.target.value;
document.getElementById('colors').style.backgroundColor = e.target.value;
}
|
| Часовой пояс GMT +3, время: 03:34. |