如何使用 javascript 创建体育投注计算器

Question

我使用 JavaScript 创建了这个简单的直接投注计算器。它允许我计算，如果它是一张中奖彩票，将支付多少。

它是如何工作的？首先，我将输入 moneyLine 号码，它几乎可以是任何 3 位数字，然后我输入投注金额。

现在，moneyLine 可以是负数 (-)（如果投注热门）或正数（+）（如果投注失败者）。

请看下面的代码：对于测试建议，我使用任何 -110 或 110，然后使用任何投注金额。但它实际上可以是任何选择的 moneyLine 和 betAmount。

// Single Straight Sports Bet Calculator 

function betCalculator(moneyLine) { 

    var odds;
    var betAmount = +prompt("Enter Bet Amount"); 

    if (moneyLine >= 0) { 
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 

    } else  {
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 


    } return ((odds * betAmount).toFixed(2)); 
}
 alert(betCalculator(+prompt("Enter Money Line")));

// Single Straight Sports Bet Calculator 

function betCalculator(moneyLine) { 
    
    var odds;
    var betAmount = +prompt("Enter Bet Amount"); 
    
    if (moneyLine >= 0) { 
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 
    
    } else  {
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 
    

    } return ((odds * betAmount).toFixed(2)); 
}
 alert(betCalculator(+prompt("Enter Money Line")));

这就是我想要完成的。我的愿望是创建一个 Parlay 计算器，使用上述公式，这将允许我输入一个投注金额和几条输钱线，而不仅仅是一条。

连赢投注是将两个或多个单独的投注链接在一起以获得高额赔付的单一投注。因此，一张过关彩券上可以有两支或更多支队伍。

我还想做的是能够在表单而不是弹出窗口中输入这些数字（moneyLine 和 betAmount）window。

我试过自己做，但没有用。不知何故，它没有显示结果。

// True Odds Parlay Bets
  
const myForm= document.getElementById("my-form")

var odds;
var moneyLine

  , trueOdds=
      { 'moneyLine1 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine2 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine3 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine4 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine5 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine6 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine7 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine8 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine9 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      };
myForm.onsubmit = e=>e.preventDefault();  // disable form submit
myForm.oninput = betCalculator;

function betCalculator() {
    let bet  = myForm.betAmount.valueAsNumber, odds = trueOdds[(myForm.moneyLine1.value + '_' + myForm.moneyLine2.value + '_' + myForm.moneyLine3.value + '_' + myForm.moneyLine4.value + '_' + myForm.moneyLine5.value + '_' + myForm.moneyLine6.value + '_' + myForm.moneyLine7.value + '_' + myForm.moneyLine8.value + '_' + myForm.moneyLine9.value)];

 

// This code is used to get rid of "NaN"
if ( isNaN(bet) || isNaN(odds) ) {
  return 0;
}

myForm.result.value = '" ' + '$ '+(odds * bet).toFixed(2) + ' "'
}
betCalculator()

fieldset { margin-top: 1em;}
 label { display: inline-block; width: 6em; }
 input[type="radio"] {
   -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
   -moz-appearance: checkbox;    /* Firefox */
   -ms-appearance: checkbox;
   }

<head>
<title>True Odds Parlay Bet Calculator</title>
<link rel="stylesheet" type="text/css" href="trueoddstyle.css">


</head>
<body>

<h2>True Odds Parlay Bet Calculator</h2>

<p>
  Useful for both <b>Negative "-"</b> and/or <b>Positive "+"</b> Money Lines including Single Straight Bets!
</p>

<form action="" id="my-form">
  
  <fieldset>
    <legend>Bet Amount :</legend>
    <input type="number" name="betAmount" step=any min=0>
  </fieldset>
  <fieldset>
    <legend>Team Respective Money Line :</legend>
    <input type="number" name="moneyLine1" step=any min=0>
    <input type="number" name="moneyLine2" step=any min=0>
    <input type="number" name="moneyLine3" step=any min=0>
    <input type="number" name="moneyLine4" step=any min=0>
    <input type="number" name="moneyLine5" step=any min=0>
    <input type="number" name="moneyLine6" step=any min=0>
    <input type="number" name="moneyLine7" step=any min=0>
    <input type="number" name="moneyLine8" step=any min=0>
    <input type="number" name="moneyLine9" step=any min=0>
  </fieldset>
  <fieldset>
    <legend>Payout :</legend>
    <output name="result" value=''></output>

    <br><br>
    <input type="reset" value="Reset Calculator!"</input>
  </fieldset>
</form>


</body>

详情请看代码片段。非常感谢您的帮助。

Answer 1

修改了第一个版本:)

const bt_Nwline = document.getElementById('New-Line')
  ,   xForm     = document.getElementById('form-X')
  ,   wTable    = xForm.querySelector('table')
  ,   baseLine  = wTable.querySelector('thead tr:nth-of-type(3)')
  ,   tBody     = wTable.querySelector('tbody')
  ,   tPayout   = wTable.querySelector('tfoot td:nth-of-type(2)')
  ;
xForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ;
xForm.onreset =_=>{ tPayout.textContent = '0.00' }
  ;
