Задать вопрос
erge

Сергей c0re

Примус починяю
Ответы пользователя по тегу HTML

  • Как на сайте сделать смену картинок и контента?

    erge
    @erge
    Примус починяю
    На чистом CSS Это вряд ли получится сделать, т.к. там нет функций даты и времени, а те что есть CSS 3 Timing Functions предназначены для анимации

    сделать разумеется можно на JavaScript
    Смотрите функции получения времени

    Пример - меняется фон страницы в зависимости от времени суток:
    function changeBackground(){
	var h = (new Date()).getHours();
  var b = document.body; 
  if (h > 0 && h < 6) {
  	// ночь
  	img = 'https://images.wallpaperscraft.com/image/moon_branch_night_clouds_48105_1920x1080.jpg';
  } else if (h >=6 && h < 10) {
  	// утро
  	img = 'https://i.artfile.me/wallpaper/11-09-2012/1920x1080/priroda-voshody-zakaty-lug-voshod-utro-t-660656.jpg';
  } else if (h >= 10 && h < 19) {
  	// день
    img = 'https://get.wallhere.com/photo/sunlight-nature-grass-sky-field-horizon-cloud-grassland-meadow-plain-1920x1080-px-prairie-computer-wallpaper-cumulus-573793.jpg';
  } else if (h >= 19) {
  	// вечер
    img = 'https://www.bmwunstoppable.com/wp-content/uploads/2017/03/5nXkqs.jpg';
  }
  b.style = 'background-image: url('+img+')';
  setTimeout(changeBackground, 60000);
}

changeBackground();


    PS: Стили (например фон элемента) можно менять через свойство style элемента
    el.style = 'background-image: url('+img+')';

    контент через свойство .innerHTML
    и т.д., смострите свойства и методы DOM (Document Object Model)
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать, чтобы при нажатии на блок выполнялась функция, где из этого блока берётся фон и передаётся в другой блок на JS?

    erge
    @erge
    Примус починяю
    1) Поиск в яндекс: галерея слайдер на javascript - множество готовых решений.

    2) в функцию по onclick нужно передать ссылку на сам объект - this
    div onclick='img(this)'


    <html>
<script>
function img(el) {
	el.style.backgroundImage = "url(https://img3.goodfon.ru/original/1920x1080/6/a4/krasivaya-devushka-amber-heard.jpg)"
}
</script>
	<body>
		<div onclick='img(this)' style='width:100%;height:100%;margin-bottom: 20px; background-image: url(https://vdudvdud.ru/wa-data/public/shop/products/30/00/30/images/296/296.970.jpg);'></div>
	</body>
</html>


    3) вот пример галереи БЕЗ обращения по ID и ClassName, но нужно четко представлять себе структуру документа, поэтому с Id и ClassName все же удобнее, по крайней мере находить блок где надо менять фон, потому что такая конструкция
    document.body.children[0].children[0].style.backgroundImage = document.body.children[0].children[1].children[0].style.backgroundImage;

    это , ну ппц....

    вот галлерея:
    <html>
<style>
.bigimage {
	width:100%;
	height:75%;
	margin-bottom: 20px;
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.thumbnail {
	float:left;
	width:19%;
	height:20%;
	border-style: solid;
	border-width: 1px;
	border-color: #333390;
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
</style>
<script>
window.onload = function () {
	document.body.children[0].children[0].style.backgroundImage = document.body.children[0].children[1].children[0].style.backgroundImage;
}

function img(el) {
	el.parentElement.parentElement.children[0].style.backgroundImage = el.style.backgroundImage;
}
</script>
	<body>
	<div>
		<div class="bigimage"></div>
		<div>
			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://hdqwalls.com/download/willa-holland-5k-2018-tc-1920x1080.jpg)"></div>
			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://img3.goodfon.ru/original/1920x1080/6/a4/krasivaya-devushka-amber-heard.jpg)"></div>
			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://img1.goodfon.com/original/1920x1080/3/9f/anastasiya-scheglova-devushka-4354.jpg)"></div>
			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://img3.goodfon.ru/wallpaper/original/a/86/kira-kristina-naytli-keira.jpg)"></div>
			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://wallbox.ru/wallpapers/main2/201731/1501485774597edace3af7c6.85452886.jpg)"></div>
		</div>
	</div>
	</body>
</html>


    PS: смотрите (изучайте) свойства и методы DOM и пр. пр.
    Ответ написан
    4 комментария
    4 комментария

  • Как поделить страницу на 2 области (на каждой своя полоса прокрутки)?

    erge
    @erge
    Примус починяю
    самое простое это использовать iframe
    Ответ написан
    2 комментария
    2 комментария