@rikimaru14

Как перенести данные с javascript на HTML. Сложно ли это сделать?

Не осуждайте меня за очень плохое знание джаваскрипт и хтмл , ладно перейду к сути , однажды на хабре я увидел пост с о том как сделать свои собственные оверлеи на donation alerts (донаты у стримеров короче) , там нужен socket io , простую вещь я сделал на джава скрипте message amount username отображается , но это был просто текст без анимации и всего нужного , я нашел готовое оформление на HTML , и проблема в том что я не знаю как сделать ТАК что бы когда я нажимал " Отправить тестовое оповещение " у меня вместо готового несвязанного текста появился ник человека который мне задонатил и конечно же сумма и текст. Я сделаю скриншоты и прикреплю этот готовый код если получится (я тут впервые).
5d72c10993098495837652.png
Вот код --->
<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>
    <script src="script.js"></script>
	<script src= "var msg = JSON.parse(msg);"> </script>
		<title>My Stream Animated Panels</title>
		<meta http-equiv="refresh" content="60">
		<style>
			@font-face {
				font-family: 'Dolce Vita';
				src: url('fonts/Dolce Vita.ttf');
				}
			#reminderContainer {
				width: 0px;
				height: 0px;
				background: #2e5794;
				position: absolute;
				top: 0px;
				left: 0px;
				overflow: hidden;
				color: white;
				font-family: 'Dolce Vita';
				-webkit-box-shadow: 0px 0px 20px #0f3369;
				-webkit-animation: animateReminder 10s 0s 1;
				}
			#reminderHeader {
				width: 400px;
				height: 26px;
				background: #0f3369;
				position: relative;
				overflow: hidden;
				text-align: center;
				font-size: 24px;
				}
			#reminderContent {
				width: 400px;
				height: 94px;
				background: #2e5794;
				position: relative;
				overflow: hidden;
				color: white;
				}
			#twitchLogo {
				width: 90px;
				height: 90px;
				float: left;
				}
				
			@-webkit-keyframes animateReminder {
				0%, 100% {
					width: 0px;
					height: 24px;
					}
				20%, 80% {
					width: 400px;
					height: 24px;
					}
				30%, 70% {
					width: 400px;
					height: 120px;
					}
				}
		</style>		
	</head>
	<body>
		<div id="reminderContainer">
			<div id="reminderHeader">
				<span> msg.username :</span>
			</div>

			<div id="reminderContent">
				<image id="twitchLogo" src="images\twitchLogo.png">
				<div="reminderContentText">
					<span>
						Like what you see in the stream?<br>
						Hit that follow button below!
					</span>
				</div>
			</div>
			
		</div>
	</body>
</html>
  • Вопрос задан
  • 590 просмотров
Решения вопроса 1
airman66
@airman66
Я учу веб-программирование и уже знаю css+html!!!
Если я правильно понял, то ты записываешь значения переменных в объект document вместо того, чтобы записать эти значения в дивы, которые можно стилизовать через CSS. Если что записывать в них через js вот так:
<!DOCTYPE html>
<html>
<head>
<title>Донат</title>
<meta charset="utf-8">
</head>
<body>
   <div class="name"></div>
   <div class="num"></div>
   <div class="currency"></div>
   <script>
     let name = "имя";
     let num = 100;
     let currency = "RUB";
     document.querySelector(".name").innerHTML = name;
document.querySelector(".num").innerHTML = num;
document.querySelector(".currency").innerHTML = currency;
  </script>
</body>
</html>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы