欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JavaScript實(shí)現(xiàn)九宮格抽獎

 更新時間：2022年06月28日 15:25:07   作者：好先  
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)九宮格抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)九宮格抽獎 的具體代碼，供大家參考，具體內(nèi)容如下

思路：通過移動背景顏色實(shí)現(xiàn)中獎信息，每一個方形元素，需要按順序排列，加個延時器，當(dāng)?shù)阶詈笠粋€的時候讓它從0開始就可以動起來了，?。?/p> 

<!DOCTYPE html>
<html lang="en">

<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? #box {
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? height: 600px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? position: relative;
? ? ? ? }

? ? ? ? #box div {
? ? ? ? ? ? width: 198px;
? ? ? ? ? ? height: 198px;
? ? ? ? ? ? border-radius: 10px;
? ? ? ? ? ? /* border: 1px solid red; */
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 198px;
? ? ? ? ? ? background-color: #ffe8e8;
? ? ? ? ? ? position: absolute;
? ? ? ? }

? ? ? ? .btns {
? ? ? ? ? ? text-align: center;
? ? ? ? }

? ? ? ? .active {
? ? ? ? ? ? background-color: rgb(255, 94, 0) !important;
? ? ? ? }
? ? ? ? #start,#end{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background-color: rgb(24, 105, 255);
? ? ? ? ? ? color: white;
? ? ? ? }
? ? </style>
</head>

<body>
? ? <div id="box"></div>
? ? <br>
? ? <div class="btns">
? ? ? ? <button id="start">開始</button>
? ? ? ? <button id="end">停止</button>
? ? </div>

? ? <script>
? ? ? ? var box = document.getElementById('box');
? ? ? ? var start = document.getElementById('start');
? ? ? ? var end = document.getElementById('end');
? ? ? ? // 所有獎品
? ? ? ? var allList = ['宇宙戰(zhàn)將', '白起', '太陽系級宇宙戰(zhàn)艦', '小破木船', '地球級宇宙戰(zhàn)將', '月球級蘸醬', '太陽級蘸醬', '大西洋級蘸醬'];
? ? ? ? // 允許抽中的獎品
? ? ? ? var list = ['太陽系級宇宙戰(zhàn)艦','白起']; // 想要中的獎品放進(jìn)去

? ? ? ? for (let i = 0; i < allList.length; i++) {
? ? ? ? ? ? box.innerHTML += `<div>${allList[i]}</div>`;
? ? ? ? }

? ? ? ? box.children[1].style.left = '200px';
? ? ? ? box.children[2].style.left = '400px';
? ? ? ? box.children[3].style.left = '400px';
? ? ? ? box.children[3].style.top ?= '200px';
? ? ? ? box.children[4].style.left = '400px';
? ? ? ? box.children[4].style.top ?= '400px';
? ? ? ? box.children[5].style.top ?= '400px';
? ? ? ? box.children[5].style.left = '200px';
? ? ? ? box.children[6].style.top ?= '400px';
? ? ? ? box.children[7].style.top ?= '200px';

? ? ? ? var running = false;
? ? ? ? var flag = true;
? ? ? ? var active = 0;
? ? ? ? var time = 200;
? ? ? ? var goods = '';
? ? ? ? box.children[active].className = 'active';

? ? ? ? start.onclick = function () {
? ? ? ? ? ? if (!running) { ?// 只有當(dāng)沒有在抽獎中的時候，才讓點(diǎn)擊開始
? ? ? ? ? ? ? ? running = true; ?// 重置
? ? ? ? ? ? ? ? time = 200; ?// 重置
? ? ? ? ? ? ? ? f1();
? ? ? ? ? ? }
? ? ? ? }
??
? ? ? ? end.onclick = function () {
? ? ? ? ? ? if (running) { // 只有當(dāng)正在抽獎中的時候才讓點(diǎn)擊停止
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? goods = list[Math.floor(Math.random() * list.length)]; ?// 0, 1, 2隨機(jī)的一個值
? ? ? ? ? ? }
? ? ? ? }

? ? ? ? // 如果使用定時器，time會鎖死不會改變；通過延時器模擬定時器的方法，是可以改變定時的時間
? ? ? ? function f1() {
? ? ? ? ? ? box.children[active].className = '';
? ? ? ? ? ? active++;
? ? ? ? ? ? if (active > 7){ ?// 因?yàn)槭菑?開始計算所以寫7
? ? ? ? ? ? ? ? active = 0;
? ? ? ? ? ? }
? ? ? ? ? ? box.children[active].className = 'active';
? ? ? ? ? ? if (flag) { // 抽獎速度越來越快
? ? ? ? ? ? ? ? time -= 10;
? ? ? ? ? ? ? ? if (time < 50) {
? ? ? ? ? ? ? ? ? ? time = 50;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? } else { // 抽獎速度越來越慢
? ? ? ? ? ? ? ? time += 10;
? ? ? ? ? ? ? ? if (time > 300) {
? ? ? ? ? ? ? ? ? ? time = 300;

? ? ? ? ? ? ? ? ? ? // 判斷當(dāng)前滾動到的獎品是否是內(nèi)定的獎品
? ? ? ? ? ? ? ? ? ? if (box.children[active].textContent === goods ) {
? ? ? ? ? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? ? ? ? ? ? ? running = false;
? ? ? ? ? ? ? ? ? ? ? ? ?setTimeout(() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alert(goods); // 彈出抽獎信息
? ? ? ? ? ? ? ? ? ? ? ? ?}, 500);
? ? ? ? ? ? ? ? ? ? ? ? return; ?// 抽中獎品后，停止抽獎

? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? setTimeout(f1,time);
? ? ? ? }
? ? </script>
</body>

</html>

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

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能

    微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能，利用小程序事件處理的api，分別讀取觸摸開始，觸摸移動時，觸摸結(jié)束的X/Y坐標(biāo)，根據(jù)差值來改變整個卡片的位置，具體實(shí)例代碼跟隨小編一起看看吧
    2019-12-12
  • APP中javascript+css3實(shí)現(xiàn)下拉刷新效果

    APP中javascript+css3實(shí)現(xiàn)下拉刷新效果

    本文給大家分享的是如何在APP中使用javascript結(jié)合CSS3實(shí)現(xiàn)下拉刷新特效的代碼，非常的簡單實(shí)用，有需要的小伙伴可以參考下。
    2016-01-01

    • 最新評論