html簡單隨機抽獎頁面（在線抽獎、隨機選取、自動挑選）

本文轉載自查看原文 2021-07-19 16:27 1495

下載： https://download.csdn.net/download/weixin_44893902/20366745

效果：

在這里插入圖片描述

代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在線抽獎 隨機選取 自動挑選</title>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style> body { background-color:aliceblue; } .wrapDiv { width:80%; max-width:1200px; margin:0 auto; text-align:center; position:absolute; top:80px; left:0; right:0; } .leftBox { float:left; width:800px; height:240px; /*background-color:aqua; */ margin:0 auto; margin-top:0px; clear:both; } #span { float:right; top:30px; right:185px; } #btn { float:left; width:100px; height:30px; margin-left:10px; margin-top:150px; } .nameBox { width:100px; height:30px; float:left; background-color:antiquewhite; margin-left:10px; margin-top:10px; text-align:center; line-height:30px; } .selectedName { float:right; width:340px; background:#666; margin-top:10px; margin-left:30px; background:#ffffff; overflow:hidden; } h1 { text-align:center; } </style>
</head>
<body>
<h1>隨機抽獎系統</h1>
<span id="span"></span>

<div class="wrapDiv">
    <div id="leftBox" class="leftBox"></div>
    <div id="selectedName" class="selectedName">
        <h1>中獎者名單</h1>
    </div>

    <input type="button" id="btn" value="開始走起">
</div>

<script> // 模擬后台數據 var arr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "22", "23", "24", "25", "26", "27", "28", "29", "30", ]; var orgArrCount = arr.length; var currentSelectNum = 0; initForm(); // 初始化表單 function initForm() { // 動態設置選擇人的高度 var selectedNameHeight = orgArrCount / 3 * 40 + 120; $("#selectedName").css("height", selectedNameHeight + "px"); // 動態創建圖層 dynamicCreateBox(); } // 動態創建層 function dynamicCreateBox() { for (var i = 0; i < arr.length; i++) { var div = document.createElement("div"); div.innerText = arr[i]; div.className = "nameBox"; $("#leftBox").append(div); }; } // 清空小方格顏色 function clearBoxColor() { $("#leftBox").children("div").each(function() { $(this).css("background-color", ""); }); } // 設置選中小方格顏色 function setBoxColor() { $("#leftBox").children("div").each(function() { var thisText = ($(this).text()); var selectedName = arr[currentSelectNum]; if (thisText == selectedName) { $(this).css("background-color", "red"); } }); } function appendSelectedName() { var div = document.createElement("div"); div.innerText = arr[currentSelectNum]; div.className = "nameBox"; $("#selectedName").append(div); } $('#btn').click(function() { var curentCount = arr.length; if (curentCount < 1) { alert("沒有可選人了"); // 清空所有層的顏色 clearBoxColor(); return; } // 監視按鈕的狀態 if (this.value === "開始走起") { // 定時針 timeId = setInterval(function() { // 清空所有層的顏色 clearBoxColor(); //隨機生成一個數 var num = Math.floor(Math.random() * curentCount); currentSelectNum = num; // 設置選中小方格顏色 setBoxColor(); }, 10); this.value = "停止"; } else { // 清除計時器 clearInterval(timeId); // 添加選中人 appendSelectedName(); // 移除 arr.splice(currentSelectNum, 1); this.value = "開始走起"; } }); // 獲取時間的函數 getTime(); setInterval(getTime, 10) function getTime() { var day = new Date(); var year = day.getFullYear(); //年 var month = day.getMonth() + 1; //月 var dat = day.getDate(); //日 var hour = day.getHours(); //小時 var minitue = day.getMinutes(); //分鍾 var second = day.getSeconds(); //秒 month = month < 10 ? "0" + month : month; dat = dat < 10 ? "0" + dat : dat; hour = hour < 10 ? "0" + hour : hour; minitue = minitue < 10 ? "0" + minitue : minitue; second = second < 10 ? "0" + second : second; $("#span").innerText = year + "-" + month + "-" + dat + " " + hour + ":" + minitue + ":" + second } </script>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML + CSS + JavaScript 實現簡單的自動跳轉頁面關於隨機紅包抽獎算法 html簡單登錄頁面 html頁面自動刷新 Winform 隨機抽獎小程序隨機數抽獎代碼如何讓寫得html頁面自動刷新 HTML頁面打開自動加載 js隨機選取三個0到9的隨機數 js 簡單抽獎實現