1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Borderlands 3</title>
<style type="text/css">
body {
background: #f6f6f6;
}
table {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
background: #FFA500;
border: 1px solid #999;
padding: 10px;
box-shadow: 0 0 5px 3px #ccc;
}
tbody, thead {
font-size: 80px;
white-space: nowrap;
}
span {
font-size: 120px;
font-weight: bold;
vertical-align: -0.10em;
}
</style>
</head>
<body>
<table>
<thead>
<tr><td colspan="4">BORDERLANDS <span>3</span></td></tr>
</thead>
<tbody>
<tr><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</tbody>
<tfoot>
<tr><td>Days</td><td>Hours</td><td>Minutes</td><td>Seconds</td></tr>
</tfoot>
</table>
<script>
const td_Day = document.querySelector('tbody').rows[0].cells[0]
, td_Hour = document.querySelector('tbody').rows[0].cells[1]
, td_Min = document.querySelector('tbody').rows[0].cells[2]
, td_Sec = document.querySelector('tbody').rows[0].cells[3]
, one_Sec = 1000
, one_Min = one_Sec * 60
, one_Hour = one_Min * 60
, one_Day = one_Hour * 24
, Finish = new Date(2019, 08, 13) // 08 == septembre, car 00 == Janvier
let timerInterval = setInterval(_=>
{
let now = new Date().getTime()
, tim = Finish - now
if (tim >= 0)
{
td_Day.textContent = Math.floor(tim / one_Day)
td_Hour.textContent = ("0" + Math.floor((tim % one_Day ) / one_Hour)).slice(-2)
td_Min.textContent = ("0" + Math.floor((tim % one_Hour) / one_Min )).slice(-2)
td_Sec.textContent = ("0" + Math.floor((tim % one_Min ) / one_Sec )).slice(-2)
}
else
{
clearInterval(timerInterval)
}
}, one_Sec )
</script>
</body>
</html> |
Partager