Javascript实时更改文本

Javascript change text realtime

本文关键字：文本 实时 Javascript      更新时间：2023-09-26

如果我想实时更改文本，我该怎么做?(Javascript)

我的HTML是这样的

<p class="fun-fact">This text will fade out</p>
<p class="fun-fact-2">and then this text will fade in</p>

所以我有10个不同的文本，我希望脚本也随机循环，然后实时更新文本(淡出/淡入新文本)，每个文本应该在大约10-20秒每个

我的第一个想法是让10个p类具有相同的定位，但让它们以不透明度:0淡出，然后将不透明度更改为1，并将之前的文本更改为不透明度0，会工作吗?

                setTimeout(function() {
                $(".fun-fact").fadeTo("slow",0);
                }, 15000 );
                setTimeout(function() {
                $(".fun-fact-2").fadeTo("slow",1);
                }, 16000 );

试试这个:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<p id="funFact">This text will change</p>

<script>
var texts = ["first", "second", "third", "etc" ];
var interval = 4000; // 4sec interval
(function change() {
  // select random item
  var randItem = texts[Math.floor(Math.random() * texts.length)];
  var obj = $("#funFact");
  function updateText() {
    obj.html(randItem).fadeIn();
  }
  obj.fadeOut(updateText);
  setTimeout( change, interval);
})();
</script>

JSFiddle——http://jsfiddle.net/dgzu2/

你可以有一个字符串数组，你想要的值，并让它随机选择一个与您的脚本。

JSFiddle

在这个版本中，你可以有尽可能多的文本字符串，你想要的，并与淡入和不同的文本每次。

var values = ["This text will change", "Some random text", "Additional text to come!", "Hello World!", "Your code is successful!"];
var reload = 2000; //Time in milliseconds
var last = -1;
function updateMessage() {
    var i;
    do {
        //Get random index from values 
        i = ~~ (Math.random() * values.length); //The ~~ is a fast Math.floor().
    } while (i !== last); //Check that you always get different text
    last = i;
    $('.fun-fact').fadeOut(function () {
        $(this).text(values[i]).fadeIn();
    });
    setTimeout(updateMessage, reload);
}
updateMessage();  //Activate function for the first time

我假设您希望在纯JavaScript中完成此操作。下面是一个示例函数，它将传递所有具有fun-fact类的元素。在每一个参数上，它都将在text参数中传递新的文本。

function realtime_text(text, cssClass) {
    // Setting a default value for the second arg (class)
    if(!cssClass)
        cssClass = 'fun-fact';
    // Get all elements with the given class
    var targets = document.getElementsByClassName(cssClass);
    // Nothing found... nothing to do.
    if(!targets || 0 >= targets.length)
        return;
    // Set the text for all found elements
    for(i = 0; i < targets.length; i++)
        targets[i].innerHTML = text;
}
// ... 
realtime_text("Where am I?"); // This call will replace the text
realtime_text("Where are they?", "fun-fact-2"); // This call will replace the text

编辑后我看到你使用jQuery。使用:

$(".fun-fact").html("New text to put goes here...");
$(".fun-fact-2").html("New text for second p goes here...");

这是一个简单的例子,小提琴

<div>
  <span>Text 1</span>
  <span>Text 2</span>
  <span>Text 3</span>
  <span>Text 4</span>
  <span>Text 5</span>
  <span>Text 6</span>
  <span>Text 7</span>
  <span>Text 8</span>
  <span>Text 9</span>
  <span>Text 10</span>
</div>

span {
  position: absolute;
  display: none;
  top: 15px;
  left: 15px;
}
span:first-child {
  display: block;
}

(function($) {
  setInterval(function() {
    // Get random number between span length and 0 which is the first child
    i  =  Math.floor((Math.random() * $('span').length) + 0);
    // Fadein span equal our random number and fadeout his siblings
    $('span').eq(i).fadeIn(400).siblings('span').fadeOut(400);
  }, 3000);
})(jQuery);
相关文章：