佛山專業(yè)建設(shè)網(wǎng)站平臺營銷策劃方案怎么寫?
需求：
有92號汽油和95號可以選擇，選擇你需要的汽油，并輸入需要加油的升數(shù)，點擊按鈕"計算總價錢"在div中可以得到你所需要支付的價格。結(jié)構(gòu)如下圖所示：
詳細(xì)代碼如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 500px;height: 100px;background-color: pink;border: 5px solid skyblue;border-radius: 10px;}div {margin-top: 20px;}</style>
</head><body><div><label for="radio1">92號，8.56元/升</label><input type="radio" name="oil" checked id="radio1" value="8.56"></div><div><label for="radio">95號,9.16元/升</label><input type="radio" name="oil" id="radio2" value="9.16"></div><div><input type="text" placeholder="請輸入加油的升數(shù)" name="oil" id="txt"></div><div><button id="btn">計算總價錢</button></div><div id="box"></div>
</body>
<script>// 獲取頁面元素 var radio1 = document.getElementById("radio1");var radio2 = document.getElementById("radio2");var txt = document.getElementById("txt");var btn = document.getElementById("btn");var box = document.getElementById("box");// 按鈕的點擊事件btn.onclick = function () {// 獲取文本框的值var num = Number(txt.value);// console.log(num)// 判斷選中哪個radioif (radio1.checked) {var price = Number(radio1.value);}else {var price = Number(radio2.value);}var total = (num * price).toFixed(2);box.innerHTML = "您需要支付：" + total + "元！" ;}</script></html>
效果：
