timer of dataset
nekada, добавляйте когда хотите, только укажите class и dataset
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.timer{
background-color: #000080;
color: #FFFFFF;
margin: 5px 2px;
padding: 4px;
}
</style>
<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(sec<=9){sec="0" + sec;}
time=(min<=9 ? "0" + min : min) + ":" + sec;
el.innerHTML=time;
if(+sec||+min) el.dataset.sec--;
else el.classList.remove("timer")
});
setTimeout(refresh, 1000);
}
refresh()
});
</script>
</head>
<body>
<span class="timer" data-min="1" data-sec="7"></span>
<span class="timer" data-min="0" data-sec="11"></span>
</body>
</html>
|