Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.05.2018, 19:53
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

скрипт смены фона
Всем привет.
Подскажите, можно ли при помощи js создать на своем сайте input, чтобы пользователи могли вводить произвольные цвета, например, #f4f4f4 и при этом менялся фон сайта?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 19.05.2018, 20:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,833

Сообщение от madeas
можно ли
да
Ответить с цитированием
  #3 (permalink)  
Старый 19.05.2018, 20:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,833

madeas,
document.body.style.backgroundColor
Ответить с цитированием
  #4 (permalink)  
Старый 19.05.2018, 23:43
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 19.05.2018, 23:53
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 19.05.2018, 23:56
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
  #7 (permalink)  
Старый 20.05.2018, 00:00
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
  #8 (permalink)  
Старый 20.05.2018, 00:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,833

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>
Ответить с цитированием
  #9 (permalink)  
Старый 18.07.2018, 14:21
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Не буду плодить темы, спрошу здесь.
Подскажите, как из этого кода вывести в 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>
Ответить с цитированием
  #10 (permalink)  
Старый 18.07.2018, 14:34
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

document.getElementById('fon').onchange =e=> {
	document.getElementById('res').textContent = e.target.value;
	document.getElementById('colors').style.backgroundColor = e.target.value;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужна помощь (есть работа) Редирект скрипт для iOS 9+ Возможно на AngularJS dimazap Мобильный JavaScript 1 20.01.2017 18:46
Скрипт редеректа но со своеобразной логикой sergofedor06 Javascript под браузер 4 15.09.2016 12:42
Скрипт смены цвета фона CBETIK Работа 0 26.04.2016 16:04
Скрипт смены контента в Div keystation Events/DOM/Window 23 11.03.2016 16:17
Скрипт смены картинок на каждый день года Артемий Б Работа 17 02.12.2010 22:49