当前位置: 首页 > 知识库问答 >
问题:

一页多个倒计时时间

滑景胜
2023-03-14

首先,我使用Jalali/波斯日期和倒计时jQuery插件对我不起作用。对于ex,插件必须输入公历日期,如2017/5/2,但波斯/贾拉利日期是1396/2/17。

我有多个datetime,指定了天、小时、分钟和秒。例:

3天13小时4分25秒

23天2小时41分3秒...

我有几天、几小时、几分钟和几秒时间,

我想在一页上为他们的日期倒计时(他们的日期是白天的)

当页面中只有一个日期时,我使用此代码并能很好地工作

html:

  <div class="row">

@{TimeSpan span = (item.DiscountExpireDate - DateTime.Now);}

    <ul class="countdown">
        <li>
             <span class="seconds">@span.Seconds</span>
        <p class="seconds_ref">ثانیه</p>
        </li>
         <li class="seperator">:</li>
         <li>
         <span class="minutes">@span.Minutes</span>
           <p class="minutes_ref">دقیقه</p>
           </li>
           <li class="seperator">:</li>

           <li>
          <span class="hours">@span.Hours</span>
            <p class="hours_ref">ساعت</p>
           </li>
           <li class="seperator"> </li>
           <li>
           <span class="days">@span.Days</span>
         <p class="days_ref">روز</p>
         </li>
         </ul>

</div>

和js

<script type="text/javascript">//for countdown
    $(document)
        .ready(function () {
            var theDaysBox = $(".days");
            var theHoursBox = $(".hours");
            var theMinsBox = $(".minutes");
            var theSecsBox = $(".seconds");

                var refreshId = setInterval(function() {
                        var currentSeconds = theSecsBox.text();
                        var currentMins = theMinsBox.text();
                        var currentHours = theHoursBox.text();
                        var currentDays = theDaysBox.text();

                        if (currentSeconds == 0 && currentMins == 0 && currentHours == 0 && currentDays == 0) {
                            // if everything rusn out our timer is done!!
                            // do some exciting code in here when your countdown timer finishes

                        } else if (currentSeconds == 0 && currentMins == 0 && currentHours == 0) {
                            // if the seconds and minutes and hours run out we subtract 1 day
                            theDaysBox.html(currentDays - 1);
                            theHoursBox.html("23");
                            theMinsBox.html("59");
                            theSecsBox.html("59");
                        } else if (currentSeconds == 0 && currentMins == 0) {
                            // if the seconds and minutes run out we need to subtract 1 hour
                            theHoursBox.html(currentHours - 1);
                            theMinsBox.html("59");
                            theSecsBox.html("59");
                        } else if (currentSeconds == 0) {
                            // if the seconds run out we need to subtract 1 minute
                            theMinsBox.html(currentMins - 1);
                            theSecsBox.html("59");
                        } else {
                            theSecsBox.html(currentSeconds - 1);
                        }
                    },
                    1000);

       });
</script>

但是当我有多个日期在页面上不工作很好,似乎数字是总和在一起。

https://jsfidle.net/a7ucv468/1/

有人能帮我吗?

共有1个答案

郎健柏
2023-03-14

您只需要为每一个标识一个包装器元素,如下所示:

$('.countdown").each( function {

然后在元素选择器前面使用$(this).find()。这将把函数绑定到倒计时的每个实例。目前,它只是在寻找类“days”,所以它只会使用它找到的第一个类,否则会导致其他错误。我很快就会写一个工作示例。

我不确定这些数字,但它们在这里似乎是独立运行的(为了调试,将超时设置为更少)https://jsfiddle.net/7nzcdhn3/

 类似资料:
  • 问题内容: 我正在创建一个需要ListView的应用程序,其中的元素数量不确定,每个元素都有一个从可变数量开始倒数的计时器。我能够成功地使 其中 之一倒计时,但是我不知道如何在ListView的每个元素中包括一个计时器。 我目前正在使用CountDownTimer(如果从网站复制,请确保将D大写,因为它们有误)。 任何向我指出正确方向的代码或资源都将受到赞赏。 这是我当前的EventAdapter

  • 本文向大家介绍JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序,包括了JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序的使用技巧和注意事项,需要的朋友参考一下 看到网上这个程序 发现了处错误这里改正了一下: 这是我自己写的 这两个方法的秒数有出处 以上所述是小编给大家介绍的JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序,希望对大家

  • 问题内容: 我创建了一个计时器,该计时器在按下按钮时启动,上面是运行的代码。谁能帮我创建一个计数为30的计时器?现在,当我运行它时,在标签中设置文本“ 30”,但我希望它从0开始并一直计数到30。 问题答案: 每次您的计时器运行时,它都会执行从0到30的循环,因此仅在循环结束时才刷新UI。您需要将i保留为成员,并在每次这样调用该方法时对其进行更新: 当然,一旦达到i = 30,您就应该取消时间,否

  • 我有一个mixin,它以这种格式返回剩余时间。 在组件中,我打电话给混音器来得到时间 在我的模板中,我称它为,它返回类似的值,但我想将这个值显示为倒计时。所以当它加载到页面上时,开始倒计时1秒。 我试图使用一个观察者,但它不起作用:

  • 介绍 用于实时展示倒计时数值,支持毫秒精度。 引入 import { createApp } from 'vue'; import { CountDown } from 'vant'; const app = createApp(); app.use(CountDown); 代码演示 基础用法 time 属性表示倒计时总时长,单位为毫秒。 <van-count-down :time="time

  • CountDown 倒计时 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 通过timestamp参数设置倒计时间,单位为秒 <template> <u-count-down :timestamp="timestamp"></u-count-down> </template> <script> export de