javascript - 计算后在js中格式化数字
问题描述
寻找一种用逗号格式化千部分（10,000）的计算结果的方法。由于我添加.toLocaleString('en-US', {maximumFractionDigits:1});了输出数字，当我选中和取消选中选项时，结果变得很奇怪。
var checkboxes = document.querySelectorAll('.sum')
var select = document.querySelector('#select')
var total3 = document.querySelector('#payment-total')
var total6 = document.querySelector('#payment-total2')
var total12 = document.querySelector('#payment-total3')
const totalScreenDiv = document.querySelector('#total-screen');
const totalRangeDiv = document.querySelector('#total-range');
const totalOtherDiv = document.querySelector('#total-other');
const screen1 = document.querySelector('#screen-1');
const screen2 = document.querySelector('#screen-2');
const screen3 = document.querySelector('#screen-3');
const range1 = document.querySelector('#range-1');
const range2 = document.querySelector('#range-2');
const range3 = document.querySelector('#range-3');
const other1 = document.querySelector('#other-1');
const other2 = document.querySelector('#other-2');
const other3 = document.querySelector('#other-3');
var screenwad = 5
var screenkalw = 6
var screenzat = 4
var totalscreen = document.querySelector('#total-screen')
var checkboxesTotal = 0;
var selectTotal = 0;
checkboxes.forEach(function(input) {
input.addEventListener('change', onCheckboxSelect)
})
select.addEventListener('click', onSelectChange)
function onCheckboxSelect(e) {
var sign = e.target.checked ? 1 : -1
checkboxesTotal += sign * parseInt(e.target.value, 10);
const summary = getSummary(e.target);
var select = document.getElementById("select");
// get selected value and assign it to the global variable selectTotal
selectTotal = select.options[select.selectedIndex].value;
renderTotal();
renderSummary(summary);
}
function onSelectChange(e) {
var value = parseInt(e.target.value, 10)
if (!isNaN(value)) {
selectTotal = value
renderTotal()
}
}
function getSummary(selectedDiv) {
const data = {totalScreen: +totalScreenDiv.innerText.replace(',',''), totalRange: +totalRangeDiv.innerText.replace(',', ''), totalOther: +totalOtherDiv.innerText.replace(',', '')};
const sign = selectedDiv.checked ? 1 : -1;
if(selectedDiv.getAttribute('id') === 'styled-checkbox-1') {
if(sign === 1) {
data.totalScreen += +(screen1.innerText.replace(',', ''));
data.totalRange += +(range1.innerText.replace(',', ''));
data.totalOther += +(other1.innerText.replace(',', ''));
} else {
if(data.totalScreen > 0) data.totalScreen -= +(screen2.innerText.replace(',', ''));
if(data.totalRange > 0) data.totalRange -= +(range2.innerText.replace(',', ''))
if(data.totalOther > 0) data.totalOther -= +(other3.innerText.replace(',', ''))
}
} else if(selectedDiv.getAttribute('id') === 'styled-checkbox-2') {
if(sign === 1) {
data.totalScreen += +(screen2.innerText.replace(',', ''))
data.totalRange += +(range2.innerText.replace(',', ''))
data.totalOther += +(other2.innerText.replace(',', ''))
} else {
if(data.totalScreen > 0) data.totalScreen -= +(screen2.innerText.replace(',', ''))
if(data.totalRange > 0) data.totalRange -= +(range2.innerText.replace(',', ''))
if(data.totalOther > 0) data.totalOther -= +(other2.innerText.replace(',', ''))
}
} else if(selectedDiv.getAttribute('id') === 'styled-checkbox-3') {
if(sign === 1) {
data.totalScreen += +(screen3.innerText.replace(',', ''))
data.totalRange += +(range3.innerText.replace(',', ''))
data.totalOther += +(other3.innerText.replace(',', ''))
} else {
if(data.totalScreen > 0) data.totalScreen -= +(screen3.innerText.replace(',', ''))
if(data.totalRange > 0) data.totalRange -= +(range3.innerText.replace(',', ''))
if(data.totalOther > 0) data.totalOther -= +(other3.innerText.replace(',', ''))
}
}
return data;
}
function renderSummary({totalScreen, totalRange, totalOther}) {
totalScreenDiv.innerHTML = totalScreen.toLocaleString('en-US', {maximumFractionDigits:1});
totalRangeDiv.innerHTML = totalRange.toLocaleString('en-US', {maximumFractionDigits:1});
totalOtherDiv.innerHTML = totalOther.toLocaleString('en-US', {maximumFractionDigits:1});
}
function renderTotal() {
//NORMALNA CENA
total3.innerHTML = checkboxesTotal * selectTotal
// 10% TANIEJ
total6.innerHTML = (checkboxesTotal * selectTotal / 100) * (-10) + (checkboxesTotal * selectTotal)
// 20% TANIEJ
total12.innerHTML = (checkboxesTotal * selectTotal / 100) * (-20) + (checkboxesTotal * selectTotal)
//WADOWICE
}/*CENNIK*/
body {
margin: 0;
font-family: Europa;
}
.pt_title {
text-align: center;
background: #2c4949;
color: #fff;
font-size: 20px;
height: 60px;
line-height: 60px;
}
.pt_months {
color: #fff;
background: #9B8C70;
height: 70px;
line-height: 70px;
}
.col-x.month {
text-align: center;
}
.cennik .pt-container {
padding: 0 100px;
}
.col-x {
display: inline-block;
width: 25%;
float: left;
}
.pt_sub {
background: #F4F1ED;
height: 40px;
line-height: 40px;
box-shadow: 0px 1px 2px 0px #00000029;
z-index: 9;
position: relative;
}
.pt_sub .col-x {
color: #352B25;
font-size: 14px;
font-weight: 100;
}
/*TABLE*/
.cennik ul li {
list-style: none!important;
float: left;
min-width: 100%;
background: #e6e6e6;
border-bottom: 1px solid #00000021;
margin-left: 0!important;
padding-left: 0px !important;
}
.cennik ul {
list-style: none;
margin: 0;
padding: 0;
}
.pt-place {
padding: 15px 0;
}
.pt-place .month {
font-weight: 700;
color: #2c4949;
}
.pt_table ul {
display: inline-block;
position: relative;
width: 100%;
}
.pt-place .month span {
font-size: 16px;
font-weight: 700;
color: #2c4949;
}
.pt_months .month {
font-size: 20px;
text-transform: uppercase;
font-weight: 700;
}
/*CHECKBOX*/
.checkbox.col-x {
color: #858585;
font-weight: 700;
}
.checkbox.col-x span:hover {
color: #354949;
}
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 24px;
height: 24px;
background: #ffffff00;
border: 2px solid #858585;
border-radius: 6px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.styled-checkbox:hover + label:before {
background: #ffffff00;
border: 4px solid #9B8C70;
}
.styled-checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
background: #9B8C70;
}
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto;
}
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 6.5px;
top: 14px;
background: #FDF1D1;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 #FDF1D1, 4px 0 0 #FDF1D1, 4px -2px 0 #FDF1D1, 4px -4px 0 #FDF1D1, 4px -6px 0 #FDF1D1, 4px -8px 0 #FDF1D1;
transform: rotate(45deg);
}
.pt-place.disabled {
opacity: 0.5;
}
span.discount {
color: #FFD383!important;
}
.cennik li.pt-place:hover {
background: #f4f1ed;
}
.pt_footer {
font-size: 14px;
font-weight: 700;
color: #FDF1D1;
background: #2c4949;
padding: 20px 0;
display: inline-block;
width: 100%;
}
.pt_footer span {
color: #FDF1D1;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
}
#payment-total,#payment-total2,#payment-total3 {
font-size: 20px;
color: #fff;
letter-spacing: 0px;
}
.currency {
color: #fff!important;
text-transform: lowercase!important;
font-size: 20px!important;
letter-spacing: 0px!important;
}
.col-x.spot span {
letter-spacing: 0px;
margin-right: 10px;
color: #fff;
text-transform: inherit;
font-size: 16px;
}
.col-x.spot {
margin-top: 5px;
}
.cennik select {
background-color: white;
border-radius: 30px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
font-size: 16px;
}
.cennik select.round {
background-image: linear-gradient(45deg, #ffffff00 50%, gray 50%), linear-gradient(135deg, grey 50%, transparent 50%), radial-gradient(#ddd0 70%, transparent 72%);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;
background-size: 5px 5px, 5px 5px, 1.5em 1.5em;
background-repeat: no-repeat;
color: #2c4949;
}
.cennik select.round:focus {
background-image: linear-gradient(45deg, #354949 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #354949 50%), radial-gradient(#ff000000 70%, transparent 72%);
background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - .5em) .5em;
background-size: 5px 5px, 5px 5px, 1.5em 1.5em;
background-repeat: no-repeat;
outline: 0;
}
.cennik .checkbox {
margin-top: 0!important;
margin-bottom: 0!important;
}
.cennik_page .wpb_raw_code.wpb_content_element.wpb_raw_html {
margin-bottom: -10px!important;
}
span.link {
font-weight: 700;
}<div class="cennik">
<div class="pt_header">
<div class="pt_months">
<div class="pt-container">
<div class="col-x search" style="color: #0000;">Szukaj</div>
<div class="col-x month">SCREENS</div>
<div class="col-x month">RANGE</span></div>
<div class="col-x month">OTHER</span></div>
</div>
</div>
<div class="pt_sub">
<div class="pt-container">
<div class="col-x">LOCATIONS:</div>
<div class="col-x month">Digital Signage</div>
<div class="col-x month">MONTHLY</div>
<div class="col-x month">MONTHLY</div>
</div>
</div>
</div>
<div class="pt_table">
<ul>
<li class="pt-place">
<div class="pt-container">
<div class="checkbox col-x"><input value="190" data-screen="5" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-1">
<label for="styled-checkbox-1"><span class="link">PLACE ONE</span></label></div>
<div class="col-x month"><span id="screen-1">5</span></div>
<div class="col-x month"><span id="range-1">10,000</span></div>
<div class="col-x month"><span id="other-1">250,000</span></div>
</div>
</li>
<li class="pt-place">
<div class="pt-container">
<div class="checkbox col-x"><input value="190" data-screen="6" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-2">
<label for="styled-checkbox-2"><span class="link">PLACE TWO</span></label></div>
<div class="col-x month"><span id="screen-2">6</span></div>
<div class="col-x month"><span id="range-2">8,000</span></div>
<div class="col-x month"><span id="other-2">250,000</span></div>
</div>
</li>
<li class="pt-place">
<div class="pt-container">
<div class="checkbox col-x"><input value="130" data-screen="4" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-3">
<label for="styled-checkbox-3"><span class="link">PLACE THREE</span></label></div>
<div class="col-x month"><span id="screen-3">4</span></div>
<div class="col-x month"><span id="range-3">5,000</span></div>
<div class="col-x month"><span id="other-3">250,000</span></div>
</div>
</li>
<li class="pt-place disabled">
<div class="pt-container">
<div class="checkbox col-x"><span class="link">SUMMARY:</span></div>
<div class="col-x month"><span id="total-screen">0</span></div>
<div class="col-x month"><span id="total-range">0</span></div>
<div class="col-x month"><span id="total-other">0</span></div>
</div>
</li>
</ul>
</div>
<div class="pt_footer">
<div class="pt-container">
<div class="col-x spot">
<span>Spot: </span>
<select id="select" name="select" class="round">
<option value="1" class="sum">5 seconds</option>
<option value="2" class="sum" selected="selected">10 seconds</option>
<option value="3" class="sum">15 seconds</option>
</select>
</div>
<div class="col-x month"><span>3 MONTHS</span><hr style="border: none;
margin: 4px;"><span id="payment-total">0</span> <span class="currency">$</span>
</div>
<div class="col-x month"><span>6 MONTHS <span style="color:#FFD383">-10%</span></span><hr style="border: none;
margin: 4px;"><span id="payment-total2">0</span> <span class="currency">$</span>
</div>
<div class="col-x month"><span>12 MONTHS <span style="color:#FFD383">-20%</span></span><hr style="border: none;
margin: 4px;"><span id="payment-total3">0</span> <span class="currency">$</span>
</div>
</div>
</div>解决方案
在这里，我在您的递减条件中发现了三个错误的选择器。我已经修好了那些。现在它正在工作。
这是我更改的代码。
else {
if(data.totalScreen > 0) data.totalScreen -= +(screen1.innerText.replace(',', ''));
if(data.totalRange > 0) data.totalRange -= +(range1.innerText.replace(',', ''))
if(data.totalOther > 0) data.totalOther -= +(other1.innerText.replace(',', ''))
}
console.clear();
var checkboxes = document.querySelectorAll('.sum')
var select = document.querySelector('#select')
var total3 = document.querySelector('#payment-total')
var total6 = document.querySelector('#payment-total2')
var total12 = document.querySelector('#payment-total3')
const totalScreenDiv = document.querySelector('#total-screen');
const totalRangeDiv = document.querySelector('#total-range');
const totalOtherDiv = document.querySelector('#total-other');
const screen1 = document.querySelector('#screen-1');
const screen2 = document.querySelector('#screen-2');
const screen3 = document.querySelector('#screen-3');
const range1 = document.querySelector('#range-1');
const range2 = document.querySelector('#range-2');
const range3 = document.querySelector('#range-3');
const other1 = document.querySelector('#other-1');
const other2 = document.querySelector('#other-2');
const other3 = document.querySelector('#other-3');
var screenwad = 5
var screenkalw = 6
var screenzat = 4
var totalscreen = document.querySelector('#total-screen')
var checkboxesTotal = 0;
var selectTotal = 0;
checkboxes.forEach(function(input) {
input.addEventListener('change', onCheckboxSelect)
})
select.addEventListener('click', onSelectChange)
function onCheckboxSelect(e) {
var sign = e.target.checked ? 1 : -1
checkboxesTotal += sign * parseInt(e.target.value, 10);
const summary = getSummary(e.target);
var select = document.getElementById("select");
// get selected value and assign it to the global variable selectTotal
selectTotal = select.options[select.selectedIndex].value;
renderTotal();
renderSummary(summary);
}
function onSelectChange(e) {
var value = parseInt(e.target.value, 10)
if (!isNaN(value)) {
selectTotal = value
renderTotal()
}
}
function getSummary(selectedDiv) {
const data = {totalScreen: +totalScreenDiv.innerText.replace(',',''), totalRange: +totalRangeDiv.innerText.replace(',', ''), totalOther: +totalOtherDiv.innerText.replace(',', '')};
const sign = selectedDiv.checked ? 1 : -1;
if(selectedDiv.getAttribute('id') === 'styled-checkbox-1') {
if(sign === 1) {
data.totalScreen += +(screen1.innerText.replace(',', ''));
data.totalRange += +(range1.innerText.replace(',', ''));
data.totalOther += +(other1.innerText.replace(',', ''));
} else {
if(data.totalScreen > 0) data.totalScreen -= +(screen1.innerText.replace(',', ''));
if(data.totalRange > 0) data.totalRange -= +(range1.innerText.replace(',', ''))
if(data.totalOther > 0) data.totalOther -= +(other1.innerText.replace(',', ''))
}
} else if(selectedDiv.getAttribute('id') === 'styled-checkbox-2') {
if(sign === 1) {
data.totalScreen += +(screen2.innerText.replace(',', ''))
data.totalRange += +(range2.innerText.replace(',', ''))
data.totalOther += +(other2.innerText.replace(',', ''))
} else {
if(data.totalScreen > 0) data.totalScreen -= +(screen2.innerText.replace(',', ''))
if(data.totalRange > 0) data.totalRange -= +(range2.innerText.replace(',', ''))
if(data.totalOther > 0) data.totalOther -= +(other2.innerText.replace(',', ''))
}
} else if(selectedDiv.getAttribute('id') === 'styled-checkbox-3') {
if(sign === 1) {
data.totalScreen += +(screen3.innerText.replace(',', ''))
data.totalRange += +(range3.innerText.replace(',', ''))
data.totalOther += +(other3.innerText.replace(',', ''))
} else {
if(data.totalScreen > 0) data.totalScreen -= +(screen3.innerText.replace(',', ''))
if(data.totalRange > 0) data.totalRange -= +(range3.innerText.replace(',', ''))
if(data.totalOther > 0) data.totalOther -= +(other3.innerText.replace(',', ''))
}
}
return data;
}
function renderSummary({totalScreen, totalRange, totalOther}) {
totalScreenDiv.innerHTML = totalScreen.toLocaleString('en-US', {maximumFractionDigits:1});
totalRangeDiv.innerHTML = totalRange.toLocaleString('en-US', {maximumFractionDigits:1});
totalOtherDiv.innerHTML = totalOther.toLocaleString('en-US', {maximumFractionDigits:1});
}
function renderTotal() {
//NORMALNA CENA
total3.innerHTML = checkboxesTotal * selectTotal
// 10% TANIEJ
total6.innerHTML = (checkboxesTotal * selectTotal / 100) * (-10) + (checkboxesTotal * selectTotal)
// 20% TANIEJ
total12.innerHTML = (checkboxesTotal * selectTotal / 100) * (-20) + (checkboxesTotal * selectTotal)
//WADOWICE
}/*CENNIK*/
body {
margin: 0;
font-family: Europa;
}
.pt_title {
text-align: center;
background: #2c4949;
color: #fff;
font-size: 20px;
height: 60px;
line-height: 60px;
}
.pt_months {
color: #fff;
background: #9B8C70;
height: 70px;
line-height: 70px;
}
.col-x.month {
text-align: center;
}
.cennik .pt-container {
padding: 0 100px;
}
.col-x {
display: inline-block;
width: 25%;
float: left;
}
.pt_sub {
background: #F4F1ED;
height: 40px;
line-height: 40px;
box-shadow: 0px 1px 2px 0px #00000029;
z-index: 9;
position: relative;
}
.pt_sub .col-x {
color: #352B25;
font-size: 14px;
font-weight: 100;
}
/*TABLE*/
.cennik ul li {
list-style: none!important;
float: left;
min-width: 100%;
background: #e6e6e6;
border-bottom: 1px solid #00000021;
margin-left: 0!important;
padding-left: 0px !important;
}
.cennik ul {
list-style: none;
margin: 0;
padding: 0;
}
.pt-place {
padding: 15px 0;
}
.pt-place .month {
font-weight: 700;
color: #2c4949;
}
.pt_table ul {
display: inline-block;
position: relative;
width: 100%;
}
.pt-place .month span {
font-size: 16px;
font-weight: 700;
color: #2c4949;
}
.pt_months .month {
font-size: 20px;
text-transform: uppercase;
font-weight: 700;
}
/*CHECKBOX*/
.checkbox.col-x {
color: #858585;
font-weight: 700;
}
.checkbox.col-x span:hover {
color: #354949;
}
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 24px;
height: 24px;
background: #ffffff00;
border: 2px solid #858585;
border-radius: 6px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.styled-checkbox:hover + label:before {
background: #ffffff00;
border: 4px solid #9B8C70;
}
.styled-checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
background: #9B8C70;
}
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto;
}
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 6.5px;
top: 14px;
background: #FDF1D1;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 #FDF1D1, 4px 0 0 #FDF1D1, 4px -2px 0 #FDF1D1, 4px -4px 0 #FDF1D1, 4px -6px 0 #FDF1D1, 4px -8px 0 #FDF1D1;
transform: rotate(45deg);
}
.pt-place.disabled {
opacity: 0.5;
}
span.discount {
color: #FFD383!important;
}
.cennik li.pt-place:hover {
background: #f4f1ed;
}
.pt_footer {
font-size: 14px;
font-weight: 700;
color: #FDF1D1;
background: #2c4949;
padding: 20px 0;
display: inline-block;
width: 100%;
}
.pt_footer span {
color: #FDF1D1;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
}
#payment-total,#payment-total2,#payment-total3 {
font-size: 20px;
color: #fff;
letter-spacing: 0px;
}
.currency {
color: #fff!important;
text-transform: lowercase!important;
font-size: 20px!important;
letter-spacing: 0px!important;
}
.col-x.spot span {
letter-spacing: 0px;
margin-right: 10px;
color: #fff;
text-transform: inherit;
font-size: 16px;
}
.col-x.spot {
margin-top: 5px;
}
.cennik select {
background-color: white;
border-radius: 30px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
font-size: 16px;
}
.cennik select.round {
background-image: linear-gradient(45deg, #ffffff00 50%, gray 50%), linear-gradient(135deg, grey 50%, transparent 50%), radial-gradient(#ddd0 70%, transparent 72%);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;
background-size: 5px 5px, 5px 5px, 1.5em 1.5em;
background-repeat: no-repeat;
color: #2c4949;
}
.cennik select.round:focus {
background-image: linear-gradient(45deg, #354949 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #354949 50%), radial-gradient(#ff000000 70%, transparent 72%);
background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - .5em) .5em;
background-size: 5px 5px, 5px 5px, 1.5em 1.5em;
background-repeat: no-repeat;
outline: 0;
}
.cennik .checkbox {
margin-top: 0!important;
margin-bottom: 0!important;
}
.cennik_page .wpb_raw_code.wpb_content_element.wpb_raw_html {
margin-bottom: -10px!important;
}
span.link {
font-weight: 700;
}<div class="cennik">
<div class="pt_header">
<div class="pt_months">
<div class="pt-container">
<div class="col-x search" style="color: #0000;">Szukaj</div>
<div class="col-x month" >SCREENS</div>
<div class="col-x month">RANGE</span></div>
<div class="col-x month">OTHER</span></div>
</div>
</div>
<div class="pt_sub">
<div class="pt-container">
<div class="col-x">LOCATIONS:</div>
<div class="col-x month">Digital Signage</div>
<div class="col-x month">MONTHLY</div>
<div class="col-x month">MONTHLY</div>
</div>
</div>
</div>
<div class="pt_table">
<ul>
<li class="pt-place">
<div class="pt-container">
<div class="checkbox col-x"><input value="190" data-screen="5" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-1">
<label for="styled-checkbox-1"><span class="link">PLACE ONE</span></label></div>
<div class="col-x month"><span id="screen-1">5</span></div>
<div class="col-x month"><span id="range-1">10,000</span></div>
<div class="col-x month"><span id="other-1">250,000</span></div>
</div>
</li>
<li class="pt-place">
<div class="pt-container">
<div class="checkbox col-x"><input value="190" data-screen="6" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-2">
<label for="styled-checkbox-2"><span class="link">PLACE TWO</span></label></div>
<div class="col-x month"><span id="screen-2">6</span></div>
<div class="col-x month"><span id="range-2">8,000</span></div>
<div class="col-x month"><span id="other-2">250,000</span></div>
</div>
</li>
<li class="pt-place">
<div class="pt-container">
<div class="checkbox col-x"><input value="130" data-screen="4" type="checkbox" class="sum styled-checkbox" id="styled-checkbox-3">
<label for="styled-checkbox-3"><span class="link">PLACE THREE</span></label></div>
<div class="col-x month"><span id="screen-3">4</span></div>
<div class="col-x month"><span id="range-3">5,000</span></div>
<div class="col-x month"><span id="other-3">250,000</span></div>
</div>
</li>
<li class="pt-place disabled">
<div class="pt-container">
<div class="checkbox col-x"><span class="link">SUMMARY:</span></div>
<div class="col-x month"><span id="total-screen">0</span></div>
<div class="col-x month"><span id="total-range">0</span></div>
<div class="col-x month"><span id="total-other">0</span></div>
</div>
</li>
</ul>
</div>
<div class="pt_footer">
<div class="pt-container">
<div class="col-x spot">
<span>Spot: </span>
<select id="select" name="select" class="round">
<option value="1" class="sum">5 seconds</option>
<option value="2" class="sum" selected="selected">10 seconds</option>
<option value="3" class="sum">15 seconds</option>
</select>
</div>
<div class="col-x month"><span>3 MONTHS</span><hr style="border: none;
margin: 4px;"><span id="payment-total">0</span> <span class="currency">$</span>
</div>
<div class="col-x month"><span>6 MONTHS <span style="color:#FFD383">-10%</span></span><hr style="border: none;
margin: 4px;"><span id="payment-total2">0</span> <span class="currency">$</span>
</div>
<div class="col-x month"><span>12 MONTHS <span style="color:#FFD383">-20%</span></span><hr style="border: none;
margin: 4px;"><span id="payment-total3">0</span> <span class="currency">$</span>
</div>
</div>
</div>推荐阅读
- php - 当我尝试将 Crinsane/LaravelShoppingcart 包含到我的 laravel 项目中时出现此错误：
- json - 在 Flutter / Dart 中解析列表
- python - 从多索引数据框中选择列，例如制作直方图
- angular - angular Rxjs tap 保证运行代码部分
- node.js - Mongoose：如何删除具有某些字段值的所有文档
- javascript - JavaScript 从字符串中删除元音
- json - 如何在批处理脚本中读取 JSON 数据
- sql - SQL查询缺少选择语句获取数据错误
- r - 通过来自 Tibble 数据帧的部分字符串匹配对列表进行子集
- text - 如何在太多文本中检测重复的“单词序列”？