javascript - 我想在中心的下一行打印每个句子作为诗歌我试过/n，/r/n但我失败了

Question

<center><p id="demo" style="color:black;"></p></center>

<script>

window.onload = function() {
  typeWriter();
};
var i =0;
var txt = "Would it be ok if I wrote you a rhyme? would it be ok if I opened my heart? Would it be ok if I took on the part Of being your man and showed you a view, One that only a real man could do? Would it be ok if I could make you smile? Would it be alright to look in your eyes? Would it be alright to never tell lies? Would it be alright to find a way? Would it be alright to long for the day To pull you close and whisper in your ear And tell you our feelings are nothing to fear? Would it be ok if I took some of your time? Would it be ok if I wrote you a rhyme? To tell you there is nothing I would rather do Than spend my whole life loving only you... ";
var txt1= '';
var speed = 100;
function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
document.getElementById("demo").innerHTML += txt1.charAt(i);

    i++;
      setTimeout(typeWriter, speed);

  }

}
</script>

我想将下一行的每句话打印成一首诗...!但我做不到，请如果有人愿意提供帮助。!我会感激他/她提前致谢

Answer 1

使用您自己的标志，例如 char "#"。我在索引处对 char 使用简单检查并使用标记 br/。更好的解决方案使用字符“？”对于新线。请参阅代码片段 example2。

<center><p id="demo" style="color:black;"></p></center>

<script>

window.onload = function() {
  typeWriter();
};
var i =0;
var txt = "Would it be ok if I wrote you a rhyme?# would it be ok if I opened my heart? # Would it be ok if I took on the part Of being your man and showed you a view, One that only a real man could do?# Would it be ok if I could make you smile?# Would it be alright to look in your eyes? Would it be alright to never tell lies?# Would it be alright to find a way?# Would it be alright to long for the day To pull you close and whisper in your ear And tell you our feelings are nothing to fear? Would it be ok if I took some of your time?# Would it be ok if I wrote you a rhyme?# To tell you there is nothing I would rather do Than spend my whole life loving only you... ";
var txt1= '';
var speed = 100;
function typeWriter() {
  if (i < txt.length) {
    
    if (txt.charAt(i) == "#"){
    document.getElementById("demo").innerHTML += "<br/>";
    }
    else {
    document.getElementById("demo").innerHTML += txt.charAt(i);
     }
    document.getElementById("demo").innerHTML += txt1.charAt(i);

    i++;
      setTimeout(typeWriter, speed);

  }

}
</script>

示例 2:

<center><p id="demo" style="color:black;"></p></center>

<script>

window.onload = function() {
  typeWriter();
};
var i =0;
var txt = "Would it be ok if I wrote you a rhyme? would it be ok if I opened my heart?  Would it be ok if I took on the part Of being your man and showed you a view, One that only a real man could do? Would it be ok if I could make you smile? Would it be alright to look in your eyes? Would it be alright to never tell lies?Would it be alright to find a way? Would it be alright to long for the day To pull you close and whisper in your ear And tell you our feelings are nothing to fear? Would it be ok if I took some of your time? Would it be ok if I wrote you a rhyme? To tell you there is nothing I would rather do Than spend my whole life loving only you... ";
var txt1= '';
var speed = 100;
function typeWriter() {
  if (i < txt.length) {
    
    if (txt.charAt(i) == "?"){
    
    document.getElementById("demo").innerHTML += txt.charAt(i);
    document.getElementById("demo").innerHTML += "<br/>";
   
    }
    else {
    document.getElementById("demo").innerHTML += txt.charAt(i);
     }
    document.getElementById("demo").innerHTML += txt1.charAt(i);

    i++;
      setTimeout(typeWriter, speed);

  }

}
</script>

粗体示例(小解析器):它有点复杂。我们需要使用 append 方法动态创建元素，也需要一个 FLAG 。

<center><p id="demo" style="color:black;"></p></center>

<script>

window.onload = function() {
  typeWriter();
};
var i =0;
var txt = "Would it be ok if I wrote you a #rhyme#? would it be ok if I opened my #heart#?  Would it be ok if I took on the part Of being your man and showed you a view, One that only a real man could do? Would it be ok if I could make you smile? Would it be alright to look in your eyes? Would it be alright to never tell lies?Would it be alright to find a way? Would it be alright to long for the day To pull you close and whisper in your ear And tell you our feelings are nothing to fear? Would it be ok if I took some of your time? Would it be ok if I wrote you a rhyme? To tell you there is nothing I would rather do Than spend my whole life loving only you... ";
var txt1= '';
var speed = 100;

var BOLD_ELE = null;
var isBold = false;

function typeWriter() {
  if (i < txt.length) {
  
     if (isBold == true ){
     
     var BOLD_ELE = document.createElement('B');
     document.getElementById("demo").appendChild(BOLD_ELE);
     
     }
    
    if (txt.charAt(i) == "?"){
    
    document.getElementById("demo").innerHTML += txt.charAt(i);
    document.getElementById("demo").innerHTML += "<br/>";
   
    }
    else if (txt.charAt(i) == "#"){
       if (isBold == false) {
        isBold = true
       }
       else {
        isBold = false
       }
    
    }
    else {
    
    if (isBold == false){ 
     document.getElementById("demo").innerHTML += txt.charAt(i);
    }
    else {
     BOLD_ELE.innerHTML += txt.charAt(i);
    }
    
    }
    
    document.getElementById("demo").innerHTML += txt1.charAt(i);

    i++;
      setTimeout(typeWriter, speed);

  }

}
</script>