Javascript 单页多重倒计时

下面是倒计时的html代码。我正在使用jquery.countdown.min.js插件

<ul id="example">
<li><span class="days">00</span><p class="days_text">Days</p></li>
        <li class="seperator">:</li>
        <li><span class="hours">00</span><p class="hours_text">Hours</p></li>
        <li class="seperator">:</li>
    <li><span class="minutes">00</span><p class="minutes_text">Minutes</p></li>
        <li class="seperator">:</li>
    <li><span class="seconds">00</span><p class="seconds_text">Seconds</p></li>
    </ul>

    <div id= "count" data-text="01/01/2016 05:06:59"></div>

00天

：
00小时

：
00分钟

：
00秒

下面是javascript代码

<script type="text/javascript">
    var val1 = $('#count').data('text');

        $('#example').countdown({
            date: val1,
            offset: 0,
            day: 'Day',
            days: 'Days'
        }, function () {
            alert('Done!');
        });
    </script>

var val1=$（'#count'）。数据（'text'）；
$（“#示例”）。倒计时({
日期：val1，
偏移量：0，
day:“day”，
天：“天”
}，函数（）{
警惕（‘完成’）；
});

它工作得很好，给了我想要的输出。限制是我每页只能使用一个倒计时计时器。如果我想在同一个页面上使用多个javascript代码，那么我必须添加多个javascript代码

<script type="text/javascript">
    var val1 = $('#count').data('text');

        $('#example').countdown({
            date: val1,
            offset: 0,
            day: 'Day',
            days: 'Days'
        }, function () {
            alert('Done!');
        });
    </script>

下面是场景

<ul id="example">
        <div data-countdown="01/01/2016 05:06:59"></div>
         <div data-countdown="01/01/2017"></div>
         <div data-countdown="01/01/2018"></div>
        <div data-countdown="01/01/2020"></div>   
      </ul>

我尝试了下面的代码，但它不工作

<script type="text/javascript">
     $('[data-countdown]').each(function() {
   var $this = $(this),finalDate = $(this).data('countdown');
        $this.countdown({
            date: finalDate,
            offset: 0,
            day: 'Day',
            days: 'Days'
        }, function () {
            alert('Done!');

        });
        });
    </script>

$（“[data countdown]”）。每个（函数（）{
变量$this=$（this），finalDate=$（this）.data（'countdown'）；
这个，倒计时({
日期：最终日期，
偏移量：0，
day:“day”，
天：“天”
}，函数（）{
警惕（‘完成’）；
});
});

更新：

$（函数（）{
$（“[data countdown]”）。每个（函数（）{
变量$this=$（this），finalDate=$（this）.data（'countdown'）；
$this.倒计时（最终日期、函数（事件）{
$this.html（event.strftime（“%D天%H:%M:%S”））}）。在（'finish.countdown'，function（）上{
警报（“完成”）；
});
});
});

Javascript和html是朋友。当您发现js代码中发生了一些奇怪的事情时，首先验证html。在您的情况下，如果您坚持“ul”，请使用“ul li div”结构；否则，如果适用，请使用“div div”或“nav div”或“section div”

谢谢您的回答。我不是javascript专家。你能用小提琴把它拿出来吗。如果你能给我举个工作的例子，我将不胜感激。非常好。如果我想在此添加警报框。它有用吗？警报（‘时间已结束！’）；这里的示例1仅在年差为一年时有效，例如（01/07/2017 05:06:59）无效。我是唯一一个出现错误“TypeError:$this.countdown不是函数”的人吗