Javascript特效之模拟抽奖程序

最新推荐文章于 2025-06-03 15:22:54 发布

shaojia_

最新推荐文章于 2025-06-03 15:22:54 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： javasrcipt 前端之路文章标签：抽奖程序

本文链接：https://blog.youkuaiyun.com/a271720559/article/details/80934589

前端之路同时被 2 个专栏收录

40 篇文章

订阅专栏

javasrcipt

30 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简易抽奖程序。通过预设参与抽奖的名字列表，并利用setInterval定时器来实现快速切换显示效果，达到模拟抽奖过程的目的。点击停止按钮后，定时器将被清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript特效之模拟抽奖程序

我们经常会看到一些抽奖程序，应该很多都是H5做的，今天我们来看看js怎么实现类似抽奖的程序。

效果图：

点击开始时，会一直跳动文本框的值直到我们点击停止。就类似抽奖的效果。不过这个几率没法设置。

实现思路：

我们先预设好参与抽奖的内容。再写一个setInterval重复执行函数，让文本框一直随机显示我们预设的内容。点击停止时则清除setInterval即可。

js代码：

var   alldata   =   "linkweb,sharejs,csdn,google,baidu,msn,qq,cctv,microsoft,adobe" //抽奖的姓名，以,为分隔   
    
  var   alldataarr   =   alldata.split(",")   
  var   num   =   alldataarr.length-1   
  var   timer   
  function   change(){   
  document.getElementById("oknum").value   =   alldataarr[GetRnd(0,num)];   
  }   
    
  function   start(){   
  clearInterval(timer);   
  timer   =   setInterval('change()',50); //50（毫秒）为变换间隔，越小变换的越快   
  }   
    
  function   ok(){   
  clearInterval(timer);   
  }   
    
  function   GetRnd(min,max){   
  return   parseInt(Math.random()*(max-min+1));   
  }