gpt4 book ai didi

javascript - Django 循环中的多个 JQuery 倒计时

转载 作者:行者123 更新时间:2023-11-30 08:56:52 27 4
gpt4 key购买 nike

我正在使用 Django 创建一个运动应用程序。我想显示一个比赛列表,每场比赛都有倒计时。

现在,我只有一个倒计时。我使用这个 Jquery 倒计时:http://keith-wood.name/countdown.html (到新的一年)。我有一个循环来显示我的比赛。所以问题是如何将倒计时插入循环并使其进入我的对象“匹配”的日期时间?

这是我的模板:

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">@import "/Users/marc-a antoine.lacroix/Desktop/Jquery/jquery.countdown.package-1.6.0/jquery.countdown.css";</style>

<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"> </script>
<script language="javascript">

$(document).ready(function(){

var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});

});
</script>

</head>
<body>

<div style="float:left">
{% for match in matches %}
<div>
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
</div>
{% endfor %}
</div>


<div id="defaultCountdown"> </div>


</body>

“匹配”是包含所有匹配项的列表。 “real_start”是我的对象“匹配”的日期时间

我的 views.py 很简单:

 def page(request):
matches = Match.live_matches.all()

return render_to_response('myhtml.html', {'matches': matches}, context_instance=RequestContext(request))

所以我不知道如何将我的“real_start”DateTime 导入倒计时以及如何将此倒计时插入循环。

这是我当前的代码:

<script language="javascript">


$(function(){
$('.match_wrap').each(function(){
var match_start=$(this).data('match_start');
$(this).find('.matchTimer').countdown({until: match_start});
});
})
</script>

</head>
<body>

<div style="float:left">
{% for match in matches %}
</br></br>
<div class="match_wrap" data-match_start="{{ match.real_start|date:"M j, Y" }}">
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<div>
<ul>
{% for team in match.teams %}
<li>
<img src="{{ team.logo.url }}">
</li>
{% endfor %}
</ul>
</div>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
<div class="matchTimer"> </div>
</div>
{% endfor %}
</div>
</br></br>

我也试过:

 <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"></script>


<script language="javascript">


$('.match_countdown').each(function() {
var self = $(this),
date_string = self.attr('data-date'),
date = new Date.parse(date_string);
self.countdown({until: date});
});
</script>

</head>
<body>

<div style="float:left">
{% for match in matches %}
</br></br>
<div class="match_countdown" data-date="{{ match.real_start|date:'M j, Y' }}"></div>
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<div>
<ul>
{% for team in match.teams %}
<li>
<img src="{{ team.logo.url }}">
</li>
{% endfor %}
</ul>
</div>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
</div>
{% endfor %}
</div>

最佳答案

类似于 charlietfl 的答案,但 js 解析了正确的日期。

{# template #}
{% for match in matches %}
<div>
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
<div class="match_countdown" data-date="{{ match.real_start|date:'M j, Y' }}"></div>
</div>
{% endfor %}

然后是js:

$('.match_countdown').each(function() {
var self = $(this),
date_string = self.attr('data-date'),
date = new Date(date_string);
self.countdown({until: date});
});

这里 ( http://jsfiddle.net/miki725/MQcYw/1/ ) js jsfiddle 说明了解决方案。

关于javascript - Django 循环中的多个 JQuery 倒计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12894538/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com