• 隐藏侧边栏
  • 展开分类目录
  • 关注微信公众号
  • 我的GitHub
  • QQ:1753970025
Chen Jiehua

简易的倒计时 

这两天折腾着实现一个带有声音的倒计时,效果虽简单,不过还是挺有趣的……

最终实现的效果:

timeticker

timeticker

环形进度条

本着不重复造轮子的原则,直接采用现成的 JS插件 progressbar.js,几行代码直接实现:

<div class="circle-progress"></div>
    var bar = new ProgressBar.Circle(".circle-progress", {
        color: "green",
        strokeWidth: 4,
        trailColor: "#eee",
        duration: 10,
        text: {
            value: '<div class="circle-progress-btn" data-status="init"><i class="glyphicon glyphicon-play"></i></div>',
            style: {
                color: 'gray',
            },
        }
    });

然后就可以很方便的控制进度了:

bar.animate(0.3)

倒计时

要实现倒计时的功能,我们可以通过  setInterval() 来实现

<div class="clock">
    <span id="clock-time">10</span> / <span id="total-time">10</span>
</div>
var interval;
interval= setInterval(updateTime, 1000);
function updateTime(){
     var total = $("#total-time").html();
     var left = $("#clock-time").html();
     var now = left - 1;
     if (now >= 0){
           $("#clock-time").html(now);
           bar.animate(1-now/total);
      }else{
           clearInterval(interval);
      }
}

音效

我们要实现开始、结束、倒计时过程的声音,声音可以通过 HTML 的 audio 来实现:

var diAudio = document.createElement("audio");
diAudio.setAttribute("src", "sound/di.mp3");

// 开始提示音结束后启动倒计时
var startAudio = document.createElement("audio");
startAudio.setAttribute("src", "sound/start.mp3");
startAudio.addEventListener("ended", function(){
    $(".circle-progress-btn").data("status", "pause");
    $(".circle-progress-btn").trigger("click");
});

// 结束提示音停止后复位倒计时
var endAudio = document.createElement("audio");
endAudio.setAttribute("src", "sound/end.mp3");
endAudio.addEventListener("ended", function(){
    $("#clock-time").html($("#total-time").html());
    $(".circle-progress-btn").html('<i class="glyphicon glyphicon-play"></i>');
    $(".circle-progress-btn").data("status", "init");
    bar.animate(0);
});

暂停/播放

倒计时过程中如果要暂停,我们可以使用 clearInterval() 来实现,同时也需要对计时器的状态进行修改:

    $(".circle-progress-btn").click(function(){
        var status = $(this).data("status");
        console.log(status);
        if (status == "init"){
            $(this).html('<i class="glyphicon glyphicon-pause"></i>');
            startAudio.play();

        }else if (status == "pause"){
            $(this).html('<i class="glyphicon glyphicon-pause"></i>');
            $(this).data("status", "play")
            clearInterval(interval);
            interval= setInterval(updateTime, 1000);
            function updateTime(){
                var total = $("#total-time").html();
                var left = $("#clock-time").html();
                var now = left - 1;
                if (now >= 0){
                    diAudio.play();
                    $("#clock-time").html(now);
                    bar.animate(1-now/total);
                }else{
                    clearInterval(interval);
                    endAudio.play();
                }
            }

        }else if (status == "play") {
            $(this).html('<i class="glyphicon glyphicon-play"></i>');
            $(this).data("status", "pause")
            clearInterval(interval);
        }
    });

适配移动设备

完成后,发现这个带声音的倒计时在Chrome下可以很完美地运行。然而把页面放到微信中去,却发现倒计时正常,开始音效也正常,滴滴声结束音效都不能正常播放!

仔细研究一番,才知道原来移动设备是不允许直接通过代码控制音频加载播放的,因为用户在移动网络下可能会产生昂贵的数据流量费用。

开始音效之所以能够正常播放,是因为它是由用户 click 触发的;滴滴声和结束声是在 setInterval() 中触发的,因此也就没办法播放了。不过幸运的是,对于已经加载的音频,我们可以通过代码控制其播放。所以我们只要在用户click的时候把需要的音频文件都加载下来就可以了,修改代码:

    $(".circle-progress-btn").click(function(){
        var status = $(this).data("status");
        console.log(status);
        if (status == "init"){
            diAudio = document.createElement("audio");
            diAudio.play();
            diAudio.src = "sound/di.mp3";

            startAudio = document.createElement("audio");
            startAudio.play();
            startAudio.src = "sound/start.mp3";
 
            endAudio = document.createElement("audio");
            endAudio.play();
            endAudio.src = "sound/end.mp3";

            $(this).data("status", "ready");
            $(this).trigger("click");

        }else if (status == "ready"){
            $(this).html('<i class="glyphicon glyphicon-pause"></i>');
            startAudio.play();

        }else if (status == "pause"){
......

在第一次 play 的时候,由于 src 未设置,因此实际上是没有声音播放的:

diAudio = document.createElement("audio");
diAudio.play();
diAudio.src = "sound/di.mp3";

 

搞定收工~~~

参考:

码字很辛苦,转载请注明来自ChenJiehua《简易的倒计时》

评论