Блог

Главная - Вопросы по программированию - Как добавить статический текст после анимированного текста в CSS

Как добавить статический текст после анимированного текста в CSS

#javascript #html #css

Вопрос:

Я только что начал пару дней заниматься веб — разработкой.
Мне нужна помощь для — у меня есть два текста в HTML (тег p) в одной строке, один связан с JS с «идентификатором», а другой с CSS с «классом» и с помощью ключевых кадров, и я пытался добавить статический текст в ту же строку, которая отображается после анимированного текста.

Я пытаюсь вывести — Где первый текст анимируется по умолчанию, и когда срабатывают действия JS, то есть при нажатии на кнопку, второй текст должен отображать статический текст в той же строке, что и первый текст.

Мой код:

JavaScript
CSS
HTML

 let secondText = document.getElementById("second-text");
let a = 1;
let b = 5;

let c = a   b;
let result = "";

function startAction() {
  if (c <= 12) {
    result = "December";
  } else {
    result = "Not-Exists";
  }
  secondText.textContent = resu<

  console.log(result);
} 
 #second-text {
  margin: 30px;
  font-size: 20px;
  font-weight: 700;
}

.first-text {
  margin: 30px;
  font-size: 20px;
  font-weight: 700;
  animation: typing 10s steps(19) infinite;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #111;
  width: 19ch;
}
@keyframes typing {
  0% {
    width: 0ch;
  }
  50% {
    width: 19ch;
  }
  100% {
    width: 0ch;
  }
} 
 <p class="first-text" id="second-text">Welcome To My Page</p>

<button onclick="startAction()">Action</button>

Пожалуйста, помогите мне выяснить, что пошло не так в моем коде?

Комментарии:

1. В вопросе, который вы задаете, 2 элемента, я вижу только один

Ответ №1:

Это то, что вы ищете ?

 let secondText = document.getElementById("second-text");
let a = 1;
let b = 5;

let c = a   b;
let result = "";

function startAction() {
 document.getElementById("second-text").classList.remove("first-text");
 document.getElementById("second-text").classList.add("newClass"); 
  if (c <= 12) {
    result = "December";
  } else {
    result = "Not-Exists";
  }
  secondText.textContent = resu<

  console.log(result);
} 
 .first-text {
  margin: 30px;
  font-size: 20px;
  font-weight: 700;
  animation: typing 10s steps(19) infinite;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #111;
  width: 19ch;
}
 .newClass{
  margin: 30px;
  font-size: 20px;
  font-weight: 700; 
  overflow: hidden;
  white-space: nowrap; 
  width: 19ch;
  }
@keyframes typing {
  0% {
    width: 0ch;
  }
  50% {
    width: 19ch;
  }
  100% {
    width: 0ch;
  }
} 
 <p class="first-text" id="second-text">Welcome To My Page</p>

<button onclick="startAction()">Action</button>

Комментарии:

1. Большое Вам спасибо за помощь. Это действительно решено.

2. Не могли бы вы, пожалуйста, выбрать его в качестве приемлемого ответа, если это решит вашу проблему, добро пожаловать 🙂

Метки: