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>
运行效果如下所示:
页面初始加载状态:

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

上述截图为程序运行过程中的静止画面,实际使用时可点击按钮体验数字快速滚动的效果,操作过程能带来一定的互动乐趣。
以上就是本文的全部内容,希望大家能在此基础上继续深入学习相关技术。
作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
