目录
一，二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三级联动</title>
</head>
<body onload="fa()">
<!-- 定义下拉框 -->
<label>省份:</label>
<select id="sa" onchange="fb()">
<option>--请选择省份--</option>
</select>
<label>城市:</label>
<select id="sb">
<option>--请选择城市--</option>
</select>
</body>
<script type="text/javascript">
var cityList = new Array();
cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
cityList['江苏省'] = ['南京市','苏州市','无锡市'];
cityList['浙江省'] = ['杭州市','宁波市','温州市'];
cityList['四川省'] = ['四川省','成都市'];
cityList['海南省'] = ['海口市'];
cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
cityList['山东省'] = ['济南市','青岛市','烟台市'];
cityList['江西省'] = ['江西省','南昌市'];
cityList['广西省'] = ['柳州市','南宁市'];
cityList['安徽省'] = ['安徽省','合肥市'];
cityList['河北省'] = ['邯郸市','石家庄市'];
cityList['河南省'] = ['郑州市','洛阳市'];
cityList['湖北省'] = ['武汉市','宜昌市'];
cityList['湖南省'] = ['湖南省','长沙市'];
cityList['陕西省'] = ['陕西省','西安市'];
cityList['山西省'] = ['山西省','太原市'];
cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
cityList['其他'] = ['其他'];
/* 返回编号的方法*/
function $(id){
return document.getElementById(id);
}
/* 绑定省份*/
function fa(){
/* 获取城市下拉框编号*/
var sf= $("sa");
/* 遍历数组 */
for(i in cityList){
sf.add(new Option(i));
}
}
/* 改变城市*/
function fb(){
/* 获取城市编号*/
var cs=$("sb");
/* 清除原来选择的值*/
cs.length=0;
cs.add(new Option("--请选择城市--"));
/* 获取省份编号*/
var sf=$("sa").value;
/* 遍历数组*/
for(i in cityList){
if(sf==i){
for(j in cityList[i]){
cs.add(new Option(cityList[i][j]));
}
}
}
}
</script>
</html>
效果图
二，购物车实现全选商品，数量以及对应价格，删除商品功能
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝购物车页面</title>
<link href="css/myCart.css" type="text/css" rel="stylesheet" />
</head>
<body onload="fb()">
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看购物车</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 确认订单信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付宝</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 确认收货</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 评价</li>
<li class="navlist_gray_right"></li>
</ul>
</div>
<div id="content">
<table width="100%" border="0" cellspacing="0px" cellpadding="0" id="shopping">
<form action="" method="post" name="myform">
<tr>
<td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="fa()" />全选</td>
<td class="title_2" colspan="2">店铺宝贝</td>
<td class="title_3">获积分</td>
<td class="title_4">单价（元）</td>
<td class="title_5">数量</td>
<td class="title_6">小计（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg"
alt="relation" /></td>
</tr>
<tr id="product1"><td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td><td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping" /></td><td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />颜色：棕色 尺码：37<br />保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td><td class="cart_td_4">5</td><td class="cart_td_5">138.00</td><td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="fd('product1','jh')" class="hand" /><input id="num_1" type="text" value="1" class="num_input" readonly="readonly" /> <img src="images/taobao_adding.jpg"alt="add" onclick="fd('product1','jhs')" class="hand" /></td><td class="cart_td_7"></td><td class="cart_td_8"><a href="javascript:fc('product1')">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg"
alt="relation" /></td>
</tr>
<tr id="product2"><td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td><td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping" /></td><td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td><td class="cart_td_4">12</td><td class="cart_td_5">265.00</td><td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="fd('product2','jh')" class="hand" /><input id="num_2" type="text" value="1" class="num_input" readonly="readonly" /> <img src="images/taobao_adding.jpg"alt="add" onclick="fd('product2','jhs')" class="hand" /></td><td class="cart_td_7"></td><td class="cart_td_8"><a href="javascript:fc('product2')">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg"
alt="relation" /></td>
</tr>
<tr id="product3"><td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3" onclick="selectSingle()" /></td><td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping" /></td><td class="cart_td_3"><a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）</a><br />保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td><td class="cart_td_4">3</td><td class="cart_td_5">85.00</td><td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="fd('product3','jh')" class="hand" /><input id="num_3" type="text" value="1" class="num_input" readonly="readonly" /> <img src="images/taobao_adding.jpg"alt="add" onclick="fd('product3','jhs')" class="hand" /></td><td class="cart_td_7"></td><td class="cart_td_8"><a href="javascript:fc('product3')">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg"
alt="relation" /></td>
</tr>
<tr id="product4"><td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" onclick="selectSingle()" /></td><td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping" /></td><td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td><td class="cart_td_4">12</td><td class="cart_td_5">12.00</td><td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="fd('product4','jh')" class="hand" /><input id="num_4" type="text" value="2" class="num_input" readonly="readonly" /> <img src="images/taobao_adding.jpg"alt="add" onclick="fd('product4','jhs')" class="hand" /></td><td class="cart_td_7"></td><td class="cart_td_8"><a href="javascript:fc('product4')">删除</a></td>
</tr>
<tr>
<td colspan="3"><a href="javascript:deleteSelectRow()"><img src="images/taobao_del.jpg" alt="delete" /></a></td>
<td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
可获积分 <label class="yellow" id="integral"></label> 点<br />
<input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
</tr>
</form>
</table>
</div>
</body>
<script type="text/javascript" src="js/index.js"></script>
</html>
css文件
myCart.css
@charset "gb2312";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
ul,li,ol,h1,dl,dd{
list-style:none;
margin:0px;
padding:0px;
}
a{
color:#1965b3;
text-decoration: none;
}
a:hover{
color:#CD590C;
text-decoration:underline;
}
img{
border:0px;
vertical-align:middle;
}
#header{
height:40px;
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#nav{
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#navlist{
width:800px;
margin:0px auto 0px auto;
height:23px;
}
#navlist li{
float:left;
height:23px;
line-height:26px;
}
.navlist_red_left{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -92px;
width:3px;
}
.navlist_red{
background-color:#ff6600;
text-align:center;
font-size:14px;
font-weight:bold;
color:#FFF;
width:130px;
}
.navlist_red_arrow{
background-color:#ff6600;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray{
background-color:#e4e4e4;
text-align:center;
font-size:14px;
font-weight:bold;
width:150px;
}
.navlist_gray_arrow{
background-color:#e4e4e4;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray_right{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -138px;
width:3px;
}
#content{
width:800px;
margin:10px auto 5px auto;
clear:both;
}
.title_1{
text-align:center;
width:50px;
}
.title_2{
text-align:center;
}
.title_3{
text-align:center;
width:80px;
}
.title_4{
text-align:center;
width:80px;
}
.title_5{
text-align:center;
width:100px;
}
.title_6{
text-align:center;
width:80px;
}
.title_7{
text-align:center;
width:60px;
}
.line{
background-color:#a7cbff;
height:3px;
}
.shopInfo{
padding-left:10px;
height:35px;
vertical-align:bottom;
}
.num_input{
border:solid 1px #666;
width:25px;
height:15px;
text-align:center;
}
.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
background-color:#e2f2ff;
border-bottom:solid 1px #d1ecff;
border-top:solid 1px #d1ecff;
text-align:center;
padding:5px;
}
.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
border-right:solid 1px #FFF;
}
.cart_td_3{
text-align:left;
}
.cart_td_4{
font-weight:bold;
}
.cart_td_7{
font-weight:bold;
color:#fe6400;
font-size:14px;
}
.hand{
cursor:pointer;
}
.shopend{
text-align:right;
padding-right:10px;
padding-bottom:10px;
}
.yellow{
font-weight:bold;
color:#fe6400;
font-size:18px;
line-height:40px;
}css文件
register.css
@charset "gb2312";
/* CSS Document */
body,dl,dt,dd,div,form {padding:0;margin:0;}
#header,#main{
width:650px;
margin:0 auto;
}
.bg{
background-image:url(../images/register_bg.gif);
background-repeat:no-repeat;
width:6px;
height:6px;
}
.bg_top_left{
background-position:0px 0px;
}
.bg_top_right{
background-position:0px -6px;
}
.bg_end_left{
background-position:0px -12px;
}
.bg_end_right{
background-position:0px -18px;
}
.bg_top{
border-top:solid 1px #666666;
}
.bg_end{
border-bottom:solid 1px #666666;
}
.bg_left{
border-left:solid 1px #666666;
}
.bg_right{
border-right:solid 1px #666666;
}
.content{
padding:10px;
}
.inputs{
border:solid 1px #a4c8e0;
width:150px;
height:15px;
}
.userWidth{
width:110px;
}
.content div{
float:left;
font-size:12px;
color:#000;
}
dl{
clear:both;
}
dt,dd{
float:left;
}
dt{
width:130px;
text-align:right;
font-size:14px;
height:30px;
line-height:25px;
}
dd{
font-size:12px;
color:#666666;
width:180px;
}
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
border:solid 1px #ff3300;
background-color:#fff2e5;
background-image:url(../images/li_err.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
border:solid 1px #01be00;
background-color:#e6fee4;
background-image:url(../images/li_ok.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
js文件
index.js
/* 返回编号的方法 */
function $(id){
return document.getElementById(id);
}
/* 全选框的功能 */
function fa(){
/* 获取全选框的功能 */
var sa=$("allCheckBox");
/* 获取所有复选框的name属性的值 */
var sb=document.getElementsByName("cartCheckBox");
/* 遍历Name */
for(var i=0;i<sb.length;i++){
sb[i].checked=sa.checked;
}
}
/* 全选框最终版本 */
function fb(){
/* 获取所有name属性的值 */
var sa=document.getElementsByName("cartCheckBox");
/* 遍历name属性的值 */
for(var i=0;i<sa.length;i++){
sa[i].onclick=function(){
f=true;
for(var j=0;j<sa.length;j++){
if(sa[j].checked==false){
f=false;
break;
}
}
/* 赋值 */
$("allCheckBox").checked=f;
}
}
}
/* 删除功能 */
function fc(rid){/* 传入行的编号 */
/* 获取行编号 */
var sa=$(rid);
/* 获取行的下标 */
var sb=sa.rowIndex;
/* 获取要操作的表格编号 */
var sc=$("shopping");
/* 开始删除 */
sc.deleteRow(sb);
/* 删除这行当时也删除上一行 */
sc.deleteRow(sb-1);
}
/* 加减功能 */
function fd(rid,s){/* 传入行的编号 */
/* 获取行的编号 */
var sa=$(rid);
/* 获取行的所有单元格 */
var sb=sa.cells;
/* 获取下标为五的子节点 */
var sc=sb[5].childNodes;
/* 获取当前子节点第二个文本框 下标为1 */
var sd=sc[1];
/* 获取当前的值 */
var se=sd.value;
/* 判断是加号还是减号 */
if(s=='jh'){
if(se<=1){
alert("最小值为1")
return false;
}
se--;/* 递减 */
/* 赋值 */
sd.value=se;
}else{/* 否则是加号 */
/* 递增 */
se++;
/* 赋值 */
sd.value=se;
}
/* 获取下标为四的单元格的子节点的值乘数量 */
var sg=sb[4].innerHTML*se;
/* 单价乘数量 */
//var sh=sg*se;
/* 获取行的第六个子节点第一个的值 */
sb[6].innerHTML=sg;
}效果图
以上代码直接复制可用
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
