JavaScript实现简易单数字随机抽奖特效

作者:异步漫步时间:2026-10-29 13:08:48浏览:402

本文介绍如何使用JavaScript实现一个简单的单数字随机抽奖网页特效。通过setInterval和clearInterval控制数字快速滚动与停止,模拟电视抽奖效果。代码包含HTML结构、两个操作按钮及核心JS逻辑,适合初学者学习随机数生成与定时器应用。

JavaScript实现简易单数字随机抽奖特效

本文分享一个基于网页的简易数字抽奖特效,功能类似于电视节目中常见的数字滚动抽奖。以下是完整的实现代码:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简易的单数字随机抽奖,抽取随机数的js特效代码</title>
</head>
<body>
<div id="num"></div>
<input value="start" id="start" type="button" />
<input value="stop" id="stop" type="button" />
<script>
var num = document.getElementById("num");
var start = document.getElementById("start");
var _stop = document.getElementById("stop");
var intv = null;
start.onclick = function(){
 
 if(intv==undefined){
 
 intv = setInterval(function(){num.innerHTML = Math.floor(Math.random()*10);},50);
 
 }
 
}
_stop.onclick = function(){
 
 clearInterval(intv);
 
 intv=null;
 
}
</script>
</body>
</html>

运行效果如下所示:

页面初始加载状态:

JavaScript实现简易单数字随机抽奖特效

点击开始按钮后的运行状态:

JavaScript实现简易单数字随机抽奖特效

上述截图为程序运行过程中的静止画面,实际使用时可点击按钮体验数字快速滚动的效果,操作过程能带来一定的互动乐趣。

以上就是本文的全部内容,希望大家能在此基础上继续深入学习相关技术。

作者最新文章