javaScrip
任务:写一个函式名为calculator
,具有自动计算汉堡总价与可乐总价
。
假设再函式内设计汉堡单价50,可乐单价20元
先简单假设有个view html ,利用 id="hamNumId"
串接值到javaScript的函式。
使用者可以简单写下买的汉堡与可乐数量,会自动算出总价 显示再html的console
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="voiewport" content="width = device-width,initial-scale=1.0"> <meta http-equiv = "X-UA-Compatible" content="ie = edge"> <title>Document</title> <link rel="stylesheet" href = "style.css"> </head> <body> <div class="wrap"> <div class="wrap-inner"> <h1> calculator for restrument</h1> <p> 请问客人您要点甚么餐?</p> <p> 顾客:给我<input type="text" id="hamNumId">个汉堡,再给我<input type="text" id="cokeNumId">杯可乐</p> <p>服务生:<input type="button" Id="countId" value="计算中按钮">,好的,总计是<input type="text" id="totalId">元</p> </div> </div>
//.onclick 触发事件的监听按钮元件// function() 是一个没有参数的函式var humPrice=50;var cokePrice=20;document.getElementById('countId').onclick = function(){ alert('you already click the button!'); var hamNum = parseInt(document.getElementById('hamNumId').value)*humPrice; var cokeNum = parseInt(document.getElementById('cokeNumId').value)*cokePrice; var totalprice= hamNum + cokeNum; //最后最重要的totalId串接到前端显示画面的总金额 document.getElementById('totalId').textContent=totalprice; console.log(totalprice);}
.value
是一个方法,可以把前端输入的数字显示成字串。
JavaScript有个冷知识,String之间可以数字相乘,会计算正确;但是数字相加则无法正确计算出数值,会变成首尾相连。例如:
String 状态的 '5'+'2'='52'String 状态的 '5'*'2' = '10'
因此要使用parseInt
方法
a = parseInt('5'+'2')=10
本文经六角学院同意授权之笔记文章
https://courses.hexschool.com/
https://courses.hexschool.com/courses/js/lectures/11952161