Question

我最近负责制作游戏发布的倒计时页面。现在，我有一个由this tutorial制作的简单倒计时javascipt文件，但我想让它更加花哨。我想找到一些方法让数字淡出到下一个，只是为了让它不那么“生涩”。是否有捷径可寻？我已经google了一下，并没有真正找到一种直截了当的方式。

这是JS：

function updatetimer() {
    now = new Date();
    launch = Date.parse("August 20, 2013 12:00:00");
    diff = launch - now;

    days  = Math.floor( diff / (1000*60*60*24) );
    hours = Math.floor( diff / (1000*60*60) );
    mins  = Math.floor( diff / (1000*60) );
    secs  = Math.floor( diff / 1000 );

    dd = days;
    hh = hours - days  * 24;
    mm = mins  - hours * 60;
    ss = secs  - mins  * 60;

    document.getElementById("timer")
    .innerHTML =
        dd + ' days ' +
        hh + ' hours ' +
        mm + ' minutes ' +
        ss + ' seconds';
}
setInterval('updatetimer()', 1000 );

在页面上只有一个名为“timer”的空div。

Answer 1

这是使用CSS3和2个元素交叉淡入淡出的快速和脏版本。 Fiddle Here

CSS：

.readyToFade{-webkit-transition: opacity 1s ease-out;
             -moz-transition: opacity 1s ease-in-out;
             -o-transition: opacity 1s ease-in-out;
             -ms-transition: opacity 1s ease-in-out;
              transition: opacity 1s ease-in-out;
}
.fadeOut{
           opacity: 0;
}

标记包含2个元素。这里的javascript很粗糙，但你得到了图片。

function updatetimer() {
var el;
var el2;
if (document.getElementById('timer').className != 'readyToFade fadeOut'){
    console.log("yay");
    el = document.getElementById('timer2');
    el2 = document.getElementById('timer');

} else {
    console.log("no");

    el = document.getElementById('timer');
    console.log(el.className);
    el2 = document.getElementById('timer2');
}


console.log(el);
now = new Date();
launch = Date.parse("August 20, 2013 12:00:00");
diff = launch - now;

days  = Math.floor( diff / (1000*60*60*24) );
hours = Math.floor( diff / (1000*60*60) );
mins  = Math.floor( diff / (1000*60) );
secs  = Math.floor( diff / 1000 );

dd = days;
hh = hours - days  * 24;
mm = mins  - hours * 60;
ss = secs  - mins  * 60;

el.innerHTML =
    dd + ' days ' +
    hh + ' hours ' +
    mm + ' minutes ' +
    ss + ' seconds';

el2.className = "readyToFade fadeOut";

el.className = "readyToFade initial";

}
setInterval(function(){
    updatetimer();
},1000);

Answer 2

试试这个。但代码未经测试。

function updatetimer() {
    $("#timer").fadeIn();
    now = new Date();
    launch = Date.parse("August 20, 2013 12:00:00");
    diff = launch - now;

    days  = Math.floor( diff / (1000*60*60*24) );
    hours = Math.floor( diff / (1000*60*60) );
    mins  = Math.floor( diff / (1000*60) );
    secs  = Math.floor( diff / 1000 );

    dd = days;
    hh = hours - days  * 24;
    mm = mins  - hours * 60;
    ss = secs  - mins  * 60;

    document.getElementById("timer")
    .innerHTML =
        dd + ' days ' +
        hh + ' hours ' +
        mm + ' minutes ' +
        ss + ' seconds';
    $("#timer").fadeOut();
}
setInterval('updatetimer()', 1000 );

Answer 3

您可以使用Jquery Fadeout

$("button").click(function(){
$("p").fadeOut();
});

倒数计时器上的淡入淡出文本

3 个答案: