Question

我想在页面的第一秒显示字符串的一部分，在一秒钟内显示整个字符串（1000ms）。

例1：页面已加载：

2+2

在第二个：

2+2=4 (=4 added, 2+2 is not moved)

例2：

14 + 10

在第二个：

14+10=24 (=24 added, 14+10 is not moved)

我更喜欢jQuery解决方案，但我很好奇是否可以为任何字符串执行以下操作：

1）字符串可以有不同的长度，数学等式“=”是一种分隔符。（“=”是刚刚加载页面时未显示的字符串右侧部分的第一个）

2）该字符串不包含其他或任何其他html标记，这些标记有助于操作字符串右侧部分的可见性/淡入淡出效果。

Answer 1

<强> HTML：

<div id="container"></div>

<强> JS：

var firstPart = "2+2",
    secondPart = "=4";

$("#container").append(firstPart);
setTimeout(function(){
    $("#container").append(secondPart);
}, 1000);

<强>小提琴：

http://jsfiddle.net/kQM2w/

Answer 2

有很多方法可以解决这个问题，其中之一是：

<p class="foo">2 + 2</p>

<script>
window.setTimeout(function(){
    var result = eval($('.foo').html());
    $('.foo').append(' = ' + result);
}, 1000);
</script>

Answer 3

您可以使用JavaScript的split方法获取=字符前的所有内容，然后使用setTimeout在1秒后将其替换为完整字符串，如下所示：

// The Equation String
var s = '2 + 2 = 4';

// Split the String at the `=` Character
var splitString = s.split('=');

// Add the First Part of the String to the `div`
$('#answer').text(splitString[0]);

// Wait 1 Second and Show the Whole String
setTimeout(function(){
    $('#answer').text(s);
}, 1000);

这适用于任何字符串的方程式，并且=字符作为分隔符。

这是JSFiddle Example。

我希望这有帮助！

Answer 4

这可能对你有所帮助

HTML：

<span id="eq">2+8</span><!-- you can plce here any equation like (16-7)-->

jquery：

$(function(){
var ans = '='+eval($("#eq").html());

    setTimeout(function(){
    $('#eq').html($("#eq").html()+ans);
    }, 1000);


})

这里是fiddle

Answer 5

我意识到你说你可以使用jQuery，但只是为了好玩我决定将一些东西放在一起，这只是纯粹的javascript。我在下面的JSFiddle中做到了这一点：http://jsfiddle.net/U6tVL/2/。这里的关键是使用css类来隐藏元素（如下所示）：

    var original = document.getElementById("math_original");
    original.className = original.className + " hidden";

为了向脚本添加漂亮的淡入/显示动画，您需要使用css动画（http://www.w3schools.com/css/css3_transitions.asp）。无论如何，我希望你觉得这个答案很有意思！

jQuery：在页面加载后的第二秒显示字符串的正确部分

5 个答案: