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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CHIFFRES CLES</title>
</head>
<body>
<table width="518" border="1">
<tr>
<td width="335" style="text-align: center" ><p id="demo1" style="color: #BC2E30;"></td>
<td width="335" style="text-align: center" ><p id="demo2" style="color: #BC2E30;"></td>
<td width="167" style="text-align: center" class="compteur">100</td>
</tr>
</table>
<!-----------------------SCRIPT 1---------------------------->
<script>
// j'appelle mon fichier de data exerne avec extension .json
$.getJSON('chiffres_salaries.json', function(data) {
// J'écris sur la page
document.getElementById("demo1").innerHTML=data.datametier[23].total.toLocaleString();
} );
</script>
<!-----------------------SCRIPT 2---------------------------->
<script>
// j'appelle mon fichier de data exerne avec extension .json
$.getJSON('chiffres_salaries.json', function(data) {
// J'écris sur la page
document.getElementById("demo2").innerHTML=data.datametier[24].total.toLocaleString();
} );
</script>
<!-----------------------SCRIPT 3---------------------------->
<script type="text/javascript">
$(".compteur").each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
</script>
</body>
</html> |
Partager