21.01.2018, 12:45
|
|
Новичок на форуме
|
|
Регистрация: 21.01.2018
Сообщений: 2
|
|
|
Исчезающий текст, можно ли упростить скрипт?
Собственно, имеется скрипт. Это вставляем в боди:
|
Код:
|
<body onload='fn();fz();'> |
Это отображается:
|
Код:
|
<span id='saved'> что-то тут написано</span>
<span id='boom'> какой-то текст </span> |
А это сам скрипт:
|
Код:
|
<script>
var saved = document.getElementById('saved');
var color = 0
function fn(){
saved.style.color = 'rgb('+255+','+color+','+color+')'
color += 20
if(color < 255) setTimeout(fn, 100)
else {saved.style.color = 'rgb(255,255,255)';return;}
}
</script>
<script>
var boom = document.getElementById('boom');
var color = 0
function fz(){
boom.style.color = 'rgb('+255+','+color+','+color+')'
color += 20
if(color < 255) setTimeout(fz, 400)
else {boom.style.color = 'rgb(255,255,255)';return;}
}
</script> |
Если внимательно приглядеться, то их тут два, на самом то деле ))) Всё работает нормально. Так как надо. Но кажется мне, что это как-то... эммм.. по чайниковски что ли... что можно это сделать проще. Но как именно... вот этого я не понимаю. Попробовал покрутить getElementByClassName, но что-то у меня ничего толкового из этого не вышло. Суть в том, что скрипт либо читает только один span, заставляя исчезнуть, либо вообще никаких реакций.
Сама же задача заключается в том, что у меня таких спанов может быть... ну скажем двадцать. Присвоить им циклом через пхп уникальные цифровые идентификаторы не проблема, проблема в том, что этот скрипт не ловит цифры(это раз), а два - даже если он словит первый спан, то остальные останутся... не тронутыми.
То есть, мне либо для каждого нового текстового блока создавать новый script , либо доработать этот таким образом, чтобы он ловил все идентификаторы, которые надо убра.. ну, чтобы они исчезли(в данном случае побелели).
То есть, к примеру, есть у меня такое:
По длинной дороге идёт большой ослик и помахивает коротким хвостиком, отгоняя назойливых мух.
В данном случае "длинной, большой, коротким, назойливых" заключаются в спаны с идентификаторами id=01, id=02, id=03, id=04, а при запуске скрипта эти спаны глушатся. Соответственно, остаться в видимом спектре должно "По дороге идёт ослик и помахивает хвостиком, отгоняя мух."
Я не вдаюсь в подробности того, как именно это всё реализовывается и расставляется, но мне бы хотелось понять, можно ли как-то упростить работу скрипта, на который возложена конкретная задача. И.. если можно, то как именно.
|
|
21.01.2018, 13:02
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
Djavastik,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test {
color: #FF0000;
transition: 2s;
}
.active .test{
color: #FFFFFF;
}
</style>
</head>
<body onload='document.body.classList.add("active")'>
<span class="test"> что-то тут написано</span>
<span class="test"> какой-то текст </span>
</body>
</html>
|
|
21.01.2018, 17:12
|
|
Новичок на форуме
|
|
Регистрация: 21.01.2018
Сообщений: 2
|
|
|
- Здравствуйте, взвесьте пожалуйста килограмм масла
- О, вы знаете... у нас есть маргарин
- То есть... масла у вас нет?
- А чем вам не нравится наш маргарин?
- Дело в том, что у нас пятизвёздочный ресторан
- А у нас самый лучший маргарин на свете
- Хорошо, взвесьте пожалуйста килограмм маргарина
- Здравствуйте, что на бутерброде с икрой делает маргарин?
- О, вы знаете... у нас самые лучшие бутерброды!
- Но что на бутерброде за 1000 евро делает маргарин?
- Вам не понравилось?
- Дело в том, что нам бы хотелось отведать лучшего масла, с лучшей икрой в лучшем ресторане города
- Да, но вы сами продали нам маргарин
Рони, у вас замечательный пример с использованием css. Спасибо. Однако, мне интересна реализация на java.
|
|
21.01.2018, 17:47
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
Сообщение от Djavastik
|
|
Однако, мне интересна реализация на java.
|
тогда вы ошиблись форумом 
|
Сообщение от Djavastik
|
|
Попробовал покрутить getElementByClassName
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test {
color: #FF0000;
transition: 2s;
}
.active .test{
color: #FFFFFF;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".test"), function(el) {
var color = 0;
void function fz() {
el.style.color = "rgb(" + 255 + "," + color + "," + color + ")";
color += 20;
if (color < 255) {
setTimeout(fz, 400);
} else {
el.style.color = "rgb(255,255,255)";
return;
}
}();
});
});
</script>
</head>
<body >
<span class="test"> что-то тут написано</span>
<span class="test"> какой-то текст </span>
</body>
</html>
|
|
21.01.2018, 17:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
Djavastik,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test {
color: #FF0000;
transition: .1s;
display:block;
font-size: 24px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".test"), function(el,i) {
var color = 0;
function fz() {
el.style.color = "rgb(" + 255 + "," + color + "," + color + ")";
color += 20;
if (color < 255) {
setTimeout(fz, 100);
} else {
el.style.color = "rgb(255,255,255)";
return;
}
};
setTimeout(fz, 1200 * i);
});
});
</script>
</head>
<body >
<span class="test">- Здравствуйте, взвесьте пожалуйста килограмм масла</span>
<span class="test">- О, вы знаете... у нас есть маргарин</span>
<span class="test">- То есть... масла у вас нет?</span>
<span class="test">- А чем вам не нравится наш маргарин?</span>
<span class="test">- Дело в том, что у нас пятизвёздочный ресторан</span>
<span class="test">- А у нас самый лучший маргарин на свете</span>
<span class="test">- Хорошо, взвесьте пожалуйста килограмм маргарина</span>
<span class="test">- Здравствуйте, что на бутерброде с икрой делает маргарин?</span>
<span class="test">- О, вы знаете... у нас самые лучшие бутерброды!</span>
<span class="test">- Но что на бутерброде за 1000 евро делает маргарин?</span>
<span class="test">- Вам не понравилось?</span>
<span class="test">- Дело в том, что нам бы хотелось отведать лучшего масла, с лучшей икрой в лучшем ресторане города</span>
<span class="test">- Да, но вы сами продали нам маргарин</span>
</body>
</html>
|
|
22.01.2018, 10:51
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Вариант
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test {
color: #FF0000;
transition:all .4s 0 ease;
}
span { font-size:10pt; }
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".test"), function(el) {
var opa = 1, fs = 10;
void function fz() {
el.style.opacity = opa;
el.style.fontSize = fs + "pt";
opa -= 0.1, fs -= 1;
if (opa > 0) {
setTimeout(fz, 400);
} else {
el.style.opacity = 0;
el.style.fontSize = 0;
return;
}
}();
});
});
</script>
</head>
<body >
<span>По</span>
<span class="test"> длинной</span>
<span> дороге идёт</span>
<span class="test"> большой</span>
<span> ослик и помахивает</span>
<span class="test"> коротким</span>
<span> хвостиком, отгоняя</span>
<span class="test"> назойливых</span>
<span> мух.</span>
</body>
</html>
Не смог добиться плавного изменения размера 
Последний раз редактировалось Dilettante_Pro, 22.01.2018 в 11:38.
|
|
22.01.2018, 15:45
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Dilettante_Pro,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test {
color: #FF0000;
transition:all .4s 0 ease;
}
span { font-size:10pt; }
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".test"), function(el) {
var opa = 1, fs = 10;
void function fz() {
el.style.opacity = opa;
el.style.fontSize = fs + "pt";
opa -= 0.001, fs -= 0.01;
if (opa > 0) {
setTimeout(fz, 4);
} else {
el.style.opacity = 0;
el.style.fontSize = 0;
return;
}
}();
});
});
</script>
</head>
<body >
<span>По</span>
<span class="test"> длинной</span>
<span> дороге идёт</span>
<span class="test"> большой</span>
<span> ослик и помахивает</span>
<span class="test"> коротким</span>
<span> хвостиком, отгоняя</span>
<span class="test"> назойливых</span>
<span> мух.</span>
</body>
</html>
|
|
22.01.2018, 16:44
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
j0hnik,
Такой вариант очевиден, я надеялся как-то при помощи transition сгладить шаги
|
|
|
|
