原生js實現(xiàn)簡易抽獎系統(tǒng)

更新時間：2022年03月09日 11:31:17 作者：小鑫a

這篇文章主要為大家詳細介紹了原生js實現(xiàn)簡易抽獎系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)簡易抽獎系統(tǒng)的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

原理：

其實這里的原理就是通過按鈕的狀態(tài)是開始抽獎還是停止如果i=ture 那就觸發(fā)定時器每50毫秒更換一次中獎的內(nèi)容。如果i=false，那就清除定時器，顯示最后的抽獎結(jié)果

下面我給大家畫了個更直觀的圖

HTML結(jié)構(gòu)與樣式

<!doctype html>
<html lang="en">
<head>
?? ?<meta charset="UTF-8">
?? ?<title>Document</title>
?? ?<style>
?? ??? ?* {
?? ??? ??? ?margin: 0;
?? ??? ??? ?padding: 0;
?? ??? ?}

?? ??? ?h2 {
?? ??? ??? ?font-weight: normal;
?? ??? ?}

?? ??? ?.box {
?? ??? ??? ?width: 450px;
?? ??? ??? ?height: auto;
?? ??? ??? ?background: #fff;
?? ??? ??? ?border-radius: 3px;
?? ??? ??? ?margin: 50px auto;
?? ??? ??? ?padding-bottom: 1em;
?? ??? ??? ?box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 5px 15px 0 rgba(0, 0, 0, 0.19);
?? ??? ?}

?? ??? ?.header {
?? ??? ??? ?width: 100%;
?? ??? ??? ?height: auto;
?? ??? ??? ?padding: 0.5em 0.8em;
?? ??? ??? ?border-bottom: 1px solid #ccc;
?? ??? ??? ?box-sizing: border-box;
?? ??? ?}

?? ??? ?.body {
?? ??? ??? ?width: 100%;
?? ??? ??? ?height: auto;
?? ??? ??? ?text-align: center;
?? ??? ?}

?? ??? ?.body:after {
?? ??? ??? ?content: "";
?? ??? ??? ?display: block;
?? ??? ??? ?clear: both;
?? ??? ?}

?? ??? ?.body > div {
?? ??? ??? ?width: 180px;
?? ??? ??? ?margin: 0 auto;
?? ??? ?}

?? ??? ?.body > div > span {
?? ??? ??? ?padding-top: 1em;
?? ??? ??? ?float: left;
?? ??? ?}

?? ??? ?#tip {
?? ??? ??? ?display: none;
?? ??? ?}

?? ??? ?.footer {
?? ??? ??? ?width: 180px;
?? ??? ??? ?height: 30px;
?? ??? ??? ?background: #2ab8ff;
?? ??? ??? ?line-height: 30px;
?? ??? ??? ?text-align: center;
?? ??? ??? ?margin: 1em auto;
?? ??? ??? ?color: #ccc;
?? ??? ??? ?border: 1px solid #2193cc;
?? ??? ??? ?border-radius: 3px;
?? ??? ??? ?cursor: pointer;
?? ??? ?}

?? ??? ?.footer:hover {
?? ??? ??? ?background: #4ec1fb;
?? ??? ?}

?? ?</style>
</head>
<body>
?? ?<div class="box">
?? ??? ?<div class="header">
?? ??? ??? ?<h2>簡易抽獎系統(tǒng)</h2>
?? ??? ?</div>
?? ??? ?<div class="body">
?? ??? ??? ?<div>
?? ??? ??? ??? ?<span id="tip">恭喜你！獲得：</span>
?? ??? ??? ??? ?<span id="put"></span>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ??? ?<div class="footer">
?? ??? ??? ?點擊抽獎
?? ??? ?</div>
</div>

js代碼

<script>
?? ??? ?/* 獲取按鈕 */
?? ??? ?var btn = document.querySelector('.footer');
?? ??? ?/* 獲取提示的標簽 */
?? ??? ?var tip = document.querySelector('#tip');
?? ??? ?/* 獲取要輸出的標簽 */
?? ??? ?var put = document.querySelector('#put');
?? ??? ?/* 定義中獎的項目 */
?? ??? ?var gift = ['QQ會員','黃鉆','綠鉆','黑鉆','紫鉆','紅鉆','藍鉆','鉆皇'];
?? ??? ?/* 定義i==true 用于判斷 */
?? ??? ?var i = true;
?? ??? ?/* 定義定時器 */
?? ??? ?var Timer;
?? ??? ?var n = 0;

?? ??? ?btn.onclick=function() {
?? ??? ??? ?if (i == true) {
?? ??? ??? ??? ?btn.style.background = '#f1516c';
?? ??? ??? ??? ?btn.style.borderColor = '#db2745';
?? ??? ??? ??? ?tip.style.display = 'block';
?? ??? ??? ??? ?Timer = setInterval(function() {
?? ??? ??? ??? ??? ?n++;
?? ??? ??? ??? ??? ?if (n == gift.length) {
?? ??? ??? ??? ??? ??? ?n = 0;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?put.innerHTML = gift[n];
?? ??? ??? ??? ?},50)
?? ??? ??? ??? ?btn.innerHTML = '停止';
?? ??? ??? ??? ?i = false;
?? ??? ??? ?}else {
?? ??? ??? ??? ?btn.style.background = '#2ab8ff';
?? ??? ??? ??? ?btn.style.borderColor = '#2193cc';
?? ??? ??? ??? ?clearInterval(Timer);
?? ??? ??? ??? ?btn.innerHTML = '開始抽獎';
?? ??? ??? ??? ?i = true;
?? ??? ??? ?}
?? ??? ?}
</script>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: