如何使用HTML,CSS和JavaScript构建技巧计算器
A Tip Calculator is a calculator that calculates a tip based on the percentage of the total bill.
小费计算器是根据总账单的百分比计算小费的计算器。
Let's build one now.
让我们现在建立一个。
第1步-HTML: (Step 1 - HTML:)
We create a form in order to enter the preferred amount:
我们创建一个表格以输入首选金额:
<!doctype html>
<html lang="en"><head><title>Tip Calculator</title><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"></head><body class="bg-dark"><div class="container"><div class="row"><div class="col-md-6 mx-auto"><div class="card card-body text-center mt-5"><h1 class="heading display-5 pb-3">Tip Calculator</h1><form id="tip-form"><div class="form-group"><div class="input-group"><span class="input-group-addon">$</span><input type="number" class="form-control" id="billTotal" placeholder="Total Bill"></div></div><div class="form-group tipPersent"><div class="input-group"><label for="">Tip:</label><input type="range" class="form-control" id="tipInput" value="0"><span class="input-group-addon" id="tipOutput"></span></div></div></form><hr><!-- RESULTS --><div id="results" class="pt-4"><h5>Results</h5><div class="form-group"><div class="input-group"><span class="input-group-addon">Tip amount</span><input type="number" class="form-control" id="tipAmount" disabled></div></div><div class="form-group"><div class="input-group"><span class="input-group-addon">Total Bill with Tip</span><input type="number" class="form-control" id="totalBillWithTip" disabled></div></div></div></div></div></div></div><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script></body>
</html>
第2步-CSS: (Step 2 - CSS:)
You design the style however you want. You can also use CSS to hide the results and show them through JavaScript after the user fills in the form:
您可以根据需要设计样式。 您还可以使用CSS隐藏结果,并在用户填写表单后通过JavaScript显示结果:
#results {display:none;}
步骤3:JavaScript: (Step 3: JavaScript:)
We add an onchange event. The onchange event occurs when the user interacts with the form.
我们添加一个onchange事件。 当用户与表单交互时,会发生onchange事件。
This action will execute a function that computes the final bill amount based on the percentage tip, then returns the results.
该操作将执行一个函数,该函数根据百分比提示计算最终的帐单金额,然后返回结果。
document.querySelector('#tip-form').onchange = function(){var bill = Number(document.getElementById('billTotal').value);var tip = document.getElementById('tipInput').value;document.getElementById('tipOutput').innerHTML = `${tip}%`;var tipValue = bill * (tip/100)var finalBill = bill + tipValue
console.log(finalBill)
var tipAmount = document.querySelector('#tipAmount')
var totalBillWithTip = document.querySelector('#totalBillWithTip')tipAmount.value = tipValue.toFixed(2);totalBillWithTip.value =finalBill.toFixed(2);//Show Resultsdocument.getElementById('results').style.display='block'
}
You can see a working example and its code on Codepen.io.
您可以在Codepen.io上看到一个有效的示例及其代码。
翻译自: https://www.freecodecamp.org/news/how-to-build-a-tip-calculator-with-html-css-and-javascript/
如何使用HTML,CSS和JavaScript构建技巧计算器相关推荐
- css菜单缓慢滑动_如何使用HTML,CSS和JavaScript构建滑动菜单栏
css菜单缓慢滑动 by Supriya Shashivasan 由Supriya Shashivasan 如何使用HTML,CSS和JavaScript构建滑动菜单栏 (How to build a ...
- 如何使用CSS和JavaScript构建简单的甘特图
到目前为止,在我们CSS图表系列教程中,我们已经学习了如何创建不同类型的图表,包括条形图,温度计图和饼图. 今天,我们将通过在甘特图中构建和呈现数据来继续这一旅程. 与其他图表教程不同,我们将大量使用 ...
- css3图片旋转轮播_使用CSS和JavaScript构建3D旋转轮播
css3图片旋转轮播 A lot has been said on the use of traditional 2D carousels, for example this piece on Sma ...
- 如何使用HTML,CSS和JavaScript创建 二进制计算器?
HTML或超文本标记语言以及CSS(级联样式表)和JavaScript可用于开发可执行某些功能的交互式用户应用程序.同样, 可以完全使用HTML, CSS和JS开发二进制计算器. 二进制计算器: 对二 ...
- 水平时间轴css代码_使用CSS和JavaScript构建水平时间线
水平时间轴css代码 在上一篇文章中 ,我向您展示了如何从头开始构建响应式垂直时间轴. 今天,我将介绍创建相关的水平时间线的过程. 与往常一样,要初步了解我们将要构建的内容,请查看相关的CodePen ...
- electron 桌面程序_如何使用Electron使用JavaScript构建您的第一个桌面应用程序
electron 桌面程序 by Carol-Theodor Pelu 通过Carol-Theodor Pelu 如何使用Electron使用JavaScript构建您的第一个桌面应用程序 (How ...
- vue使用pwa_如何使用HTML,CSS和JavaScript从头开始构建PWA
vue使用pwa Progressive web apps are a way to bring that native app feeling to a traditional web app. W ...
- 通过构建城市来解释HTML,CSS和JavaScript之间的关系
by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 通过构建城市来解释HTML,CSS和JavaScript之间的关系 (The relationship betw ...
- css画布背景_如何使用CSS和触摸JavaScript构建画布外菜单
css画布背景 在本教程中,我们将介绍一种简单而有效的方法,以使用HTML,CSS和JavaScript创建画布菜单. 要初步了解我们将要构建的内容,请查看相关的CodePen演示(请查看较大的版本以 ...
最新文章
- 自定义函数_自定义函数,让你的表格为所欲为
- vector排序与查找
- (转)Inno Setup入门(二十一)——Inno Setup类参考(7)
- 基于源码编辑器的跑酷游戏设计
- 成功解决TypeError: sequence item 0: expected str instance, list found
- 关于程序化交易的点点知识
- 微信小程序ui框架 graceUI 使用半年评测
- Cocos 3D开源游戏案例
- OpenCV物体颜色检测(Python)
- 产品经理如何设计网页导航菜单
- Java word转pdf Linux/windows跨平台 格式完美(利用命令行调用libreoffice)
- 用Docker和Kubernetes将MongoDB作为微服务来运行
- nginx配置https访问 生成ssl自签名证书,浏览器直接访问
- 用Selenium+xpath爬取京东商城
- 微信群聊,为什么人数上限500人?
- python列表删除元素问题+指针问题进阶杂谈
- RevMan 5.3.5 Mac/Linux/Win 强大的Meta分析工具
- 丰田工机安全plc编程软件pcwin safe 14而且还是中文版的
- css发动机的机滤,机油滤清器
- 扯淡Monte-Carlo(一)