Обратный отсчет
Есть таблица, данные будут подтягиваться из базы в таком виде.
Задача: сделать обратный отсчет в классе "время"
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.table{
border-collapse: collapse;
}
.table td{
border: 1px solid #000;
padding: 10 10;
}
.check{
background: green;
}
.click{
cursor: pointer;
}
</style>
<table class="table">
<tr>
<td>#</td>
<td colspan="4">Число</td>
<td><span class="vremja">00:50:00</span></td>
</tr>
<tr>
<td rowspan="3">1.</td>
<td class="click">01</td>
<td class="click">02</td>
<td class="click">03</td>
<td class="click">04</td>
<td rowspan="3"><select class="num" disabled><option value=""></option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select></td>
</tr>
<tr>
<td class="click">05</td>
<td class="click">06</td>
<td class="click">07</td>
<td class="click">08</td>
</tr>
<tr>
<td class="click">09</td>
<td class="click">10</td>
<td class="click">11</td>
<td class="click">12</td>
</tr>
<tr>
<td>#</td>
<td colspan="4">Число</td>
<td><span class="vremja">00:30:00</span></td>
</tr>
<tr>
<td rowspan="3">2.</td>
<td class="click">13</td>
<td class="click">14</td>
<td class="click">15</td>
<td class="click">16</td>
<td rowspan="3"><select class="num" disabled><option value=""></option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select></td>
</tr>
<tr>
<td class="click">17</td>
<td class="click">18</td>
<td class="click">19</td>
<td class="click">20</td>
</tr>
<tr>
<td class="click">21</td>
<td class="click">22</td>
<td class="click">23</td>
<td class="click">24</td>
</tr>
</table>
|
Цитата:
|
ksa,
то что незнаю как сделать :) |
Sav2907, не знаешь как:
- взять значение времени - уменьшить его на одну секунду/минуту - записать новое значение обратно - повторить действие через секунду/минуту Т.е. все это ты не знаешь? :blink: Тогда зачем взялся за такую задачу? |
ksa,
прошу чтобы показали как это делается, тем более если данные выводятся из базы в цикле |
Sav2907,
форум - поиск -- таймер таймеры timer |
рони,
Это же не то.. |
Sav2907,
если вам не нужен таймер тогда неизвестно что вы хотите. |
Цитата:
нашел такой, но не могу прикрутить к класу
<script type="text/javascript">
function timer(){
var obj=document.getElementById('timer_inp');
obj.innerHTML--;
if(obj.innerHTML==0){alert('Hello');setTimeout(function(){},1000);}
else{setTimeout(timer,1000);}
}
setTimeout(timer,1000);
</script>
<div id="timer_inp">100</div>
|
|
рони,
там нужно отдельно указывать минуты и секунды, было бы хорошо если бы только секунды, а оно бы показывало часы минуты секунды |
А можно добавить часы data-chas?
|
Успех, кому нужно
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
window.addEventListener('DOMContentLoaded', function() {
function refresh()
{
[].forEach.call( document.querySelectorAll('.timer'), function(el) {
var sec = +el.dataset.sec;
if(sec==-1){sec=el.dataset.sec=59; el.dataset.min--;}
var min = +el.dataset.min;
if(min==-1){min=el.dataset.min=59; el.dataset.chas--;}
var chas = +el.dataset.chas;
if(sec<=9){sec="0" + sec;}
time=(chas<=9 ? "0" + chas : chas) + ":" + (min<=9 ? "0" + min : min) + ":" + sec;
el.innerHTML=time;
if(+sec||+min||+chas) el.dataset.sec--;
});
setTimeout(refresh, 1000);
}
refresh()
});
</script>
</head>
<body>
<span class="timer" data-chas="01" data-min="01" data-sec="05"></span><br>
<span class="timer" data-chas="00" data-min="01" data-sec="05"></span>
</body>
</html>
|
Sav2907,
:dance: |
| Часовой пояс GMT +3, время: 14:30. |