Question

我正在使用提示符进行输入并将其保存在“ a”中参见：

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

然后我希望将存储在“ a”中的文本和一些诸如“ blah blah blah”之类的文本以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>

当我运行它时，我只能看到等等动画，而不是存储在“ a”中的文本

Answer 1

尝试这样。

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>

Answer 2

您的代码中有错字，请检查开发者控制台是否有错误。

{
  "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>

如何在输入效果中显示输入的文本以及一些常量文本？

2 个答案: