html实现计算总价的简单介绍
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
本篇文章给大家谈谈html实现计算总价，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
- 1、怎么用js和html计算商品总价，并与商品数量联动,从td获取数据并赋值到td。
- 2、用html做成这种效果：在单价、数量、折扣、运费中输入数值 然后单击总价的框 可以直接得到总价
- 3、用html做自动计算
- 4、HTML计算商品总价
- 5、html急急急!手写代码，实现如下效果：输入单价和数量后，点击“总价”按钮，即可计算出总价。
- 6、用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。
怎么用js和html计算商品总价，并与商品数量联动,从td获取数据并赋值到td。
给你说下思路， document.getElementById("top").rows.length可以获得top表的行数 document.getElementById("top").rows[0].cells.length可以获得top表的第一行的列数 document.getElementById("top").rows[0].cells[0].offsetWidth可获得top表第一行第一列的实际宽度，（注意，这个是只读的！）所以 for(var i=0;i
用html做成这种效果：在单价、数量、折扣、运费中输入数值 然后单击总价的框 可以直接得到总价
给你个参考吧 具体的 你根据你的实际要求去转。。道理一样的
html
head
script
function $(e) {return(document.getElementById(e));}
function add()
{
$("id3").value=parseInt($("id1").value)+parseInt($("id2").value);
}
/script
/head
body
input id="id1" /
input id="id2" /
input id="id3" onfocus="add()" /
/body
/html
用html做自动计算
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titleHTML 自动计算JS Code by Happy/title
/head
body
tr
td height="12"div align="center"
input type="text" id="num1" onkeyup="getTotal();" /
/div/td
td height="12"div align="center"
input type="text" id="num2" onkeyup="getTotal();" /
/div/td
/tr
tr
td height="12"div align="center"
input type="text" id="Total" /
/div/td
/tr
script type="text/javascript"
function getTotal(){
var num1 = document.getElementById("num1").value*1;
var num2 = document.getElementById("num2").value*1;
document.getElementById("Total").value = num1*num2;
}
/script
/body
/html
HTML计算商品总价
html
head
script
function cal() {
var appleVolum = Number(document.getElementById("appleVolum").value);
var bananaVolum = Number(document.getElementById("bananaVolum").value);
var pineappleVolum = Number(document.getElementById("pineappleVolum").value);
document.getElementById("msg").value = "共花费：" + (appleVolum * 10 + bananaVolum * 20 + pineappleVolum * 20);
}
/script
/head
body
苹果每斤10元，请输入您要购买的斤数：input id="appleVolum"br
香蕉每斤20元，请输入您要购买的斤数：input id="bananaVolum"br
菠萝每斤20元，请输入您要购买的斤数：input id="pineappleVolum"button onclick="cal()"我买/buttonbr
信息:input id="msg"
/body
/html
html急急急!手写代码，实现如下效果：输入单价和数量后，点击“总价”按钮，即可计算出总价。
新建一个记事本，把以下代码拷贝进去，保存成.html文件就可以运行了
代码如下：
html
headtitle单价数量求和/title/head
body
table align="center" border="1" width="650"
trtd align="center" colspan="4"b订单/b/td/tr
tr
td align="center" width="50"b名称/b/td
td align="center" width="200"b单价/b/td
td align="center" width="200"b数量/b/td
td align="center" width="200"
input type="button" value="总价" onclick="pay();" /
/td
/tr
tr
td align="center"U盘/td
td align="center"input id="objectPrice" type="text" width="195" //td
td align="center"input id="objectNum" type="text" width="195" //td
td align="center"input id="objectPay" type="text" width="195" readOnly="true" //td
/tr
/table
script type="text/javascript"
function pay() {
var resultPrice = document.getElementById("objectPrice").value;
var resultNum = document.getElementById("objectNum").value;
if(resultPrice == "") {
alert("物品单价不能为空!");
document.getElementById("objectPay").value = "";
return false;
}
if(isNaN(resultPrice) || resultPrice 0) {
alert("非法的商品单价!");
document.getElementById("objectPay").value = "";
return false;
}
if(resultNum == "") {
alert("物品数量不能为空!");
document.getElementById("objectPay").value = "";
return false;
}
if(!checkNum(resultNum)) {
alert("非法的商品数量!");
document.getElementById("objectPay").value = "";
return false;
}
var resultPay = parseFloat(resultPrice)*parseInt(resultNum);
document.getElementById("objectPay").value = resultPay;
}
function checkNum(num) {
var re = /^\d+$/;
return re.exec(num) != null;
}
/script
/body
/html
用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。
html中的购物车的增减不能直接传送到后台，可以通过ajax，在js中发送ajax
纯前端的话可以参考下面的
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titlecart/title
style type="text/css"
body,p,a,input{
margin: 0;
padding: 0;
font-size: 12px;
}
.container{
width: 100%;
}
.main{
width: 1000px;
height: 500px;
margin:100px auto;
}
.main .cart-container table{
width: 100%;
}
.main .cart-container table tr{
text-align: center;
}
.main .cart-container table tr:hover{
background: rgba(128, 128, 128, 0.2);
}
.main .cart-container table .table-header{
height: 30px;
background: #d9d9d9;
font-size: 1.2em;
}
.main .cart-container table .table-header td:first-child{
border-left: solid 4px red;
box-sizing: border-box;
}
.main .cart-container table tr td:nth-child(1),
.main .cart-container table tr td:nth-child(2){
text-align: left;
}
.main .cart-container table tr td:nth-child(2){
width: 52%;
}
.main .cart-container table tr td:nth-child(3){
width: 12%;
}
.main .cart-container table tr td:nth-child(4){
width: 12%;
}
.main .cart-container table tr td:nth-child(5){
width: 12%;
}
.main .cart-container table tr td:last-child{
width: 10%;
}
.cart-good{
height: 60px;
}
.cart-good img{
float: left;
margin: 10px;
width: 60px;
}
.cart-good td p{
margin: 10px 0px;
}
/*加、减按钮*/
.cart-good td input[type='button']{
width: 20px;
height: 20px;
background: #00f300;
outline: none;
border: none;
}
.cart-good td input[type='button']:disabled{
background: grey;
}
.cart-good td input[type='button']:first-child{
margin-right: -4px;
}
.cart-good td input[type='button']:last-child{
margin-left: -4px;
}
.cart-good td input[type='text']{
width: 30px;
height: 20px;
outline: none;
border: none;
text-align: center;
}
.table-footer{
display: flex;
justify-content: space-between;
line-height: 40px;
}
.table-footer div{
font-size: 1.2em;
}
.table-footer div button{
background: red;
width: 120px;
height: 40px;
color: white;
}
/style
/head
body
div class="container"
header/header
section class="main"
div class="cart-container"
table cellspacing="0"
tr class="table-header"
tdinput type="checkbox" id="chk_alla"/td
td聚美优品发货/td
td聚美价/td
td数量/td
td小计/td
td操作/td
/tr
!--tr class="cart-good"--
!--tdinput type="checkbox" id="001"/td--
!--td--
!--img src="" alt=""--
!--p[极速免税]PITTA MASK 口罩3枚入/p--
!--p型号：新版防晒款 容量：3枚入/p--
!--/td--
!--td89.00/td--
!--td--
!--input type="button" value="-"--
!--input type="text" value="1"--
!--input type="button" value="+"--
!--/td--
!--td89.00/td--
!--tda href="#"删除/a/td--
!--/tr--
/table
div class="table-footer"
div
input type="checkbox" id="chk_allb" label for="chk_allb"全选/label
span style="margin-left: 20px"继续购物 | 清空选中商品/span
/div
div
共 span id="good_count"5/span件商品 商品应付总额：span id="goods_total"¥229.00/span
button class="btn_menu"去结算/button
/div
/div
/div
/section
/div
script
(function () {
var skin_products= [
{
"id":"002",
"title": "Estee Lauder 多效智妍精华霜15ml",
"img_url": "",
"price": 249.0,
"number":6,
"acount": "520",
"ischecked":true
},
{
"id":"004",
"title": "EsteeLauder 肌透修护洁面乳30ml",
"img_url": "",
"price": 49.9,
"number":1,
"acount": "5911",
"ischecked":false
},
{
"id":"008",
"title": "雅诗兰黛无痕持妆粉底液",
"img_url": "",
"price": 69.9,
"number":2,
"acount": "3972",
"ischecked":true
},
{
"id":"0012",
"title": "Estee Lauder 肌初赋活原生液30ml",
"img_url": "",
"price": 159.0,
"number":1,
"acount": "2338"
},
{
"id":"001",
"title": "雅诗兰黛无痕持妆粉底液30ml",
"img_url": "",
"price": 298.0,
"number":4,
"acount": "5071",
"ischecked":false
},
{
"id":"009",
"title": "雅诗兰黛眼部精华霜15ml",
"img_url": "",
"price": 399.0,
"number":1,
"acount": "4022",
"ischecked":false
}
]
// 添加商品
function load() {
var tbody=document.querySelector('.cart-container table tbody');
for(let good of skin_products){
tbody.innerHTML+=` tr class="cart-good" id="${good.id}"
tdinput type="checkbox" class="good-check" ${good.ischecked?"checked":''}/td
td
img src="${good.img_url}" alt=""
p[极速免税]PITTA MASK 口罩3枚入/p
p型号：新版防晒款 容量：3枚入/p
/td
td${good.price}/td
td
input type="button" value="-" ${good.number=1?"disabled":''}
input type="text" value="${good.number}"
input type="button" value="+"
/td
td${good.price*good.number}/td
tda href="#"删除/a/td
/tr`
}
totalAcount();
}
load();
// end all..........
// 1. 为table注册单击事件
var table01=document.querySelector('.cart-container table');
table01.onclick=function (event) {
var node=event.target
if(node.getAttribute('type')=='button'){
// alert(event.target.value);
changeNumber(event);
subtotal(event);
checkedRow(event);
checkedAllRows();
}else if(node.className=='good-check'){
checkedAllRows();
}else if(node.id=='chk_alla'){
var f=event.target.checked;
var chks=document.querySelectorAll('.good-check');
for(var ck of chks){
ck.checked=f;
}
for(var good of skin_products){
good.ischecked=f;
}
}else if(node.nodeName.toLowerCase()=='a'){
var tr=event.target.parentNode.parentNode;
for(var i=0;iskin_products.length;i++){
if(skin_products[i].id==tr.id){
skin_products.splice(i,1);
console.log(skin_products);
}
}
tr.parentNode.removeChild(tr);
}
totalAcount();
};
//单击增加或减少按钮的方法
function changeNumber(event) {
var node=event event.target;
var v=0;
if(node.value node.value=='+'){
// node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1;
node.previousElementSibling.value++;
v=node.previousElementSibling.value;
node.previousElementSibling.previousElementSibling.disabled=false;
}else{
// if(node.value node.value=='+')
if(node.nextElementSibling.value1){
node.nextElementSibling.value--;
v=node.nextElementSibling.value;
if(v==1){
node.disabled=true;
}
}
}
// 存储商品数量
var id=node.parentNode.parentNode.id;
for(var good of skin_products){
if(id==good.id){
good.number=v;
}
}
}
// 每个商品小计的方法
function subtotal(event) {
var node=event event.target;
// var id=node.parentNode.parentNode.id;
// for(var g of skin_products){
// if(g.id==id){
// alert(g.price);
// }
// }
// var price=；
var price=node.parentNode.previousElementSibling.innerText;
var num=node.parentNode.children[1].value;
node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2);
}
// 检验该商品是否选中
function checkedRow(event) {
event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true;
// event.target.parentNode.parentNode.cells[0].firstElementChild.checked=true;
// var tbody=event.target.parentNode.parentNode.parentNode;
// event.target.parentNode.parentNode.parentNode.rows[3].cells[0].firstElementChild.checked=true;
}
// 检查是否全选
function checkedAllRows() {
var chks=document.querySelectorAll('.good-check');
var flag=true;
for(var ck of chks){
if(!ck.checked){
flag=false;
break;
}
}
document.querySelector('#chk_alla').checked=flag;
}
// 统计商品总量和总价格
function totalAcount() {
var total=0;
var total_price=0;
var chks=document.querySelectorAll('.good-check');
for(var ck of chks){
if(ck.checked){
id=ck.parentNode.parentNode.id;
for(var good of skin_products){
if(id==good.id){
total+=~~good.number;
total_price=total_price+(good.number*good.price);
good.ischecked=true;
}
}
}
}
document.querySelector('#good_count').innerText=total;
document.querySelector('#goods_total').innerText=total_price;
}
})();
/script
/body
/html
html实现计算总价的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、html实现计算总价的信息别忘了在本站进行查找喔。
