极客观点
项目管理
HarmonyOS
请问如何能在点击提交后实现下图呢？
我写的代码只能实现下图功能：
我的html代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link type="text/css" rel="stylesheet" href="../css/shop.css">
<script type="text/javascript" src="../js/shop.js" ></script>
</head>
<body>
<div id="father">
<div class="two">简易购物车</div>
<div class="one_F">
<ul class="one">
<li class="one1">商品名称</li>
<span class="fenli fenli1"></span>
<li class="one2">数量(件)</li>
<span class="fenli"></span>
<li class="one3 juli">单价(元)</li>
<span class="fenli"></span>
<li class="one4 juli1">运费(元)</li>
<span class="fenli"></span>
<li class="one5">合计(元)</li>
</ul>
</div>
<div>
<form name="myform" id="subBtn">
<ul class="one one_F">
<li class="one1">
<input type="text" id="shopN" value="诺基亚N95" onload="print" oninput="aa(event)" onporpertychange="aa(event)" />
</li>
<span class="fenli"></span>
<li class="one2">
<input type="text" name="num" id="shopNumber" value="1"/>
</li>
<span class="fenli"></span>
<li class="one3">
<input type="text" name="price" id="shopPrice" value=""/>
</li>
<span class="fenli"></span>
<li class="one4">
<input type="text" name="cost" id="shopFreight" value=""/>
</li>
<span class="fenli"></span>
<li class="one5">
<input type="text" name="amount" id="shopCount" value=""/>
</li>
</ul>
<ul class="one">
<li>
<input type="button" name="button" id="button" value="提交订单" onclick="cal()"/>
</li>
</ul>
</form>
</div>
<div class="third">
</div>
</div>
</body>
</html>
我的js代码是
window.onload = function() {
//获取商品名
var shopname= document.getElementById("shopN").value;
//判断商品名
if(shopname=="诺基亚N95"){
//获取商品数量
var shopNumber=document.getElementById("shopNumber").value;
//价格price
var price = 2200;
//将诺基亚N95产品价格赋值到input的value中
document.getElementById("shopPrice").value = price;
//同上可得，运费为
document.getElementById("shopFreight").value ="20";
//合计
var Count=shopNumber*price+20;
document.getElementById("shopCount").value = Count;
}else{
alert('没有该商品');
}
}
function cal(){
var num= parseInt(document.myform.num.value);
var price=parseFloat(document.myform.price.value);
var cost=parseFloat(document.myform.cost.value);
var amount=num*price+cost;
document.myform.amount.value=amount;
}我的css代码是
*{
margin: 0px;
padding:0px;
}
#father{
border:1px solid #000000 ;
width:420px;
margin:0px auto;
}
#father .two{
text-align: center;
font-weight:900;
border-bottom:1px solid #000000 ;
}
#father .one li{
display:inline-block;
list-style:none;
padding:0px 10px;
font-size:14px;
}
#father .one .one1{
padding-left:20px;
}
#father .one .fenli{
border-left:1px solid #000000;
padding:4px 0px;
}
#father .one .juli{
padding-left:14.5px;
}
#father .one .juli1{
padding-left:14.8px;
}
#father .one .fenli1{
padding-left:5px;
}
#father .one_F input{
width:56px;
outline:medium;
border: none;
}
#father .one_F{
border-bottom:1px solid #000000;
padding:3px 0px;
}
html5
JS代码:
html代码变更：