Как отобразить введенный текст вместе с некоторым постоянным текстом в эффекте ввода?

Я ввожу ввод с помощью приглашения и сохраняю его в "a" видеть:

<script type = "text/javascript" language = "Javascript">
    var a=prompt("Please Enter Your Name ?????");
</script>

а затем я хочу, чтобы текст, хранящийся в «а», и некоторый текст, например «бла-бла-бла», был напечатан в одной строке с эффектом пишущей машинки css.

html {
  min-height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  background-repeat: no-repeat;
  /* background-attachment: fixed;*/
  background-image: radial-gradient(black, white);
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
  typing 3.5s steps(40, end),
  blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

<body>
  <script type = "text/javascript" language = "Javascript">
    var a = prompt("Please Enter Your Name ?????");
  </script>
  <div class = "typewriter">
    <h1>
      <script>
        docment.write(a)
      </script>blah blah
    </h1>
  </div>
</body>

Когда я запускаю его, я вижу только бла-бла-бла-анимацию, а не текст, хранящийся в «а».

javascript html css

28.05.2019 12:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте так.

var a=prompt("Please Enter Your Name ?????");
                 document.getElementById("name").innerHTML = a;

html {
      min-height: 100%;
      overflow: hidden;
}
body
    {
        display: flex;
        background-repeat: no-repeat;
       /* background-attachment: fixed;*/
        background-image: radial-gradient(black,white);
    }

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
     animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
}

<html>
<head>
<!--Google Analytics code Here -->
<title>HAPPY INDEPENDANCE DAY</title>
<link rel = "stylesheet" href = "full.css">
   
</head>
<body>

<div class = "typewriter">
    <h1 id = "name"></h1>
</div>
</body>
</html>

28.05.2019 13:04

Ответ принят как подходящий

В вашем коде опечатка, пожалуйста, проверьте консоль разработчика на наличие ошибок.

{
  "message": "Uncaught ReferenceError: docment is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 60,
  "colno": 17
}

html {
      min-height: 100%;
      overflow: hidden;
}
body
    {
        display: flex;
        background-repeat: no-repeat;
       /* background-attachment: fixed;*/
        background-image: radial-gradient(black,white);
    }

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
     animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
}

<html>
<head>
<!--Google Analytics code Here -->
<title>HAPPY INDEPENDANCE DAY</title>
<link rel = "stylesheet" href = "full.css">
   
</head>
<body>
    <script type = "text/javascript" language = "Javascript">
                 var a=prompt("Please Enter Your Name ?????");
                </script>
<div class = "typewriter">
    <h1><script>document.write(a) </script> blah blah</h1>
</div>
</body>
</html>

28.05.2019 13:04

Другие вопросы по теме

ОШИБКА: Столбец не найден: 1054 Неизвестный столбец «updated_at» в «списке полей»

Отображать данные в нужной форме, используя php

Значение «Печатать» в чекбоксе из базы данных

Создать значок для загрузки нескольких файлов

Неизвестная проблема при попытке сделать раскрывающийся список в html и php

ОШИБКА TypeError: fs.createWriteStream не является функцией Angular 6 Экспорт GIF

Как найти правильный «div» для очистки веб-страниц с помощью python

Контактная форма показывает подтверждение на новой странице, а не в div (ajax)

Обработчики ползунков обратного диапазона JQuery

Растянуть любое количество пролетов внутри div

Как отобразить введенный текст вместе с некоторым постоянным текстом в эффекте ввода?

Ответы 2

Другие вопросы по теме

Похожие вопросы