Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.05.2022, 08:09
Интересующийся
Отправить личное сообщение для maiskiykot Посмотреть профиль Найти все сообщения от maiskiykot
 
Регистрация: 11.09.2018
Сообщений: 28

Как исключить первый символ из обработки скриптом?
Приветствую! Силами коллективного разума был доработан скрипт старения шрифта. Однако он срабатывает только для первого элемента dom. Начиная со второго повторяющегося элемента уже опять первый символ обрабатывается. Подскажите: что делаю не так? Спасибо!

const typing = document.querySelectorAll('.about-content-1');

function type(element) {

function randomOpacity() {
  return (Math.floor(Math.random() * 50) + 50)/100;
}

function randomEms() {
  if (Math.random() > .8) {
  return (Math.floor(Math.random() * 100) - 50)/800;
  }
  else {
    return 0;
  }
}

function wrap(char,i) { // попытка исключить из обработки первый символ
   if( i === 0 ) return '<span style="padding-left: 30px; font-family: Pattaya; font-size: 28px; font-weight: 600; color: #743f49;">'+char+'</span>'; 
   return '<span style="opacity:' + randomOpacity() + '; text-shadow:' + randomEms() + 'em ' + randomEms() + 'em currentColor;">' + char + '</span>';
}


const wrappedText = Array.from(element.textContent).map(wrap);

element.innerHTML = wrappedText.join('');
  
}

typing.forEach(type);

Последний раз редактировалось maiskiykot, 27.05.2022 в 08:16.
Ответить с цитированием
  #2 (permalink)  
Старый 27.05.2022, 08:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,195

maiskiykot,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 27.05.2022, 08:27
Аспирант
Отправить личное сообщение для Дмитрий Луценко Посмотреть профиль Найти все сообщения от Дмитрий Луценко
 
Регистрация: 24.05.2022
Сообщений: 36

Извините за глупый вопрос, но как это должно выглядеть?
https://prnt.sc/dEw3AD3nhVXK
Ваш скрипт обрабатывает все символы
Ответить с цитированием
  #4 (permalink)  
Старый 27.05.2022, 08:28
Интересующийся
Отправить личное сообщение для maiskiykot Посмотреть профиль Найти все сообщения от maiskiykot
 
Регистрация: 11.09.2018
Сообщений: 28

Это сложно для меня. Просто может что-то изменить в этом коде?
Разметка примерно такая:
<div class="content-1"><p>Текст 1</p></div>
<div class="content-1"><p>Текст 2</p></div>
<div class="content-1"><p>Текст 3</p></div>
Ответить с цитированием
  #5 (permalink)  
Старый 27.05.2022, 08:31
Интересующийся
Отправить личное сообщение для maiskiykot Посмотреть профиль Найти все сообщения от maiskiykot
 
Регистрация: 11.09.2018
Сообщений: 28

Сообщение от Дмитрий Луценко Посмотреть сообщение
Извините за глупый вопрос, но как это должно выглядеть?
https://prnt.sc/dEw3AD3nhVXK
Ваш скрипт обрабатывает все символы
Имеется в виду именно эффект старения. Добавлена только обработка первого символа в параграфе. Начиная со второго параграфа она не работает. В идеале, конечно, хочется чтобы вообще скрипт не трогал первый символ и обрабатывать его с помощью css

Последний раз редактировалось maiskiykot, 27.05.2022 в 08:33.
Ответить с цитированием
  #6 (permalink)  
Старый 27.05.2022, 08:32
Аспирант
Отправить личное сообщение для Дмитрий Луценко Посмотреть профиль Найти все сообщения от Дмитрий Луценко
 
Регистрация: 24.05.2022
Сообщений: 36

Вы не могли бы показать/описать, что должно получиться по итогу?
https://prnt.sc/mFoi5-UU5FGe
Ответить с цитированием
  #7 (permalink)  
Старый 27.05.2022, 08:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,195

Сообщение от maiskiykot
Начиная со второго повторяющегося элемента уже опять первый символ обрабатывается.
где ваши доказательства?)))
что не так? все элементы с классом about-content-1 обрабатываются одинаково.

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
    <div class="about-content-1">12345</div>
    <div class="about-content-1">12345</div>
    <script>
        const typing = document.querySelectorAll('.about-content-1');

        function type(element) {

            function randomOpacity() {
                return (Math.floor(Math.random() * 50) + 50) / 100;
            }

            function randomEms() {
                if (Math.random() > .8) {
                    return (Math.floor(Math.random() * 100) - 50) / 800;
                } else {
                    return 0;
                }
            }

            function wrap(char, i) { // попытка исключить из обработки первый символ
                if (i === 0) return '<span style="padding-left: 30px; font-family: Pattaya; font-size: 28px; font-weight: 600; color: #743f49;">' + char + '</span>';
                return '<span style="opacity:' + randomOpacity() + '; text-shadow:' + randomEms() + 'em ' + randomEms() + 'em currentColor;">' + char + '</span>';
            }


            const wrappedText = Array.from(element.textContent).map(wrap);

            element.innerHTML = wrappedText.join('');

        }

        typing.forEach(type);
    </script>
</body>

</html>
Ответить с цитированием
  #8 (permalink)  
Старый 27.05.2022, 08:34
Аспирант
Отправить личное сообщение для Дмитрий Луценко Посмотреть профиль Найти все сообщения от Дмитрий Луценко
 
Регистрация: 24.05.2022
Сообщений: 36

По типу, все символы должны иметь различную степень выгорания?
Ответить с цитированием
  #9 (permalink)  
Старый 27.05.2022, 08:37
Интересующийся
Отправить личное сообщение для maiskiykot Посмотреть профиль Найти все сообщения от maiskiykot
 
Регистрация: 11.09.2018
Сообщений: 28

У меня в разметке еще <p></p>. Может из-за этого глючит?
Ответить с цитированием
  #10 (permalink)  
Старый 27.05.2022, 08:39
Интересующийся
Отправить личное сообщение для maiskiykot Посмотреть профиль Найти все сообщения от maiskiykot
 
Регистрация: 11.09.2018
Сообщений: 28

Сообщение от Дмитрий Луценко Посмотреть сообщение
По типу, все символы должны иметь различную степень выгорания?
Алгоритм обработки текста устраивает. Не устраивает то, что не могу исключить первый символ, чтобы обработать его с помощью css
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
Как замедлить выполнение .. мой первый userscript istvi1003 Общие вопросы Javascript 4 31.03.2013 19:27
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 08:47
Вывести первый символ документа! karakym Общие вопросы Javascript 17 02.12.2010 18:04
А как зделать скрипт, чтобы например скрипт 1 заменялся скриптом 2? yura371 Общие вопросы Javascript 3 06.01.2009 21:40