[英]How to create a Sports Bet Calculator using javascript
我使用 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 Calculator，使用上述公式，這將允許我輸入一個下注金額和幾條賠付線，而不僅僅是一個。
過關投注是將兩個或多個個人投注聯系在一起以獲得高賠付的單一投注。 因此，一張過獎券上可以有兩個或多個團隊。
我還想做的是能夠在表單而不是彈出窗口上輸入這些數字（moneyLine 和 betAmount）。
我嘗試自己做，但無濟於事。 不知何故，它沒有顯示結果。
// 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>
有關詳細信息，請參閱代碼段。 非常感謝您的幫助。
修訂第一個版本:)
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) '\\00a0-\\00a0\\00a0'; } 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">∅</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>−</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: '\\00a0' } 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 "−"</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 語言創建的代碼在我的 html 頁面上顯示投注計算器結果
[英]How to display Bet Calculator result on my html page with code created in JavaScript language
如何使用開關盒和 function 使用 Javascript 創建一個簡單的計算器
[英]How to create a simple calculator using switch case and function using Javascript
如何使用 JavaScript 創建電子商務產品價格計算器？
[英]How to create ecommerce product price measure calculator using JavaScript?
如何在不使用 eval 的情況下使用 JavaScript 的功能來創建計算器？
[英]How can I use JavaScript's functionality to create a calculator without using eval?
如何使用 JavaScript 創建 BMI 計算器，可選擇以公斤/米為單位的 BMI 或以磅/英尺為單位的 BMI
[英]How to create a BMI calculator using JavaScript with options to choose between BMI in Kgs/metters or BMI in Lbs/feet
如何使用 JavaScript 為我的計算器項目創建一個可以添加文本的框？
[英]How to create a box where I can add text using JavaScript for my calculator project?
想要在joomla chronoforms中使用javascript創建一個定期存款計算器（每季）
[英]want to create a fixed deposit calculator(quaterly) using javascript in joomla chronoforms
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.