Html 代码需要在使用打字机时显示图像 javascript.Please

Question

作为标题，我需要在打字机 javascript 打字时显示图像的代码。请帮忙。该代码需要同时输入文字和显示图像。

var aText = new Array(
"Of cause it is about me",
"At the moment I am studying in S3D in St.Louis school and i am 15.",
"Hello.",
"I love messing around with electronics,that is my hobby since i was young.",
"So,I am quite active and brave.",
"My interst in electronic cause me to start digging into computer technology."
);
var iSpeed = 40; 
var iIndex = 0; 
var iArrLength = aText[0].length; 
var iScrollAt = 10; 
 
var iTextPos = 0; 
var sContents = ''; 
var iRow; 
 
function typewriter()
{
 sContents =  ' ';
 iRow = Math.max(0, iIndex-iScrollAt);
 var destination = document.getElementById("typedtext");
 
 while ( iRow < iIndex ) {
  sContents += aText[iRow++] + '<br />';
 }
 destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
 if ( iTextPos++ == iArrLength ) {
  iTextPos = 0;
  iIndex++;
  if ( iIndex != aText.length ) {
   iArrLength = aText[iIndex].length;
   setTimeout("typewriter()", 500);
  }
 } else {
  setTimeout("typewriter()", iSpeed);
 }
}

html, body {
 height: 100%;
 margin: 0;
 width: 100%;
 background-color: rgb(0,0,0);
}

#typedtext {
 padding-top: 20px;
 margin-left: auto;
 margin-right: auto;
 width: 80vw;
 position: relative;
 color: #CCCCCC;
 font-family: Inconsolata, monospace;
 font-size: 18px;
 font-style: normal;
 font-weight: 200;
}

c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>My profile</title>
</head>
<body>
<body onload="typewriter();">
<div id="typedtext"></div>
</body>

</html>

我想不出办法，我在 google 上搜索过。

Answer 1

如果我明白你想要什么...你试过了吗？

*延迟是因为图像 url 引用了网站。

var aText = new Array(
"That's me <img src='https://graph.facebook.com/1300943986689433/picture?type=large' alt='' width='32' height='32'>",
"Of cause it is about me",
"At the moment I am studying in S3D in St.Louis school and i am 15.",
"Hello.",
"I love messing around with electronics,that is my hobby since i was young.",
"So,I am quite active and brave.",
"My interst in electronic cause me to start digging into computer technology."
);
var iSpeed = 40; 
var iIndex = 0; 
var iArrLength = aText[0].length; 
var iScrollAt = 10; 
 
var iTextPos = 0; 
var sContents = ''; 
var iRow; 
 
function typewriter()
{
 sContents =  ' ';
 iRow = Math.max(0, iIndex-iScrollAt);
 var destination = document.getElementById("typedtext");
 
 while ( iRow < iIndex ) {
  sContents += aText[iRow++] + '<br />';
 }
 destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
 if ( iTextPos++ == iArrLength ) {
  iTextPos = 0;
  iIndex++;
  if ( iIndex != aText.length ) {
   iArrLength = aText[iIndex].length;
   setTimeout("typewriter()", 500);
  }
 } else {
  setTimeout("typewriter()", iSpeed);
 }
}

html, body {
 height: 100%;
 margin: 0;
 width: 100%;
 background-color: rgb(0,0,0);
}

#typedtext {
 padding-top: 20px;
 margin-left: auto;
 margin-right: auto;
 width: 80vw;
 position: relative;
 color: #CCCCCC;
 font-family: Inconsolata, monospace;
 font-size: 18px;
 font-style: normal;
 font-weight: 200;
}

c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>My profile</title>
</head>
<body>
<body onload="typewriter();">
<div id="typedtext"></div>
</body>

</html>

Html 代码需要在使用打字机时显示图像 javascript.Please

Html code need to display image while using typerwriter javascript.Please

html

javascript

css

jquery

webpage