Skip to content
Youths Forum Youths Forum Youths Forum

Tech Blogs & Programming Tutorials

Youths Forum Youths Forum Youths Forum

Tech Blogs & Programming Tutorials

  • Blog
  • News
  • Programming
    • PHP
    • JavaScript
    • JQuery
    • CSS
    • HTML
    • API
  • Stock Market Live
  • Automobiles
    • Cars
  • Gadgets
    • Phones
    • Android Phones

Categories

  • Artificial Intelligence (1)
  • Automobiles (12)
    • Cars (7)
  • Blog (104)
    • Poems (2)
    • Space (2)
  • Command (2)
  • Education (2)
  • Entertainment (4)
  • Gadgets (9)
    • Phones (8)
      • Android Phones (4)
  • HTML Templates (11)
  • IT Training Institutes (1)
  • Lifestyle (4)
  • News (190)
  • Others (23)
  • Programming (296)
    • API (16)
    • CSS (83)
    • Database (4)
    • Hosting (1)
    • HTML (37)
    • JavaScript (117)
      • JQuery (27)
      • ReactJS (7)
    • PHP (116)
  • Python (3)
  • recipes (1)
  • SEE Result (1)
  • Server (3)
  • Blog
  • News
  • Programming
    • PHP
    • JavaScript
    • JQuery
    • CSS
    • HTML
    • API
  • Stock Market Live
  • Automobiles
    • Cars
  • Gadgets
    • Phones
    • Android Phones
Close

Search

JavaScript

Lottery Lucky Draw generator using JavaScript

By Admin
September 1, 2022 1 Min Read
0

In this tutorial, we will be using JavaScript to generate a Lottery Lucky Draw in our webpage.

The basic idea is to rotate through a number of random numbers and and stop it at any random point to decide the winner of the lottery.

Follow this video for complete guidance :

Full Source Code for Lottery Draw Generator with JavaScript :

<style type="text/css">
  body{
    background: #3f9d43;
  }
  .box{
    width: 50%;
    margin: 0 auto;
    padding:30px;
    text-align: center;
  }
  .odometer{
    font-size: 12em;
    background:#fff;
      border-radius:40px 40px 0 0;
      margin-top:50px;
      border-bottom: 2px solid #ddd;
  }
  .btn-winner{
    font-size: 2em;
    background: #6c9dc9;
    color: #fff;
    cursor: pointer;
  }
  .btn-winner:hover {
      transition-duration: 0.1s;
      box-shadow:  0 0 18px rgba(255, 255, 255, 0.75);
      user-select: none;
  }

</style>

<div id="odometer" class="odometer box">0</div>
<div class="btn-winner box" onclick="getWinner();">Get Winner</div>


  <script type="text/javascript">

  function generateRandom(maxLimit = 100){
    let rand = Math.random() * maxLimit;
    rand = Math.floor(rand);
    return rand;
  }
  
  function getWinner(){
    document.getElementsByClassName('btn-winner')[0].innerHTML = 'Please wait for the result ....';
    interval = setInterval(function(){
      	document.getElementById('odometer').innerHTML = generateRandom();
    },100);

    setTimeout(function(){
      clearInterval(interval);
      document.getElementsByClassName('btn-winner')[0].innerHTML = 'Get Winner';
    },3000);
  }

    
</script>

 

Author

Admin

Follow Me
Other Articles
Previous

Rotate Image using jQuery and CSS

Next

How to change image randomly in a webpage using JavaScript ?

No Comment! Be the first one.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Nepal Life’s ‘Business Excellence Conference’ Concludes, Over 13 Billion in First Premium Income Collected
  • Direct Meeting Between Chinese and Nepali Battery Businesspeople in Lalitpur: What Kind of Battery is in Demand in Nepal?
  • Kamana Sewa Bikas Bank Calls 20th Annual General Meeting, Other Resolutions to be Passed Including 15% Cash Dividend
  • Preparations complete for ‘NADA Auto Show 2026’, parking arranged at two locations
  • Nepal Telecom’s 4G Service Launched in Badimalika, Easing Access for Pilgrims

Tags

adsense ai animate animation animation using HTML and CSS API blog calculator chatgpt Cryptocurrency CSS css animation design Email Facebook featured filemanager file manager free template google htaccess HTML image Instagram interview javascript JQuery jquery ui NADA AutoShow NADA Auto Show 2024 password PHP Progressive Web App PWA QR random react reactjs Rotate travel Twitter vpn youthforum youthsforum youtube

About Us

At Youths Forum, we are passionate about sharing knowledge that empowers students, educators, professionals, and technology enthusiasts.

Our Mission

Our mission is simple: to make technology and education accessible, understandable, and beneficial for everyone. We strive to create content that helps our readers learn new skills and stay updated with industry developments.

RSS RSS

  • Nepal Life’s ‘Business Excellence Conference’ Concludes, Over 13 Billion in First Premium Income Collected Admin
  • Direct Meeting Between Chinese and Nepali Battery Businesspeople in Lalitpur: What Kind of Battery is in Demand in Nepal? Admin
  • Kamana Sewa Bikas Bank Calls 20th Annual General Meeting, Other Resolutions to be Passed Including 15% Cash Dividend Admin

Quick Links

  • Stock Market Live
  • Parliament Election 2082
Copyright 2026 — Youths Forum. All rights reserved. Blogsy WordPress Theme