이번에는 JS를 이용한 무작위 복권 시스템을 소개해 드리겠습니다. JS를 사용하여 무작위 복권 시스템을 구축할 때의 주의 사항은 무엇입니까?
JavaScript를 사용하여 [시작] 버튼과 [중지] 버튼이 있는 간단한 복권 시스템을 구현하세요.
기능:
- 복권을 시작하려면 시작 버튼을 클릭하세요. 상품 이름이 무작위로 표시됩니다.
- 복권을 중지하려면 중지 버튼을 클릭하세요.
- 복권 시작과 중지 사이를 전환하려면 Enter 키를 누르세요.
효과
HTML 코드:
기본적으로 표시된 상품 이름과 시작 및 중지 버튼을 포함하는 html 구조를 만듭니다.
rreeeNode.js 메인 코드 조각:
먼저 데이터 배열을 정의하고 각 상품의 이름을 작성합니다. 그리고 타이머와 키보드 이벤트 상태 플래그를 초기화합니다(초기 상태는 0, 키보드를 누르면 1로 바뀌고, 키보드를 다시 누르면 0으로 바뀌는 등).
<!doctype html> <html> <head> <title>抽奖系统</title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/script.js"></script> </head> <body> <p id="title" class="title">开始抽奖啦!</p> <p class="btns"> <span id="play">开 始</span> <span id="stop">停 止</span> </p> </body> </html>
복권 시작 함수 playFun();
var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券']; timer = null, flag = 0;
정의 복권 중지 함수 stopFun();
function playFun() { var title = document.getElementById('title'); var play = document.getElementById('play'); //每次都先清除上一次的定时器任务,避免抽奖效果累加频率会越来越快 clearInterval(timer); //定时器50毫秒触发一次 timer = setInterval(function(){ //获取奖品下标随机数 var random = Math.floor(Math.random() * data.length); //显示随机的奖品名称 title.innerHTML = data[random]; }, 50); //改变将开始按钮背景色 play.style.background = '#666'; }
을 정의하세요. Enter 키를 눌러 추첨 상태 이벤트를 전환하세요.
function stopFun(){ //清除定时器即可结束抽奖 clearInterval(timer); var play = document.getElementById('play'); //改变将停止按钮背景色 play.style.background = '#036'; }
Node.js 전체 코드:
document.onkeyup = function(event){ event = event || window.event; //回车键键码为13 if (event.keyCode == 13) { //如果状态flag值为0则开始抽奖,并把状态值改为1,否则停止抽奖并把状态值改为0 if (flag == 0){ playFun(); flag = 1; }else{ stopFun(); flag = 0; } } }
CSS 스타일:
var data = ['Phone7', 'Ipad', '三星笔记本', '佳能相机', '惠普打印机', '谢谢参与', '100元充值卡', '1000元超市购物券'], timer = null, //定时器 flag = 0; //用于键盘事件状态标记 window.onload = function() { var play = document.getElementById('play'), stop = document.getElementById('stop'); // 开始抽奖 play.onclick = playFun; stop.onclick = stopFun; // 键盘事件 document.onkeyup = function(event) { event = event || window.event; if (event.keyCode == 13) { if (flag == 0) { playFun(); flag = 1; } else { stopFun(); flag = 0; } } } } // 开始抽奖 function playFun() { var title = document.getElementById('title'); var play = document.getElementById('play'); //每次都先清除上一次的定时器任务,避免抽奖效果累加频率会越来越快 clearInterval(timer); timer = setInterval(function() { var random = Math.floor(Math.random() * data.length); title.innerHTML = data[random]; }, 50); play.style.background = '#999'; } //停止抽奖 function stopFun() { clearInterval(timer); var play = document.getElementById('play'); play.style.background = '#036'; }
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
위 내용은 JS는 무작위 복권 시스템을 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!