当前位置: 首页 > news >正文

年会抽奖Html

在这里插入图片描述

在这里插入图片描述

<!-- <video id="backgroundMusic" src="file:///D:/background.mp3" loop autoplay></video> -->
<divstyle="width: 290px; height: 580px; margin-left: 20px; margin-top: 20px; background: url('D:/nianhui/zu.png') no-repeat center center; background-size: cover; "><span style="color: #FDF368; top: 60px; font-weight: bold; position: relative; "> <buttonstyle="color: #FDF368; background-color:rgb(219, 0, 1) ; border:0px ;font-size: 30px;"onclick="jixiang()">抽取 吉祥如意(15份)</button></span><br /><div style="top: 90px; position: relative;font-size: 20px;"><span id="jixing1" style="color: #FDF368; font-size: 20px;"></span><span id="jixing2" style="color: #FDF368;"></span><span id="jixing3" style="color: #FDF368;"></span><span id="jixing4" style="color: #FDF368;"></span><span id="jixing5" style="color: #FDF368;"></span><span id="jixing6" style="color: #FDF368;"></span><span id="jixing7" style="color: #FDF368;"></span><span id="jixing8" style="color: #FDF368;"></span><span id="jixing9" style="color: #FDF368;"></span><span id="jixing10" style="color: #FDF368;"></span><span id="jixing11" style="color: #FDF368;"></span><span id="jixing12" style="color: #FDF368;"></span><span id="jixing13" style="color: #FDF368;"></span><span id="jixing14" style="color: #FDF368;"></span><span id="jixing15" style="color: #FDF368;"></span><div style="position: relative; color: #FDF368; font-weight: bold; top: 30px;"> <buttonstyle="color: #FDF368; background-color:rgb(219, 0, 1) ; border:0px ;font-size: 30px;"onclick="fuixng()">抽取 福星高照(4份)</button> </div><div style="top: 50px; position: relative;"><span id="fu1" style="color: #FDF368;"></span><span id="fu2" style="color: #FDF368;"></span><span id="fu3" style="color: #FDF368;"></span><span id="fu4" style="color: #FDF368;"></span></div><div style="position: relative; color: #FDF368; font-weight: bold; top: 70px;"> <buttonstyle="color: #FDF368; background-color:rgb(219, 0, 1) ; border:0px ;font-size: 30px;"onclick="hongyun()">抽取 鸿运当头(1份)</button> </div><div style="position: relative; top: 90px; color: #FDF368;"><span id="hong" style="color: #FDF368;"></span></div><div style="position: relative; color: #FDF368; font-weight: bold; top: 120px;"> <buttonstyle="color: #FDF368; background-color:rgb(219, 0, 1) ; border:0px ;font-size: 30px;"onclick="desk()">抽取 桌奖</button> </div></div>
</div><div class="container" id="containers" style="margin-top: -25%; align-items: center;"><div class="result" id="result" "><div class=" image-wrapper1" id="mage-wrapper1"style="background: url('D:/nianhui/num.png'); width: 365px; height: 295px;  background-size: cover;"onclick="chongzhi(1)"><span id="div1"style="font-weight: bold; color: #FDF368; font-size: 98px; animation: pulse 1.5s infinite; top: 88px; position: relative; ">🎉</span></div><div class="image-wrapper2" id="mage-wrapper2"style="background: url('D:/nianhui/num.png'); width: 365px; height: 295px; margin-left: 10px; background-size: cover;"onclick="chongzhi(2)"><span id="div2"style="font-weight: bold; color: #FDF368; font-size: 98px; top: 88px; animation: pulse 1.5s infinite; position: relative;">🎉</span></div><div class="image-wrapper3" id="mage-wrapper3"style="background: url('D:/nianhui/num.png'); width: 365px; height: 295px; margin-left: 10px;background-size: cover;"onclick="chongzhi(3)"><span id="div3"style="font-weight: bold; color: #FDF368; font-size: 98px; top: 88px; position: relative; animation: pulse 1.5s infinite;">🎉</span></div><div class="image-wrapper4" id="mage-wrapper4"style="background:url('D:/nianhui/num.png'); width: 365px; height: 295px; margin-left: 10px;background-size: cover;"onclick="chongzhi(4)"><span id="div4"style="font-weight: bold; color: #FDF368; font-size: 98px; top: 88px; position: relative; animation: pulse 1.5s infinite;">🎉</span></div><div class="image-wrapper5" id="mage-wrapper5"style="background: url('D:/nianhui/num.png'); width: 365px; height: 295px; margin-left: 10px;background-size: cover;"onclick="chongzhi(5)"><span id="div5"style="font-weight: bold; color: #FDF368; font-size: 98px; top: 88px; position: relative; animation: pulse 1.5s infinite;">🎉</span></div>
</div><span id="xianshi"style="color: #FDF368; font-size: 50px; margin-top: 100px; position: relative; left: -100px;">准备抽奖...</span>
<div style="top:96%; left: 80px; position: absolute;"><button id="startButton" class="custom-button" onclick="btnStart()"> <spanstyle="font-size: 10px; ">开始</span></button><!-- <button id="stopButton" class="custom-button" style="margin-left: 60px;" onclick="btnStop()" disabled>重置</button> -->
</div>
<div style="top:96%; left: 150px; position: absolute;"><button id="stopButton" class="custom-button" style="margin-left: 60px;" onclick="btnStop()" disabled><spanstyle="font-size: 10px;">暂停</span></button>
</div>
<div id="poke" onclick="checkPoke()"style="border-radius: 4% 4% 4% 4%;display: none;background-image:url('D:/nianhui/num.png');width: 400px;height: 600px;position: relative;left: 300px;background-repeat: no-repeat;background-size: 100% 100%;"></div>
<div id="deskSpanDiv"style="display: none;background: url('D:/nianhui/num.png'); width: 400px; height: 600px; position: relative;top: -600px;left: 800px;background-size: cover;background-size: 100% 100%;background-repeat: no-repeat;"><span id="deskSpan"style="font-size: 180px;font-weight: bold;position: relative;left: 10px;top:180px;color: #FDF368;">🎉</span>
</div><video name="media" style="width: 20px; height: 20px; position: absolute;  left: 1900px;" controls autoplay loop><source src="file:///D:/nianhui/background.mp3" type="audio/mpeg">
</video>
</div><script>const allNumbers = Array.from({ length: 200 }, (_, i) => i + 5901); // 数字 5901-6100const drawnNumbers = new Set();const jixingNumber = getRandomNumbers(15);const fuNumber = getRandomNumbers(4);const hongNumber = getRandomNumbers(1);const oneArray = [];const twoArray = [];const hongArray = [];let chou = "ji";let currentStep = 0;let interval;let isRunning = false;//桌奖抽取var deskJPPoke = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];var deskNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];var deskNum1 = [11, 12];var deskNum2 = [13];var checkPokeIndex = -1;var pickPokeList = [];var isClick = true;function chongzhi(val) {if (chou == 'hong') {return}const modal = document.createElement('div');modal.style.position = 'fixed';modal.style.top = '50%';modal.style.left = '50%';modal.style.transform = 'translate(-50%, -50%)';modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';modal.style.color = '#fff';modal.style.padding = '20px';modal.style.borderRadius = '10px';modal.style.textAlign = 'center';modal.style.fontSize = '18px';modal.style.width = '400px';modal.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.3)';// 弹框内容modal.innerHTML = `<p>是否确认该数字重抽?</p><button id="confirmBtn" style="margin: 10px; padding: 8px 16px; font-size: 16px; border: none; border-radius: 5px; background: #28a745; color: white; cursor: pointer;">确认</button><button id="cancelBtn" style="margin: 10px; padding: 8px 16px; font-size: 16px; border: none; border-radius: 5px; background: #dc3545; color: white; cursor: pointer;">取消</button>
`;// 添加到页面document.body.appendChild(modal);// 添加事件监听器document.getElementById('confirmBtn').addEventListener('click', () => {const randomNumber = getRandomNumbers(1); // 生成随机数// alert(`新的随机数为: ${randomNumber}`);if (chou == 'ji') {let it = 'jixing' + oneArray.length;let its = "div" + valintervals = setInterval(() => anim(val), 50);setTimeout(() => {// 更新指定元素的文本内容clearInterval(intervals);document.getElementById(it).innerText = randomNumber; // 第一位数字document.getElementById(its).innerHTML = randomNumber;}, 2000); // 3秒后执行//写一个定时器 3s的} else if (chou == 'fu') {let it = 'fu' + twoArray.length;let its = "div" + valintervals = setInterval(() => anim(val), 50);setTimeout(() => {// 更新指定元素的文本内容clearInterval(intervals);document.getElementById(it).innerText = randomNumber; // 第一位数字document.getElementById(its).innerHTML = randomNumber;}, 2000); // 3秒后执行//写一个定时器 3s的}document.body.removeChild(modal); // 移除弹框});document.getElementById('cancelBtn').addEventListener('click', () => {// alert('操作已取消');document.body.removeChild(modal); // 移除弹框});}function anim(val) {const randomNumber1 = Math.floor(Math.random() * 201) + 5900;let consts = 'div' + valdocument.getElementById(consts).innerText = randomNumber1;}document.addEventListener('keydown', function (event) {console.log(event.key)if (event.key === 'Enter') {if (isClick) {btnStart();} else {btnStop();}isClick = !isClick;}if (event.key === 'b' || event.key === 'B') {checkPoke();}})function jixiang() {chou = "ji"// 在这里写一个很好看的弹框  alert('开始抽取吉祥如意')var modal = document.createElement('div');modal.style.position = 'fixed';modal.style.top = '50%';modal.style.left = '50%';modal.style.transform = 'translate(-50%, -50%)';modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';modal.style.color = '#fff';modal.style.padding = '20px';modal.style.borderRadius = '10px';modal.style.textAlign = 'center';modal.style.fontSize = '80px';modal.style.width = '700px';modal.style.height = '120px';modal.innerHTML = '开始抽取吉祥如意';// 在页面中添加弹框document.body.appendChild(modal);document.getElementById("div1").innerText = "🎉"; // 第一位数字document.getElementById("div2").innerText = "🎉"; // 第一位数字document.getElementById("div3").innerText = "🎉"; // 第一位数字document.getElementById("div4").innerText = "🎉"; // 第一位数字document.getElementById("div5").innerText = "🎉"; // 第一位数字document.getElementById("xianshi").innerText = '吉祥如意抽奖中...';const resultDivs = document.getElementById('mage-wrapper5'); // 获取要隐藏的块if (resultDivs) {resultDivs.style.display = 'block'; // 设置 display 为 none,隐藏块}const resultDivsDesk1 = document.getElementById('poke'); // 获取要隐藏的块if (resultDivsDesk1) {resultDivsDesk1.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDivsDesk2 = document.getElementById('deskSpanDiv'); // 获取要隐藏的块if (resultDivsDesk2) {resultDivsDesk2.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDivs2 = document.getElementById('mage-wrapper4'); // 获取要隐藏的块if (resultDivs2) {resultDivs2.style.display = 'block'; // 设置 display 为 none,隐藏块}const resultDivs3 = document.getElementById('mage-wrapper3'); // 获取要隐藏的块if (resultDivs3) {resultDivs3.style.display = 'block'; // 设置 display 为 none,隐藏块}const resultDivs4 = document.getElementById('mage-wrapper2'); // 获取要隐藏的块if (resultDivs4) {resultDivs4.style.display = 'block'; // 设置 display 为 none,隐藏块}const resultDivss = document.getElementById('mage-wrapper1'); // 获取要隐藏的块if (resultDivss) {resultDivss.style.display = 'block'; // 设置 display 为 none,隐藏块}const contaions = document.getElementById('containers'); // 获取要隐藏的块if (contaions) {contaions.style.maxWidth = '1600px'; // 设置 display 为 none,隐藏块}// 自动隐藏弹框,2秒后消失setTimeout(function () {document.body.removeChild(modal);}, 2000);}function fuixng() {chou = "fu"var modal = document.createElement('div');modal.style.position = 'fixed';modal.style.top = '50%';modal.style.left = '50%';modal.style.transform = 'translate(-50%, -50%)';modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';modal.style.color = '#fff';modal.style.padding = '20px';modal.style.borderRadius = '10px';modal.style.textAlign = 'center';modal.style.fontSize = '80px';modal.style.width = '700px';modal.style.height = '120px';modal.innerHTML = '开始抽取福星高照';// 在页面中添加弹框document.body.appendChild(modal);document.getElementById("div1").innerText = "🎉"; // 第一位数字document.getElementById("div2").innerText = "🎉"; // 第一位数字document.getElementById("div3").innerText = "🎉"; // 第一位数字document.getElementById("div4").innerText = "🎉"; // 第一位数字document.getElementById("div5").innerText = "🎉"; // 第一位数字const resultDiv = document.getElementById('mage-wrapper5'); // 获取要隐藏的块if (resultDiv) {resultDiv.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDivsDesk1 = document.getElementById('poke'); // 获取要隐藏的块if (resultDivsDesk1) {resultDivsDesk1.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDivsDesk2 = document.getElementById('deskSpanDiv'); // 获取要隐藏的块if (resultDivsDesk2) {resultDivsDesk2.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDive = document.getElementById('mage-wrapper1'); // 获取要隐藏的块if (resultDive) {resultDive.style.display = 'block'; // 设置 display 为 none,隐藏块}const contaions = document.getElementById('containers'); // 获取要隐藏的块if (contaions) {contaions.style.maxWidth = '1230px'; // 设置 display 为 none,隐藏块}document.getElementById("xianshi").innerText = '福星高照抽奖中...';// 自动隐藏弹框,2秒后消失setTimeout(function () {document.body.removeChild(modal);}, 2000);}function hongyun() {chou = "hong"var modal = document.createElement('div');modal.style.position = 'fixed';modal.style.top = '50%';modal.style.left = '50%';modal.style.transform = 'translate(-50%, -50%)';modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';modal.style.color = '#fff';modal.style.padding = '20px';modal.style.borderRadius = '10px';modal.style.textAlign = 'center';modal.style.fontSize = '80px';modal.style.width = '700px';modal.style.height = '120px';modal.innerHTML = '开始抽鸿运当头';document.getElementById("div1").innerText = "🎉"; // 第一位数字document.getElementById("div2").innerText = "🎉"; // 第一位数字document.getElementById("div3").innerText = "🎉"; // 第一位数字document.getElementById("div4").innerText = "🎉"; // 第一位数字document.getElementById("div5").innerText = "🎉"; // 第一位数字document.getElementById("xianshi").innerText = '鸿运当头抽奖中...';const resultDivs = document.getElementById('mage-wrapper5'); // 获取要隐藏的块if (resultDivs) {resultDivs.style.display = 'block'; // 设置 display 为 none,隐藏块}const resultDive = document.getElementById('mage-wrapper1'); // 获取要隐藏的块if (resultDive) {resultDive.style.display = 'none'; // 设置 display 为 none,隐藏块}const contaions = document.getElementById('containers'); // 获取要隐藏的块if (contaions) {contaions.style.maxWidth = '1230px'; // 设置 display 为 none,隐藏块}const resultDivsDesk1 = document.getElementById('poke'); // 获取要隐藏的块if (resultDivsDesk1) {resultDivsDesk1.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDivsDesk2 = document.getElementById('deskSpanDiv'); // 获取要隐藏的块if (resultDivsDesk2) {resultDivsDesk2.style.display = 'none'; // 设置 display 为 none,隐藏块}// 在页面中添加弹框document.body.appendChild(modal);// 自动隐藏弹框,2秒后消失setTimeout(function () {document.body.removeChild(modal);}, 2000);}function desk() {chou = 'desk';var modal = document.createElement('div');modal.style.position = 'fixed';modal.style.top = '50%';modal.style.left = '40%';modal.style.transform = 'translate(-50%, -50%)';modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';modal.style.color = '#fff';modal.style.padding = '20px';modal.style.borderRadius = '10px';modal.style.textAlign = 'center';modal.style.fontSize = '80px';modal.style.width = '700px';modal.style.height = '120px';modal.innerHTML = '开始抽取桌奖';document.getElementById("xianshi").innerText = '桌奖抽奖中...';const resultDivss = document.getElementById('mage-wrapper1'); // 获取要隐藏的块if (resultDivss) {resultDivss.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDivss1 = document.getElementById('mage-wrapper2'); // 获取要隐藏的块if (resultDivss1) {resultDivss1.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDivss2 = document.getElementById('mage-wrapper3'); // 获取要隐藏的块if (resultDivss2) {resultDivss2.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDivss3 = document.getElementById('mage-wrapper4'); // 获取要隐藏的块if (resultDivss3) {resultDivss3.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDivss4 = document.getElementById('mage-wrapper5'); // 获取要隐藏的块if (resultDivss4) {resultDivss4.style.display = 'none'; // 设置 display 为 none,隐藏块}const resultDivsDesk1 = document.getElementById('poke'); // 获取要隐藏的块if (resultDivsDesk1) {resultDivsDesk1.style.display = 'block'; // 设置 display 为 none,隐藏块}const resultDivsDesk2 = document.getElementById('deskSpanDiv'); // 获取要隐藏的块if (resultDivsDesk2) {resultDivsDesk2.style.display = 'block'; // 设置 display 为 none,隐藏块}}function getRandomNumbers(count) {const availableNumbers = allNumbers.filter(num => !drawnNumbers.has(num));const selectedNumbers = [];for (let i = 0; i < count; i++) {if (availableNumbers.length === 0) break;const randomIndex = Math.floor(Math.random() * availableNumbers.length);const number = availableNumbers.splice(randomIndex, 1)[0];selectedNumbers.push(number);drawnNumbers.add(number);}return selectedNumbers;}function btnStart() {if (chou == "ji" && oneArray.length == 5) {document.getElementById("div1").innerText = "🎉"; // 第一位数字document.getElementById("div2").innerText = "🎉"; // 第一位数字document.getElementById("div3").innerText = "🎉"; // 第一位数字document.getElementById("div4").innerText = "🎉"; // 第一位数字document.getElementById("div5").innerText = "🎉"; // 第一位数字}if (chou == 'ji' && oneArray.length == 10) {document.getElementById("div1").innerText = "🎉"; // 第一位数字document.getElementById("div2").innerText = "🎉"; // 第一位数字document.getElementById("div3").innerText = "🎉"; // 第一位数字document.getElementById("div4").innerText = "🎉"; // 第一位数字document.getElementById("div5").innerText = "🎉"; // 第一位数字}if (chou == 'ji' && oneArray.length >= 15) {var modal = document.createElement('div');modal.style.position = 'fixed';modal.style.top = '50%';modal.style.left = '50%';modal.style.width = '500px';modal.style.height = '140px';modal.style.transform = 'translate(-50%, -50%)';modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';modal.style.color = '#fff';modal.style.padding = '20px';modal.style.borderRadius = '10px';modal.style.textAlign = 'center';modal.style.fontSize = '80px';modal.innerHTML = '该奖项已抽完';// 在页面中添加弹框document.body.appendChild(modal);// 自动隐藏弹框,2秒后消失setTimeout(function () {document.body.removeChild(modal);}, 2000);return}if (chou == 'fu' && twoArray.length >= 4) {var modal = document.createElement('div');modal.style.position = 'fixed';modal.style.top = '50%';modal.style.left = '50%';modal.style.transform = 'translate(-50%, -50%)';modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';modal.style.color = '#fff';modal.style.padding = '20px';modal.style.width = '500px';modal.style.height = '140px';modal.style.borderRadius = '10px';modal.style.textAlign = 'center';modal.style.fontSize = '80px';modal.innerHTML = '该奖项已抽完';// 在页面中添加弹框document.body.appendChild(modal);// 自动隐藏弹框,2秒后消失setTimeout(function () {document.body.removeChild(modal);}, 2000);return}if (isRunning) return;isRunning = true;console.log("123");document.getElementById("startButton").disabled = true;document.getElementById("stopButton").disabled = false;interval = setInterval(animateNumbers, 50);}function btnStop() {clearInterval(interval);document.getElementById("stopButton").disabled = true;if (chou == 'ji') {console.log("JI");// 第一位数字if (oneArray.length >= 5 && oneArray.length < 10) {let consts = 'div' + (oneArray.length + 1 - 5)document.getElementById(consts).innerText = jixingNumber[oneArray.length];oneArray.push(document.getElementById(consts).innerText)} else if (oneArray.length >= 10 && oneArray.length < 15) {let consts = 'div' + (oneArray.length + 1 - 10)document.getElementById(consts).innerText = jixingNumber[oneArray.length];oneArray.push(document.getElementById(consts).innerText)}else {let consts = 'div' + (oneArray.length + 1)document.getElementById(consts).innerText = jixingNumber[oneArray.length];oneArray.push(document.getElementById(consts).innerText)}} else if (chou == 'fu') {// document.getElementById("div1").innerText = fuNumber[0]; // 第一位数字// document.getElementById("div2").innerText = fuNumber[1]; // 第二位数字let consts = 'div' + (twoArray.length + 1)document.getElementById(consts).innerText = fuNumber[twoArray.length]; // 第一位数字\twoArray.push(document.getElementById(consts).innerText)} else if (chou == 'hong') {let hoong1 = 'div' + (5 - hongArray.length)if (hongArray.length == 0) {document.getElementById(hoong1).innerText = hongNumber[0] % 10;; // 第一位数字hongArray.push('1')//   hongArray.push(document.getElementById(hoong1).innerText)} else if (hongArray.length == 1) {document.getElementById(hoong1).innerText = Math.floor((hongNumber[0] / 10) % 10); // 位数字hongArray.push('2')} else if (hongArray.length == 2) {document.getElementById(hoong1).innerText = Math.floor((hongNumber[0] / 100) % 10); // 第一位数字hongArray.push('3')} else if (hongArray.length == 3) {document.getElementById(hoong1).innerText = Math.floor((hongNumber[0] / 1000) % 10); // 第一位数字hongArray.push(document.getElementById(hoong1).innerText)let arr = 'hong'document.getElementById(arr).innerText = hongNumber[0];hongArray.push('4')}} else if (chou == 'desk') {isChoice++;

console.log(isChoice);
if (isChoice == 13) {
var modal = document.createElement(‘div’);
modal.style.position = ‘fixed’;
modal.style.top = ‘50%’;
modal.style.left = ‘50%’;
modal.style.transform = ‘translate(-50%, -50%)’;
modal.style.backgroundColor = ‘rgba(0, 0, 0, 0.8)’;
modal.style.color = ‘#fff’;
modal.style.padding = ‘20px’;
modal.style.borderRadius = ‘10px’;
modal.style.textAlign = ‘center’;
modal.style.fontSize = ‘80px’;
modal.style.width = ‘700px’;
modal.style.height = ‘120px’;
modal.innerHTML = ‘桌奖抽取已完成!!!谢谢支持!!’;

        // 在页面中添加弹框document.body.appendChild(modal);// 自动隐藏弹框,2秒后消失setTimeout(function () {document.body.removeChild(modal);}, 2000);} else {// console.log(JSON.stringify(checkPokeIndex), 9999)// console.log(JSON.stringify(pickPokeList),8888)if (pickPokeList.includes(checkPokeIndex)) {console.log("存在");} else {//   pickPokeList.push(checkPokeIndex);}//移除当前卡组pickPokeList.push(checkPokeIndex);if (checkPokeIndex <= 10) {const randomNum = deskNum[Math.floor(Math.random() * deskNum.length)];let dom = 'deskSpan';document.getElementById(dom).innerText = randomNum;deskNum = deskNum.filter(item => item != randomNum);// deskNum = deskNum} else if (checkPokeIndex > 10 && checkPokeIndex < 13) {const randomNum = deskNum1[Math.floor(Math.random() * deskNum1.length)];let dom = 'deskSpan';document.getElementById(dom).innerText = randomNum;deskNum1 = deskNum1.filter(item => item != randomNum);//  deskNum1 = deskNum1} else {const randomNum = deskNum2[Math.floor(Math.random() * deskNum2.length)];let dom = 'deskSpan';document.getElementById(dom).innerText = randomNum;deskNum2 = deskNum2.filter(item => item != randomNum);// deskNum2 = deskNum2;}deskJPPoke = deskJPPoke.filter(item => !pickPokeList.includes(item));}}revealResult();}
let isChoice=0;
let checkData=[];function checkPoke() {const randomNum = deskJPPoke[Math.floor(Math.random() * deskJPPoke.length)];let dom = 'poke';checkPokeIndex = randomNum;document.getElementById(dom).style.backgroundImage = 'url(D:/nianhui/poke/' + checkPokeIndex + '.jpg)';}function animateNumbers() {// 生成范围在 5900 到 6100 的随机数字const randomNumber1 = Math.floor(Math.random() * 201) + 5900; // 生成 5900 到 6100const randomNumber = Math.random() < 0.5 ? 5 : 6;const randomNumber6 = Math.floor(Math.random() * 9) + 1; // 1 到 9if (chou == "ji") {if (oneArray.length >= 5 && oneArray.length < 10) {let consts = 'div' + (oneArray.length + 1 - 5)document.getElementById(consts).innerText = randomNumber1;// return} else if (oneArray.length >= 10 && oneArray.length < 15) {let consts = 'div' + (oneArray.length + 1 - 10)document.getElementById(consts).innerText = randomNumber1;// return}else {let consts = 'div' + (oneArray.length + 1)document.getElementById(consts).innerText = randomNumber1; // 第一位数字}} else if (chou == "fu") {let constss = 'div' + (twoArray.length + 1)document.getElementById(constss).innerText = randomNumber1; // 第一位数字} else if (chou == "hong") {let hoong1 = 'div' + (5 - hongArray.length)if (hongArray.length == 3) {document.getElementById(hoong1).innerText = randomNumber; // 第一位数字} else {document.getElementById(hoong1).innerText = randomNumber6; // 第一位数字}} else if (chou == "desk") {const randomNum = Math.floor(Math.random() * 9) + 7;let dom = 'deskSpan';document.getElementById(dom).innerText = randomNum;}}function revealResult() {if (chou == "ji") {// if (oneArray.length > 5) {//     //   alert(1)//     return// }// alert(2)let arr = 'jixing' + (oneArray.length)document.getElementById(arr).innerText = jixingNumber[oneArray.length - 1];isRunning = false;document.getElementById("startButton").disabled = false;} else if (chou == "fu") {let arr = 'fu' + (twoArray.length)document.getElementById(arr).innerText = fuNumber[twoArray.length - 1];isRunning = false;document.getElementById("startButton").disabled = false;} else if (chou == "hong" && hongArray.length == 4) {isRunning = false;document.getElementById("startButton").disabled = false;} else {isRunning = false;document.getElementById("startButton").disabled = false;}}
</script>

相关文章:

年会抽奖Html

在这里插入图片描述 <!-- <video id"backgroundMusic" src"file:///D:/background.mp3" loop autoplay></video> --> <divstyle"width: 290px; height: 580px; margin-left: 20px; margin-top: 20px; background: url(D:/nianhu…...

(一)Ubuntu20.04版本的ROS环境配置与基本概述

前言 ROS不需要在特定的环境下进行安装&#xff0c;不管你是Ubuntu的什么版本或者还是虚拟机都可以按照教程进行安装。 1.安装ROS 一键安装ros及ros2 wget http://fishros.com/install -O fishros && . fishros 按照指示安装你想要的ros。 ros和ros2是可以兼容的…...

深入分析线程安全问题的本质

深入分析线程安全问题的本质 1. 并发编程背后的性能博弈2. 什么是线程安全问题&#xff1f;3. 源头之一&#xff1a;原子性问题3.1. 原子性问题示例3.2. 原子性问题分析3.3. 如何解决原子性问题&#xff1f; 4. 源头之二&#xff1a;可见性问题4.1. 为什么会有可见性问题&#…...

58. Three.js案例-创建一个带有红蓝配置的半球光源的场景

58. Three.js案例-创建一个带有红蓝配置的半球光源的场景 实现效果 本案例展示了如何使用Three.js创建一个带有红蓝配置的半球光源的场景&#xff0c;并在其中添加一个旋转的球体。通过设置不同的光照参数&#xff0c;可以观察到球体表面材质的变化。 知识点 WebGLRenderer …...

插入实体自增主键太长,mybatis-plaus自增主键

1、问题 spring-boot整合mybtais执行insert语句时&#xff0c;主键id为长文本数据。 2、分析问题 1)数据库主键是否自增 2&#xff09;数据库主键的种子值设置的多少 3、解决问题 1&#xff09;数据库主键设置的时自增 3&#xff09;种子值是1 所以排查是数据库的问题 4、继…...

【利用 Unity + Mirror 网络框架、Node.js 后端和 MySQL 数据库】

要实现一个简单的1v1战斗小游戏&#xff0c;利用 Unity Mirror 网络框架、Node.js 后端和 MySQL 数据库&#xff0c;我们可以将其分为几个主要部分&#xff1a;客户端&#xff08;Unity&#xff09;、服务器&#xff08;Node.js&#xff09;和数据库&#xff08;MySQL&#xf…...

https原理

一、基本概念 1、https概念 https&#xff08;全称&#xff1a; Hypertext Transfer Protocol Secure&#xff0c;超文本传输安全协议&#xff09;&#xff0c;是以安全为目标的http通道&#xff0c;简单讲是http的安全版。 2、为啥说http协议不安全呢&#xff1f; 我们用h…...

如何处理京东商品详情接口返回的JSON数据中的缺失值?

1.在 Python 中处理缺失值 使用if - else语句进行检查和处理 假设通过requests库获取了接口返回的 JSON 数据&#xff0c;并使用json模块进行解析&#xff0c;存储在data变量中。 import json import requestsurl "YOUR_API_URL" response requests.get(url) dat…...

window对象

bom dom部分学完了&#xff0c;来看看bom吧~ bom是整个浏览器&#xff0c;本质上bom与dom是包含的关系&#xff0c;window是里面最大的对象 调用的方法默认对象是window&#xff0c;一般都会省略前面的window 创建的全局变量也是属于window的&#xff0c;当然window也可以省…...

(五)ROS通信编程——参数服务器

前言 参数服务器在ROS中主要用于实现不同节点之间的数据共享&#xff08;P2P&#xff09;。参数服务器相当于是独立于所有节点的一个公共容器&#xff0c;可以将数据存储在该容器中&#xff0c;被不同的节点调用&#xff0c;当然不同的节点也可以往其中存储数据&#xff0c;关…...

MySQL常用命令之汇总(Summary of Commonly Used Commands in MySQL)

MySQL常用命令汇总 简介 ‌MySQL是一个广泛使用的开源关系型数据库管理系统&#xff0c;由瑞典的MySQL AB公司开发&#xff0c;现属于Oracle公司。‌ MySQL支持SQL&#xff08;结构化查询语言&#xff09;&#xff0c;这是数据库操作的标准语言&#xff0c;用户可以使用SQL进…...

更新至2023年,各省数字经济变量/各省数字经济相关指标数据集(20个指标)

更新至2023年&#xff0c;各省数字经济相关指标数据集&#xff08;20个指标&#xff09; 1、时间&#xff1a;更新至2023年&#xff0c;具体时间如下 2、指标&#xff1a;互联网宽带接入端口(万个)&#xff08;2006-2023&#xff09;、互联网宽带接入用户(万户)&#xff08;2…...

聚类系列 (二)——HDBSCAN算法详解

在进行组会汇报的时候&#xff0c;为了引出本研究动机&#xff08;论文尚未发表&#xff0c;暂不介绍&#xff09;&#xff0c;需要对DBSCAN、OPTICS、和HDBSCAN算法等进行详细介绍。在查询相关资料的时候&#xff0c;发现网络上对于DBSCAN算法的介绍非常多与细致&#xff0c;但…...

【JavaEE】—— SpringBoot项目集成百度千帆AI大模型(对话Chat V2)

本篇文章在SpringBoot项目中集成百度千帆提供的大模型接口实现Chat问答效果&#xff1a; 一、百度智能云 百度千帆大模型平台是百度智能云推出的一个企业级一站式大模型与AI原生应用开发及服务平台。 注册地址&#xff1a;https://qianfan.cloud.baidu.com/ 注册成功后&…...

一种更激进的Hook实现方案猜想

XXX原创不原创不清楚&#xff0c;暂定为原创。毕竟windows 大神很多XXX 昨天才发现不是原创&#xff0c;这种方案是VEH HOOK的一种实现方案。VEH HOOK很久很久以前都被广泛使用了。只是自己没听说过。好悲哀呀。。。。 激进的猜想&#xff1a; 如果VEH HOOK在内核态处理异常…...

HTML5实现好看的端午节网页源码

HTML5实现好看的端午节网页源码 前言一、设计来源1.1 网站首页界面1.2 登录注册界面1.3 端午节由来界面1.4 端午节习俗界面1.5 端午节文化界面1.6 端午节美食界面1.7 端午节故事界面1.8 端午节民谣界面1.9 联系我们界面 二、效果和源码2.1 动态效果2.2 源代码 源码下载结束语 H…...

微信小程序获取图片使用session(上篇)

概述&#xff1a; 我们开发微信小程序&#xff0c;从后台获取图片现实的时候&#xff0c;通常采用http get的方式&#xff0c;例如以下代码 <image class"user_logo" src"{{logoUrl}}"></image>变量logoUrl为ur图片l的请求地址 但是对于很多…...

RT-DETR融合YOLOv9的下采样模块ADown

RT-DETR使用教程&#xff1a; RT-DETR使用教程 RT-DETR改进汇总贴&#xff1a;RT-DETR更新汇总贴 《YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/abs/2402.13616 代码链接&…...

【机器学习案列】学生抑郁可视化及预测分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

CES 2025|美格智能高算力AI模组助力“通天晓”人形机器人震撼发布

当地时间1月7日&#xff0c;2025年国际消费电子展&#xff08;CES 2025&#xff09;在美国拉斯维加斯正式开幕。美格智能合作伙伴阿加犀联合高通在展会上面向全球重磅发布人形机器人原型机——通天晓&#xff08;Ultra Magnus&#xff09;。该人形机器人内置美格智能基于高通QC…...

Linux第一个系统程序---进度条

进度条---命令行版本 回车换行 其实本质上回车和换行是不同概念&#xff0c;我们用一张图来简单的理解一下&#xff1a; 在计算机语言当中&#xff1a; 换行符&#xff1a;\n 回车符&#xff1a;\r \r\n&#xff1a;回车换行 这时候有人可能会有疑问&#xff1a;我在学习C…...

黑马跟学.苍穹外卖.Day04

黑马跟学.苍穹外卖.Day04 苍穹外卖-day04课程内容1. Redis入门1.1 Redis简介1.2 Redis下载与安装1.2.1 Redis下载1.2.2 Redis安装 1.3 Redis服务启动与停止1.3.1 服务启动命令1.3.2 客户端连接命令1.3.3 修改Redis配置文件1.3.4 Redis客户端图形工具 2. Redis数据类型2.1 五种常…...

人生第一次面试之依托答辩

今天收到人生的第一场面试&#xff0c;是东华软件集团。答的那是依托答辩&#xff0c;就面了20分钟&#xff0c;还没考算法。其实依托答辩的效果是意料之中的&#xff0c;这次面试也只是想练练手。 目录 静态变量什么时候加载的&#xff1f; 重写和重载有什么区别&#xff1…...

STM32 : PWM 基本结构

这张图展示了PWM&#xff08;脉冲宽度调制&#xff09;的基本结构和工作流程。PWM是一种用于控制功率转换器输出电压的技术&#xff0c;通过调整信号的占空比来实现对负载的精确控制。以下是详细讲解&#xff1a; PWM 基本结构 1. 时基单元 ARR (Auto-reload register): 自动…...

【大模型(LLM)面试全解】深度解析 Layer Normalization 的原理、变体及实际应用

系列文章目录 大模型&#xff08;LLMs&#xff09;基础面 01-大模型&#xff08;LLM&#xff09;面试全解&#xff1a;主流架构、训练目标、涌现能力全面解析 02-【大模型&#xff08;LLM&#xff09;面试全解】深度解析 Layer Normalization 的原理、变体及实际应用 大模型&…...

《浮岛风云》V1.0中文学习版

《浮岛风云》中文版https://pan.xunlei.com/s/VODadt0vSGdbrVOBEsW9Xx8iA1?pwdy7c3# 一款有着类似暗黑破坏神的战斗系统、类似最终幻想的奇幻世界和100%可破坏体素环境的动作冒险RPG。...

学习threejs,导入babylon格式的模型

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.BabylonLoader babyl…...

Django 社团管理系统的设计与实现

标题:Django 社团管理系统的设计与实现 内容:1.摘要 本文介绍了 Django 社团管理系统的设计与实现。通过分析社团管理的需求&#xff0c;设计了系统的架构和功能模块&#xff0c;并使用 Django 框架进行了实现。系统包括社团信息管理、成员管理、活动管理、财务管理等功能&…...

2025 GitCode 开发者冬日嘉年华:AI 与开源的深度交融之旅

在科技的浪潮中&#xff0c;AI 技术与开源探索的火花不断碰撞&#xff0c;催生出无限可能。2025 年 1 月 4 日&#xff0c;由 GitCode 联合 CSDN COC 城市开发者社区精心打造的开年首场开发者活动&#xff1a;冬日嘉年华在北京中关村 • 鼎好 DH3-A 座 22 层盛大举行&#xff0…...

嵌入式系统 tensorflow

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 探索嵌入式系统中的 TensorFlow&#xff1a;机遇与挑战一、TensorFlow 适配嵌入式的优势二、面临的硬件瓶颈三、软件优化策略四、实…...

Web无障碍

文章目录 &#x1f7e2;Web Accessibility-Web无障碍&#x1f7e2;一、Web Accessibility-Web1. web无障碍设计2. demo3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢) 如有其他更好方案&#xff0c;可以私信我哦✒️总结 &#x1f7e2;Web Accessibility-Web无障碍…...

Qt使用MySQL数据库(Win)----2.配置MySQL驱动

使用Everything软件&#xff0c;找到mysql.pro文件。并使用qt creator打开mysql.pro。 导入外部库 选择外部库 点击下一步&#xff0c;勾选。 为debug版本添加‘d’作为后缀取消勾选&#xff0c;然后点击下一步 添加后的Pro文件。 这样文件应该是改好了&#xff0c;选择releas…...

记录一下vue2项目优化,虚拟列表vue-virtual-scroll-list处理10万条数据

文章目录 封装BrandPickerVirtual.vue组件页面使用组件属性 select下拉接口一次性返回10万条数据&#xff0c;页面卡死&#xff0c;如何优化&#xff1f;&#xff1f;这里使用 分页 虚拟列表&#xff08;vue-virtual-scroll-list&#xff09;&#xff0c;去模拟一个下拉的内容…...

java 中 main 方法使用 KafkaConsumer 拉取 kafka 消息如何禁止输出 debug 日志

pom 依赖&#xff1a; <dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactId><version>2.5.14.RELEASE</version> </dependency> 或者 <dependency><groupId>org.ap…...

前端性能优化全攻略:加速网页加载,提升用户体验

前端性能优化全攻略&#xff1a;加速网页加载&#xff0c;提升用户体验 在当今互联网时代&#xff0c;用户对于网页的加载速度和性能要求越来越高。一个快速响应、流畅加载的网页能够极大地提升用户体验&#xff0c;增加用户留存率和满意度。前端性能优化是实现这一目标的关键…...

关于内网外网,ABC类地址,子网掩码划分

本文的三个关键字是&#xff1a;内网外网&#xff0c;ABC类地址&#xff0c;子网掩码划分。围绕以下问题展开&#xff1a; 如何从ip区分外网、内网&#xff1f;win和linux系统中&#xff0c;如何查询自己的内网ip和外网ip。开发视角看内外网更多是处于安全考虑&#xff0c;接口…...

【C++多线程编程:六种锁】

目录 普通互斥锁&#xff1a; 轻量级锁 独占锁&#xff1a; std::lock_guard&#xff1a; std::unique_lock: 共享锁&#xff1a; 超时的互斥锁 递归锁 普通互斥锁&#xff1a; std::mutex确保任意时刻只有一个线程可以访问共享资源&#xff0c;在多线程中常用于保…...

【LeetCode】力扣刷题热题100道(16-20题)附源码 容器 子数组 数组 连续序列 三数之和(C++)

目录 1.盛最多水的容器 2.和为K的子数组 3.最大子数组和 4.最长连续序列 5.三数之和 1.盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴…...

WHAT - devicePixelRatio 与像素分辨率

目录 语法理解 devicePixelRatio常见值应用场景注意事项在高分辨率屏幕下的视觉效果 devicePixelRatio 是一个浏览器属性&#xff0c;用来表示设备的物理像素与 CSS 像素之间的比例。它是屏幕显示清晰度的重要指标&#xff0c;特别是在高分辨率屏幕&#xff08;如 Retina 显示屏…...

【cs.CV】25.1.8 arxiv更新速递

—第1篇---- ===== ConceptMaster: 面向扩散Transformer模型的多概念视频定制,无需测试时调优 🔍 关键词: 文本到视频生成, 扩散模型, 多概念定制, 身份解耦 链接1 摘要: 文本到视频生成通过扩散模型取得了显著进展。然而,多概念视频定制(MCVC)仍然是一个重大挑战。…...

C#使用MVC框架创建WebApi服务接口

第一步,使用VS2019新建MVC-Web API应用程序 创建BridgeApi 第二步,运行将生成默认的示例网页,网页Url为 https://localhost:44361/home/index 右键 项目 添加 WebAPI控制器类 添加 我们可以看到App_Start目录下 有三个文件: BundleConfig.cs代表 捆绑文件的引用 有脚本文件…...

慧集通(DataLinkX)iPaaS集成平台-智能体(Agent)API

功能简介&#xff1a; 该功能下主要是用来管理集成平台对外开放接口得管控以及调用日志信息得查看操作&#xff0c;并支持日志得重放等操作&#xff1b;注&#xff1a;所有触发类单据得日志也可以在此查看(如使用数据触发组件自动触发流程得日志信息) 1.第三方调用接口类日志查…...

BigDecimal:高精度数值运算类

介绍&#xff1a; BigDecimal是一个用于高精度数值运算的类&#xff0c;它比基本的double或float类型更精确&#xff0c;非常适合需要精确计算的场景&#xff0c;如金融计算、科学计算等&#xff0c;因为这些领域对数值精度要求非常高&#xff0c;不能容忍浮点运算带来的误差。…...

11. C 语言 作用域与变量使用技巧

本章目录: 前言一、作用域的分类局部变量示例&#xff1a; 全局变量示例&#xff1a;示例&#xff1a; 形式参数示例&#xff1a; 二、作用域的细节与常见误区块级作用域示例&#xff1a; 静态变量与全局变量的对比示例&#xff1a; 未初始化变量的影响示例&#xff1a; 三、实…...

大模型WebUI:Gradio全解11——Chatbots:融合大模型的多模态聊天机器人(2)

大模型WebUI&#xff1a;Gradio全解11——Chatbots&#xff1a;融合大模型的聊天机器人&#xff08;2&#xff09; 前言本篇摘要11. Chatbot&#xff1a;融合大模型的多模态聊天机器人11.2 使用流行的LLM库和API11.2.1 Llama Index11.2.2 LangChain11.2.3 OpenAI1. 基本用法2. …...

课题推荐——基于GPS的无人机自主着陆系统设计

关于“基于GPS的无人机自主着陆系统设计”的详细展开&#xff0c;包括项目背景、具体内容、实施步骤和创新点。如需帮助&#xff0c;或有导航、定位滤波相关的代码定制需求&#xff0c;请点击文末卡片联系作者 文章目录 项目背景具体内容实施步骤相关例程MATLAB例程python例程 …...

HQChart使用教程30-K线图如何对接第3方数据44-DRAWPIE数据结构

HQChart使用教程30-K线图如何对接第3方数据44-DRAWPIE数据结构 效果图DRAWPIEHQChart代码地址后台数据对接说明示例数据数据结构说明效果图 DRAWPIE DRAWPIE是hqchart插件独有的绘制饼图函数,可以通过麦语法脚本来绘制一个简单的饼图数据。 饼图显示的位置固定在右上角。 下…...

张朝阳惊现CES展,为中国品牌 “代言”的同时,或将布局搜狐新战略!

每年年初&#xff0c;科技圈的目光都会聚焦在美国拉斯维加斯&#xff0c;因为这里将上演一场被誉为 “科技春晚” 的年度大戏 ——CES 国际消费电子展。作为全球规模最大、最具影响力的科技展会之一&#xff0c;CES 吸引了来自 160 多个国家的创新者和行业领导者&#xff0c;是…...

堆排序+选择排序详解

目录 1.选择排序的定义 2.选择排序的优缺点 2.1优点 2.2缺点 3.思考 4.优化后的选择排序的实现 5.选择排序的代码 6.堆排序 7.向上/向下调整算法 8. 向下向上调整代码 9.堆排序代码 1.选择排序的定义 选择排序(SelectSort)&#xff0c;以第一个为开始值&#xff0c…...

【Arthas命令实践】heapdump实现原理

&#x1f3ae; 作者主页&#xff1a;点击 &#x1f381; 完整专栏和代码&#xff1a;点击 &#x1f3e1; 博客主页&#xff1a;点击 文章目录 使用原理 使用 dump java heap, 类似 jmap 命令的 heap dump 功能。 【dump 到指定文件】 heapdump arthas-output/dump.hprof【只 …...