Pixel 価格計算機
<div id="pixel-price-calculator">
<h2>Pixel 価格計算機</h2>
<div>
<label for="trade-in">下取り端末:</label>
<select id="trade-in">
<option value="0">なし</option>
<option value="10000">Pixel 3a</option>
<option value="15000">Pixel 4</option>
<option value="20000">Pixel 5</option>
</select>
</div>
<div>
<label for="purchase">購入端末:</label>
<select id="purchase">
<option value="80000">Pixel 6</option>
<option value="100000">Pixel 6 Pro</option>
<option value="90000">Pixel 7</option>
</select>
</div>
<div>
<label for="storage">ストレージ:</label>
<select id="storage">
<option value="0">128GB</option>
<option value="10000">256GB</option>
<option value="20000">512GB</option>
</select>
</div>
<button id="calculate">計算</button>
<div id="result"></div>
</div>
<style>
#pixel-price-calculator {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
#pixel-price-calculator div {
margin-bottom: 15px;
}
#pixel-price-calculator label {
display: block;
margin-bottom: 5px;
}
#pixel-price-calculator select, #pixel-price-calculator button {
width: 100%;
padding: 5px;
}
#pixel-price-calculator button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
#result {
margin-top: 20px;
}
#result h2 {
font-size: 1.2em;
margin-bottom: 10px;
}
#result p {
margin: 5px 0;
}
.highlight {
background-color: yellow;
padding: 2px 4px;
}
</style>
<script>
jQuery(document).ready(function($) {
$('#calculate').on('click', function() {
var tradeInValue = parseInt($('#trade-in').val());
var purchaseValue = parseInt($('#purchase').val());
var storageValue = parseInt($('#storage').val());
var price = purchaseValue + storageValue;
var storeCredit = 0; // ストアクレジットの計算ロジックを追加する場合はここで
var effectivePrice = price - tradeInValue - storeCredit;
var purchase = $('#purchase option:selected').text();
var storage = $('#storage option:selected').text();
var tradeInPercentage = Math.round((tradeInValue / price) * 100);
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<h2>計算結果</h2>
<p>購入端末: ${purchase} (${storage})</p>
<p>基本価格: ¥${price.toLocaleString()}</p>
<p>ストアクレジット: ¥${storeCredit.toLocaleString()}</p>
<p>下取り価格: ¥${tradeInValue.toLocaleString()}
<span class="highlight">(発売時価格の${tradeInPercentage}%)</span></p>
<p>実質価格: ¥${effectivePrice.toLocaleString()}</p>
`;
});
});
</script>