Monday, July 12

Javascript: Counting sampai bilangan tertentu

pada tulisan ini akan saya bahas tentang bagaimana caranya melakukan counting dari 0 sampai bilangan tertentu, tentunya dengan delay supaya terlihat iterasi penghitungannya.

fungsi javascript yang digunakan adalah sebagai berikut:

function incCounter() {
var currCount = parseInt($('#counter1').html());
$('#counter1').text(currCount+1);
if (currCount+1 != max) {
setTimeout('incCounter()',delay);
}

}


cara kerja fungsi javascript di atas adalah mengambil id dari html, kemudian diiterasi dengan delay tertentu. jika sudah sampai max maka iterasi berhenti.
berikut adalah contoh penggunaannya secara lengkap:



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Penghitungan Suara</title>
<link rel="stylesheet" href="images/main.css" type="text/css" title="main" media="screen">
<style type="text/css">
<!--
.style1 {
font-size: 60px;
font-weight: bold;
padding-left:30px;

font-family: "Times New Roman", Times, serif;
margin-top:40px;
}
.style2 {

margin-top:20px;
}
-->
</style>
<script src="jquery.js"></script>

<script type="text/javascript">

var max = 9;// set with php

var delay = 500;

$(function(){

incCounter();

});
function incCounter() {
var currCount = parseInt($('#counter1').html());
$('#counter1').text(currCount+1);
if (currCount+1 != max) {
setTimeout('incCounter()',delay);
}
else{
index = index +1;
if(index < jumca) $('#td1').text('X');

}
}



</script>
</head>

<body>
<div align="center" class="style2">

<table width="568" >
<tr>
<td height="21" colspan="4">&nbsp;</td>

<tr>
<td height="132" valign="middle" ><span class="style1" id="counter1">0</span></td>

</tr>
</table>
</div>
</body>
</html>

No comments:

Post a Comment

Pencarian Google