西安千度网站建设,无锡百度信息流,网站设计师 网站开发工程师,网站建设论文范文需求#xff1a; 有92号汽油和95号可以选择#xff0c;选择你需要的汽油#xff0c;并输入需要加油的升数#xff0c;点击按钮计算总价钱在div中可以得到你所需要支付的价格。结构如下图所示#xff1a; 详细代码如下#xff1a;
!DOCTYPE html有92号汽油和95号可以选择选择你需要的汽油并输入需要加油的升数点击按钮计算总价钱在div中可以得到你所需要支付的价格。结构如下图所示 详细代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#box {width: 500px;height: 100px;background-color: pink;border: 5px solid skyblue;border-radius: 10px;}div {margin-top: 20px;}/style
/headbodydivlabel forradio192号8.56元/升/labelinput typeradio nameoil checked idradio1 value8.56/divdivlabel forradio95号,9.16元/升/labelinput typeradio nameoil idradio2 value9.16/divdivinput typetext placeholder请输入加油的升数 nameoil idtxt/divdivbutton idbtn计算总价钱/button/divdiv idbox/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效果
