威力彩

威力彩

by Chris_Walter

HTML

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <body>
    <div class="wrap">
        <div class="main">
            <ul class="firstregion">
                <p class="firstregionAlert">第一區 尚餘<span>6</span>個未選</p>
                <p>第一區</p>
                <li>
                    <button type="button"  class="btn btn-outline-dark">01</button>
                    <button type="button"  class="btn btn-outline-dark">02</button>
                    <button type="button"  class="btn btn-outline-dark">03</button>
                    <button type="button"  class="btn btn-outline-dark">04</button>
                    <button type="button"  class="btn btn-outline-dark">05</button>
                </li>
                <li>
                    <button type="button" class="btn btn-outline-dark">06</button>
                    <button type="button" class="btn btn-outline-dark">07</button>
                    <button type="button" class="btn btn-outline-dark">08</button>
                    <button type="button" class="btn btn-outline-dark">09</button>
                    <button type="button" class="btn btn-outline-dark">10</button>
                </li>
                <li>
                    <button type="button" class="btn btn-outline-dark">11</button>
                    <button type="button" class="btn btn-outline-dark">12</button>
                    <button type="button" class="btn btn-outline-dark">13</button>
                    <button type="button" class="btn btn-outline-dark">14</button>
                    <button type="button" class="btn btn-outline-dark">15</button>
                </li>
                <li>
      ...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.wrap{
	max-width: 960px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
}

.wrap button {
	margin-bottom: 4px;
}

.wrap p{
	margin: 10px 0px;
}

.main{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.result{
	margin: 50px 0px;
	flex-direction: column;
	align-items: center;
} 


footer{
	margin: 20px 0px;
}


footer input{
	margin: 0px 10px;
}


.prize {
	font-weight: bold;
	padding: 10px;
	animation: fadeIn 5s; /*動畫名稱 時間 速度曲線 延遲開始的時間 重複次數*/
  }
  
  @keyframes fadeIn {
	0% {
	  opacity: 0;
	}
	100% {
		opacity: 100;
	}
  }

JavaScript

/*
const random = () => {
  let winningNumbers = [];
  let first = null;
  let second = Math.floor(Math.random() * 8) + 1; // 01~08
  for (let i = 1; i <= 6; i++) {
    first = Math.floor(Math.random() * 38) + 1;
    if (winningNumbers.includes(`${first}`)) {
      //console.log(i);
      i -= 1;
      continue;
    }
    winningNumbers.push(`${first}`);
  }
  winningNumbers.push(`${second}`);
  //console.log(winningNumbers);
  if (winningNumbers.length === 7) {
    //console.log(winningNumbers);
    return winningNumbers;
  }
};

const registerIdAndEventListener = () => {
  //按鈕dataset
  let resultsOfTheFirstRegion = []; //客戶所選的號碼會存在這個陣列裡面
  let resultsOfTheSecondRegion = [];
  const firstregionAlert = document.querySelector('.firstregionAlert > span');
  const secondregionAlert = document.querySelector('.secondregionAlert > span');
  const firstregion = document.querySelectorAll('.firstregion .btn'); //選取第一區的按鈕，選取之後會回傳一個陣列，裡面包含我們每一個按鈕
  const secondregion = document.querySelectorAll('.secondregion .btn');
  const SubmitBtn = document.querySelector('footer .btn-primary');
  const quickPickBtn = document.querySelector('footer .btn-danger');
  const clear = document.querySelector('footer .btn-success');
  const pickAgain = document.querySelector('.result > button');
  const main = document.querySelector('.main');
  const result = document.querySelector('.result');
  const prize = document.querySelector('.prize > span');
  const firstregionBtnNum = firstregion.length; //第一區按鈕總數量
  const secondregionBtnNum = secondregion.length;

  let quickPickArr = [];
  let quickPickOfTheSecondRegion = null;
  let quickPickOfTheFirstRegion = null;

  //電腦選號
  quickPickBtn.addEventListener('click', function (e) {
    //重複按下電腦選號時，要把上次禁用狀態的按鈕給恢復成非禁用狀態
    if (quickPickArr.length >= 1) {
      for (let i = 1; i <= firstregionBtnNum; i++) {
        firstregion[i - 1].removeAttribute('disabled');
        if (quickPickOfTheFirstRegion.includes(`${i}`)) {
          firstregion[i -...