function betCalculator()
  {
  let bet  = xForm.betAmount.valueAsNumber || 0
    , odds = [...tBody.querySelectorAll('input')]
              .filter(ml=>!isNaN(ml.valueAsNumber) )
              .reduce((odd,ml)=> odd *= ml.valueAsNumber >= 0
                                      ? (ml.valueAsNumber /100) +1
                                      : (100 / Math.abs(ml.valueAsNumber)) +1
                    ,1)
  tPayout.textContent = ((odds *bet).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g,',')
  }
betCalculator()
  ;
bt_Nwline.onclick=_=>
  {
  tBody.appendChild( baseLine.cloneNode(true)) 
  }
tBody.onclick=e=>
  {
  if (!e.target.matches('button')) return
  wTable.deleteRow(e.target.closest('tr').rowIndex)
  betCalculator()
  }
xForm.oninput = betCalculator
  ;

table   { border-collapse: collapse; }
caption { background-color: #1a4641; color: whitesmoke; font-weight: bold;  padding: .6em;}
td:nth-of-type(1) { min-width:8em; }
td      { border: 1px solid grey; padding: .4em .8em; }
thead   { background-color: #7adfd3; color: #1d1313;  font-weight: bold; }

thead tr:nth-of-type(1) td:nth-of-type(1) { text-align: right; }
thead tr:nth-of-type(2) td:nth-of-type(1) { text-align: center; }

thead tr:nth-of-type(3) { display: none; counter-reset: line; }
tbody tr { counter-increment: line; }
tbody td:nth-of-type(1) {  color: darkslategrey; }
tbody td:nth-of-type(1)::before { content: counter(line) '[=11=]a0-[=11=]a0[=11=]a0'; }

tfoot { font-weight: bold; }
tfoot td:nth-of-type(1) { text-align: right; }
tfoot td:nth-of-type(2)::before { content: '$ ' }

input { font-size: 1.2em; text-align: right; direction: rtl; width:8em;}

button  { 
  width: 2em;
  height: 1.4em;
  border-radius: 1em / .6em;
  color: whitesmoke;
  font-size: .9em;
  font-weight: bolder;
  line-height: .8em;
  padding: 0;
}
thead tr:nth-of-type(1) button { background-color: #063329; }
thead tr:nth-of-type(2) button { background-color: crimson; }
tbody button  { background-color: #071b3f;}

<form action="" id="form-X">
  <table>
    <caption title="Useful for both Negative ‘−’ and / or Positive ‘+’ Money Lines including Single Straight Bets!">
      True Odds Parlay Bet Calculator
    </caption>
    <thead>
      <tr>
        <td>Bet Amount : </td>
        <td><input type="number" step="10" value="0" name="betAmount" min="0"></td>
        <td><button type="reset">&empty;</button></td>   
      </tr>
      <tr><td colspan="2">Teams Money Lines</td>  <td><button id="New-Line">+</button></td></tr>
      <tr>
        <td contenteditable spellcheck="false">...</td>
        <td><input type="number" step="10" value="0"></td>
        <td><button>&#8722;</button></td>
      </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
      <tr>
        <td> Payout : </td>
        <td colspan="2"> </td>
      </tr>
    </tfoot>
  </table>
</form>

看了你的第二个代码段后，我这样做了：

const myForm     = document.getElementById('my-form')
  ,   moneyLines = [...myForm.querySelectorAll('.moneyLine')]
  ;
myForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ; 
myForm.oninput = betCalculator
  ;
function betCalculator()
  {
  let bet  = myForm.betAmount.valueAsNumber || 0
    , odds = moneyLines
                .filter(ml=>!isNaN(ml.valueAsNumber) )
                .reduce((odd,ml)=> odd *= ml.valueAsNumber >= 0
                                        ? (ml.valueAsNumber /100) +1
                                        : (100 / Math.abs(ml.valueAsNumber)) +1
                      ,1)

  
  myForm.result.value = (odds *bet).toFixed(2)
  }
betCalculator()

form#my-form { position: relative; }
legend {font-size: .9em; }
legend:after { content: '[=14=]a0' }
fieldset { display:block; width: 16em; position: absolute; }
fieldset:nth-child(1){ top: 1em; left: 1em; }
fieldset:nth-child(2){ top: 1em; left:20em; }
fieldset:nth-child(3){ top:19em; left: 1em; }
label   { display: block; float: left; clear: both; margin: .2em 1em .4em 0;}
label b { display: inline-block; width:2em }
label b::after { content:' : '}
label input { font-size: 1.2em; text-align: right; direction: rtl; width:8em;}
output { font-weight: bold; width: 14em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;}
output::before {  content: '$ '; }

<h2>True Odds Parlay Bet Calculator</h2>

<p><small>
  Useful for both <b>Negative "&#8722;"</b> and/or <b>Positive "+"</b> Money Lines including Single Straight Bets!
</small></p>

<form action="" id="my-form">
  <fieldset>
    <legend>Bet Amount :</legend>
    <label><input type="number" name="betAmount" step=any min=0></label>
  </fieldset>

  <fieldset>
    <legend>Team Respective Money Lines :</legend>
    <label><b>1</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>2</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>3</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>4</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>5</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>6</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>7</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>8</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>9</b><input type="number" class="moneyLine" step=any ></label>
  </fieldset>

  <fieldset>
    <legend>Payout :</legend>
    <output name="result" value='0'></output>

    <br><br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>

如何使用 javascript 创建体育投注计算器

How to create a Sports Bet Calculator using javascript

javascript

calculator