JavaScript兜兜网页练习
程序员文章站
2022-03-06 08:07:02
...
大家有想做一下这个小练习的,可以吧网页样式和CSS样式复制下来,还有图片,就可以自己尝试着做了
首先是兜兜网页的图片素材
然后是兜兜网页的样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>完善当当购物车页面</title>
<script>
</script>
<link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>
<div class="content">
<div class="logo">
<img src="images/dd_logo.jpg" ><span onclick="gb()">关闭</span>
</div>
<div class="cartList">
<ul>
<li id="jg0">¥21.90</li>
<li><input type="button" name="minus" value="-" onclick="jian(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="ja(0)"></li>
<li id="price0">¥21.90</li>
<li><p onclick="sc()">移入收藏</p><p onclick="de()">删除</p></li>
</ul>
<ul>
<li id="jg1">¥24.00</li>
<li><input type="button" name="minus" value="-" onclick="jian(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="ja(1)"></li>
<li id="price1">¥24.00</li>
<li><p onclick="sc()">移入收藏</p><p onclick="de()">删除</p></li>
</ul>
<ol>
<li id="totalPrice"> </li>
<li><span onclick="js()">结 算</span></li>
</ol>
</div>
</div>
</body>
</html>
兜兜网页的CSS样式
body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,li,ol{list-style: none;}
.content{width: 810px; margin: 0 auto; font-family: "微软雅黑";}
.logo{margin: 10px 0;}
.logo span{
display: inline-block;
float: right;
width: 60px;
height: 30px;
line-height: 30px;
font-size: 14px;
background: #ff0000;
color: #ffffff;
text-align: center;
border-radius: 10px;
margin-top: 5px;
margin-right: 10px;
cursor: pointer;
font-weight: bold;
}
.cartList{
background: url("../images/shoppingBg.jpg") no-repeat;
height: 414px;
overflow: hidden;
}
.cartList ul{
float: right;
width: 450px;
}
.cartList ul:nth-of-type(1){
margin-top: 125px;
}
.cartList ul:nth-of-type(2){
margin-top:70px;
}
.cartList ul li{
font-family: "微软雅黑";
font-size: 12px;
color: #666666;
text-align: center;
line-height: 25px;
float: left;
}
.cartList ul li input[name="price"]{
border: none;
background: transparent;
width: 45px;
text-align: center;
}
.cartList ul li input[name="amount"]{
width: 45px;
text-align: center;
border: 1px solid #999999;
border-left: none;
border-right: none;
height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
height: 25px;
border: 1px #999999 solid;
width: 25px;
text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{
float: right;
clear: both;
margin-top: 60px;
}
.cartList ol li{
float: left;
}
.cartList ol li:nth-of-type(1){
color: #ff0000;
width: 120px;
}
.cartList ol li span{display: inline-block;
float: right;
width: 80px;
height: 35px;
line-height: 35px;
font-size: 14px;
font-family: "微软雅黑";
background: #ff0000;
color: #ffffff;
text-align: center;
margin-top: 5px;
margin-right: 15px;
cursor: pointer;
font-weight: bold;}
下面就是今天的重点了,可以实现收藏,结算,加减,价格实时变化等功能
<script>
//关闭
function gb(){
close();
}
//移入收藏
function sc(){
var s=confirm("移入收藏后,将不再购物车展示,是否继续操作?");
if(s){
alert("移入收藏成功!");
}else{
alert("你已取消收藏!!");
}
}
//删除
function de(){
var s=confirm("确认删除此条信息吗?");
if(s){
alert("删除成功!");
}else{
alert("你已取消删除!!");
}
}
//结算
function js(){
//获取两本书的数量并转成数值类型
var z=parseInt(document.getElementsByName("amount")[0].value);
var w=parseInt(document.getElementsByName("amount")[1].value);
//获取两本书的价格
var d=document.getElementById("price0").innerHTML;
var x=document.getElementById("totalPrice").innerHTML;
//输出信息
var s=confirm("你本次购买的商品信息如下:\n\n商品名称:白岩松:白说,岛上书店;\n商品数量:"+(z+w)+"件\n商品总计:"+x+";\n运费:0元;\n\n请确认以上信息是否有误" );
//判断
if(s){
alert("你的订单已提交!");
}else{
alert("你已取消结算!!");
}
}
//加 n代表哪本书
function ja(n){
//获取加后的价格
var s=parseInt(document.getElementsByName("amount")[n].value)+1;
//赋值
document.getElementsByName("amount")[n].value=s;
//调价格函数
jg(n,s);
}
//减 n代表哪本书
function jian(n){
//获取减后的价格
var s=parseInt(document.getElementsByName("amount")[n].value)-1;
//判断
if(s<0){
alert("不能再减了");
}else{
//赋值
document.getElementsByName("amount")[n].value=s;
}
//调价格函数
jg(n,s);
}
//价格 n代表哪本书 s代表数量
function jg(n,s){
//判断是那本书
if(n==0){
//书的价格
var jg=21.90;
//加或减之后本书的总价格 保留小数点后两位数
document.getElementById("price0").innerHTML="¥"+(jg*s).toFixed(2);
}else{
//书的价格
var jg=24.00;
//加或减之后本书的总价格 保留小数点后两位数
document.getElementById("price1").innerHTML="¥"+(jg*s).toFixed(2);
}
//获取两本书的价格
var d=document.getElementById("price0").innerHTML;
var c=document.getElementById("price1").innerHTML;
//转成数值类型
d=parseInt(d.substring(1));
c=parseInt(c.substring(1));
//相加之后赋值 保留小数点后两位数
var x=document.getElementById("totalPrice").innerHTML=(d+c).toFixed(2);
}
</script>
认真看的大概都能看出在网页样式代码里有一对<script>标签里面什么都没有
没错,上面这些功能就是放到里面去的,多了一对<script>标签,想拷贝的朋友别忘了去掉