you can use jquery timer for this kind of functionality.
When user click on the start button, using jquery methods like slideDown, slideUp and timer change all the 6 digits from zero to nine (like we see in Casinos) and till that time using asynchronous call you can retrieve number from database and split it into array.
Now when user click on the stop button,
increase the timer interval of first digit so that first digit starts moving very slowly and keep moving till the first digit does not match the first item of the array.
whenever it matches the first item of the array. stop the timer and show first digit and go to the second digit and do the same process upto 6 digist.
See Below Sample Application :
1. Add aspx page : Lotary.aspx
2. Add Generic handler : DigitHandler.ashx
1. Lotary.aspx :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Lotary.aspx.cs" Inherits="TestApplication.Lotary" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.DigitContainer {
border: 1px solid blueviolet;
padding: 3px;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" EnablePageMethods="True"></asp:ScriptManager>
<div style="float: left">
<div style="float: left" >
<div id="digit1" class="DigitContainer">0</div>
</div>
<div style="float: left">
<div id="digit2" class="DigitContainer">0</div>
</div>
<div style="float: left">
<div id="digit3" class="DigitContainer">0</div>
</div>
<div style="float: left">
<div id="digit4" class="DigitContainer">0</div>
</div>
<div style="float: left">
<div id="digit5" class="DigitContainer">0</div>
</div>
<div style="float: left">
<div id="digit6" class="DigitContainer">0</div>
</div>
</div>
<br/><br/>
<asp:Button runat="server" ID="buttonStart" Text="Start" OnClientClick="return StartRolling();" />
<asp:Button runat="server" ID="button1" Text="Stop" OnClientClick="return StopRolling();" />
</form>
</body>
<script type="text/javascript" language="javascript">
var myDigits = new Array();
var isStop = false;
function StartRolling() {
isStop = false;
for (var i = 1; i <= 6; i++) {
StartDigitRolling('digit' + i, i);
}
return false;
}
function StartDigitRolling(digitId, digitIndex) {
var time = Math.floor(Math.random() * 150) + 100;
myDigits[digitIndex] = setInterval(function () {
setTimeout(function() {
if (!isStop) {
var number = parseInt(document.getElementById(digitId).innerText);
if (number == 9) {
number = -1;
}
document.getElementById(digitId).innerText = number + 1;
}
}, 50);
}, time);
}
function StopRolling() {
var numbers;
isStop = true;
$.ajax({
url: 'DigitHandler.ashx',
async: true,
cache: false,
data: {},
success: function (response) {
if (response != null) {
numbers = response.split('');
isSuccess = true;
for (var i = 1; i < 100; i++)
window.clearInterval(i);
var counter = 1;
do {
document.getElementById('digit' + counter).innerText = numbers[counter - 1];
counter++;
} while (counter != 7)
}
},
});
return false;
}
</script>
</html>
2. DigitHandler.ashx.cs
using System.Web;
namespace TestApplication
{
public class DigitHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("123456");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Note : In ProcessRequest of handler, retrieve random number from database and insetead of 123456 put retrieved random number.
Regards,
CodeBlack