如何在Javascript中键入动画的样式 [英] How to Style Typing Animation in Javascript

问题描述

我想知道是否有任何方法可以使键入的文本以不同的字体大小输入.我附上了一个jsfiddle，显示了我到目前为止所做的事情.有没有办法为每个句子分配一个班级?

谢谢！

https://jsfiddle.net/te4fo7fh/embedded/result/

 var tt_element = document.getElementById("tt_element");
var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^And this one came in 30pt font size.";
var tt_array = tt_text.split("");
var tt_timer;
var tt_loop = true;
var tt_speed = 70;
var tt_delay = 3000;
var tt_br = "^";

function typeMyText() {
  if (tt_array.length > 0) {
    if (tt_array[0] == tt_br) {
      tt_element.innerHTML += "<br>";
      tt_array.shift();
    } else {
      tt_element.innerHTML += tt_array.shift();
    }
  } else {
    clearTimeout(tt_timer);
    if (tt_loop) {
      setTimeout(clearMyText, tt_delay);
    }
    return false;
  }
  tt_timer = setTimeout(typeMyText, tt_speed);
}

typeMyText(); 

 #tt_element {
  padding-top: 20px;
	line-height:1.5em;
  font-size: 12pt;
  font-family: Georgia;
} 

 <section class="editable" contenteditable="true">
  <p id="tt_element" class="blue"></p>
</section> 

解决方案

我更新了您的示例.

首先，您需要像休息一样在字符串中输入希望的fontSize.

var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^{30}And this one came in 30pt font size.";

之后，将每一行放入单个span.

var tt_line = document.createElement('span');
tt_element.appendChild(tt_line);

完成后，仍然需要识别fontSize的更改:

if (tt_array[0] == '{') {
    var index = 0;
    var fontSize = '';
    tt_array.shift() // To skip {
    // Loop to get the size between the {}
    while (tt_array[index] !== '}') {
       fontSize += tt_array[index];
       tt_array.shift()
    }
    tt_array.shift() // To skip }
    tt_line.style.fontSize = fontSize+'px';
  }

在此处查看小提琴: https://jsfiddle.net/te4fo7fh/1/

I was wondering if there was any way to make the typing text come in as different font sizes. I have attached a jsfiddle that shows what I have done so far. Is there a way to assign a class to each sentence?

Thank you!

https://jsfiddle.net/te4fo7fh/embedded/result/

var tt_element = document.getElementById("tt_element");
var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^And this one came in 30pt font size.";
var tt_array = tt_text.split("");
var tt_timer;
var tt_loop = true;
var tt_speed = 70;
var tt_delay = 3000;
var tt_br = "^";

function typeMyText() {
  if (tt_array.length > 0) {
    if (tt_array[0] == tt_br) {
      tt_element.innerHTML += "<br>";
      tt_array.shift();
    } else {
      tt_element.innerHTML += tt_array.shift();
    }
  } else {
    clearTimeout(tt_timer);
    if (tt_loop) {
      setTimeout(clearMyText, tt_delay);
    }
    return false;
  }
  tt_timer = setTimeout(typeMyText, tt_speed);
}

typeMyText();

#tt_element {
  padding-top: 20px;
	line-height:1.5em;
  font-size: 12pt;
  font-family: Georgia;
}

<section class="editable" contenteditable="true">
  <p id="tt_element" class="blue"></p>
</section>

解决方案

I updated your example.

First of all you type the wished fontSize into your string like your breaks.

var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^{30}And this one came in 30pt font size.";

After that you put every line into a single span.

var tt_line = document.createElement('span');
tt_element.appendChild(tt_line);

Once you've done that you still need to recognize the fontSize change:

if (tt_array[0] == '{') {
    var index = 0;
    var fontSize = '';
    tt_array.shift() // To skip {
    // Loop to get the size between the {}
    while (tt_array[index] !== '}') {
       fontSize += tt_array[index];
       tt_array.shift()
    }
    tt_array.shift() // To skip }
    tt_line.style.fontSize = fontSize+'px';
  }

See the fiddle here: https://jsfiddle.net/te4fo7fh/1/

这篇关于如何在Javascript中键入动画的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！