一、购物项目部分功能实现
1.CSS样式布局：
@charset "gb2312";
/* CSS Document */
/* global.css */
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:#333333;
text-decoration: none;
}
a:hover{
color:#333333;
text-decoration:underline;
}
img{
border:0px;
}
.blue{
color:#1965b3;
text-decoration:none;
}
.blue:hover{
color:#1965b3;
text-decoration:underline;
}
#header,#main,#footer{
width:960px;
margin:0px auto 0px auto;
clear:both;
float:none;
}
/*网页版权部分样式开始*/
.footer_top{
width:800px;
margin:0px auto 0px auto;
clear:both;
text-align:center;
}
.footer_top{
color:#9B2B0F;
}
.footer_dull_red,.footer_dull_red:hover{
color:#9B2B0F;
margin:0px 8px 0px 8px;
}
/*网页版权部分样式结束*/@charset "gb2312";
/* CSS Document */
/* layout.css */
/*首页样式*/
/*右侧随鼠标滚动的广告图片*/
.right{
top:50px;
right:30px;
position:absolute;
z-index:4;
text-align:right;
cursor:pointer;
}
.dd_close{
width:35px;
height:18px;
text-align:center;
border:solid 1px #999;
background-color:#E0E0E0;
position:absolute;
right:0px;
float:right;
z-index:5;
}
/*通栏广告样式*/
.dd_index_top_adver{
margin:5px 0px 5px 0px;
clear:both;
}
#catList,#content,#silder{
float:left;
}
#catList{
width:180px;
margin-right:10px;
margin-top:10px;
}
#content{
width:540px;
margin-right:10px;
}
#silder{
width:220px;
margin-top:10px;
}
.book_sort{
border:solid 1px #999;
margin-bottom:10px;
}
.book_sort_bg{
background-color:#fff0d9;
padding-left:10px;
color:#882D00;
font-size:14px;
height:25px;
font-weight:bold;
line-height:30px;
}
.book_sort_bottom{
margin:0px 10px 0px 10px;
line-height:25px;
border-bottom:solid 1px #666;
}
.book_cate{
padding:10px 0px 0px 10px;
font-weight:bold;
}
.scroll_top{
background-image:url(../images/dd_scroll_top.gif);
width:540px;
height:51px;
background-repeat:no-repeat;
}
.scroll_mid{
background-color:#f2f2f3;
border-left:solid 1px #d6d5d6;
border-right:solid 1px #d6d5d6;
width:533px;
padding:5px 0px 5px 5px;
}
#dd_scroll{ /*FF*/
float:none;
}
*html #dd_scroll{
float:left; /*IE6*/
}
*+html #dd_scroll{
float:left; /*IE7*/
}
#scroll_number{
float:right;
padding-right:10px;
}
#scroll_number li{
width:13px;
height:13px;
text-align:center;
border:solid 1px #999;
margin-top:5px;
font-size:12px;
line-height:16px;
cursor:pointer;
}
.scroll_number_out{
}
.scroll_number_over{
background-color:#F96;
color:#FFF;
}
.scroll_end{
background-image:url(../images/dd_scroll_end.gif);
width:540px;
height:8px;
background-repeat:no-repeat;
margin-bottom:10px;
}
.book_new{
background-image:url(../images/dd_book_bg.jpg);
background-repeat:repeat-x;
height:25px;
line-height:30px;
clear:both;
}
.book_left{
margin:0px 50px 0px 10px;
color:#882D00;
font-size:14px;
font-weight:bold;
float:left;
}
.book_type{
float:left;
margin-left:3px;
background-image:url(../images/dd_book_bg1.jpg);
background-repeat:no-repeat;
width:40px;
height:23px;
margin-top:2px;
text-align:center;
cursor:pointer;
}
.book_type_out{
float:left;
margin-left:3px;
background-image:url(../images/dd_book_bg2.jpg);
background-repeat:no-repeat;
width:40px;
height:23px;
margin-top:2px;
text-align:center;
color:#882D00;
font-weight:bold;
cursor:pointer;
}
.book_right{
float:right;
margin-right:5px;
}
.book_class{
clear:both;
margin:0px 5px 0px 5px;
}
#dome{
overflow:hidden; /*溢出的部分不显示*/
height:250px;
padding:5px;
}
#book_history dt,#book_family dt,#book_novel dt,#book_culture dt{
float:left;
width:90px;
text-align:center;
}
#book_history dd,#book_family dd,#book_novel dd,#book_culture dd{
float:left;
width:170px;
margin:0px 0px 5px 0px;
}
.book_none{
display:none;
}
.book_show{
display:block;
}
.book_title{
color:#1965b3;
font-size:14px;
}
.book_publish{
color:#C00;
}
#book_focus dt{
width:125px;
margin:5px 0px 0px 7px;
float:left;
text-align:center;
height:90px;
display:inline;
}
#book_focus dd{
width:125px;
margin:5px 0px 0px 7px;
float:left;
height:40px;
display:inline;
}
#express li{
height:25px;
border-bottom:dashed 1px #999;
margin:0px 5px 0px 5px;
line-height:28px;
}
.book_express_avder{
margin:5px 0px 5px 0px;
text-align:center;
}
.book_seven_title{
background-color:#518700;
color:#ffffff;
font-size:14px;
height:25px;
padding-left:10px;
line-height:28px;
}
.book_seven_border{
background-color:#f2f4df;
margin:3px;
}
.book_seven_top{
background-image:url(../images/dd_seven_bg.jpg);
background-repeat:repeat-x;
height:18px;
clear:both;
}
.book_seven_content{
border:solid 1px #bdc1c4;
border-top:0px;
clear:both;
padding:3px;
height:375px;
}
#book_seven_cate li{
float:right;
background-image:url(../images/dd_seven_bg1.jpg);
background-repeat:no-repeat;
width:35px;
height:18px;
text-align:center;
cursor:pointer;
}
#book_seven_cate li:hover{
float:right;
background-image:url(../images/dd_seven_bg2.jpg);
background-repeat:no-repeat;
width:35px;
height:18px;
text-align:center;
color:#882D00;
}
.book_seven_content_left{
float:left;
width:22px;
}
.book_seven_content_right{
width:175px;
float:left;
}
#book_seven_number dt{
height:85px;
}
#book_seven_number dd{
height:25px;
}
#book_seven_hearten dt{
width:55px;
text-align:center;
float:left;
}
#book_seven_hearten dd{
width:120px;
float:left;
height:85px;
}
#book_seven_hearten ul li{
line-height:24px;
}
/*网页版权部分样式开始*/
.footer_top,.footer_end{
width:800px;
margin:0px auto 0px auto;
clear:both;
text-align:center;
}
.footer_top{
color:#9B2B0F;
}
.footer_dull_red,.footer_dull_red:hover{
color:#9B2B0F;
margin:0px 8px 0px 8px;
}
/*网页版权部分样式结束*/
/*当当网商品展示页样式开始*/
.current_place{
padding-left:10px;
clear:both;
height:30px;
}
#product_left{
width:180px;
float:left;
}
#product_catList{
border:solid 1px #d3d3d3;
background-color:#fff4d7;
}
.product_catList_top{
color:#FFF;
height:23px;
font-size:14px;
padding-left:10px;
background-image:url(../images/product_left_top_bg.gif);
background-repeat:repeat-x;
line-height:28px;
margin-bottom:10px;
}
#product_catList_class li{
height:25px;
padding-left:10px;
}
.product_catList_end{
border:solid 1px #d3d3d3;
margin:10px 0px 10px 0px;
text-align:center;
}
#product_storyList{
border:solid 1px #a1a1a1;
float:right;
width:770px;
margin-bottom:20px;
}
#product_storyList_top{
background-color:#f9d8a9;
border-bottom:solid 1px #a1a1a1;
height:30px;
}
#product_storyList_top li{
float:left;
line-height:28px;
padding-left:5px;
}
#product_storyList_top img{
padding-top:5px;}
.product_storyList_content{
margin:20px 10px 20px 10px;
}
.product_storyList_content_bottom{
border-bottom:1px solid #666;
clear:both;
margin-bottom:20px;
}
.product_storyList_content_left{
width:100px;
text-align:center;
float:left;
}
.product_storyList_content_right{
float:left;
width:640px;
}
.product_storyList_content_dash{
border-bottom:dashed 1px #666;
}
.blue_14{
color:#1965b3;
font-size:14px;
text-decoration:none;
}
.blue_14:hover{
color:#1965b3;
text-decoration:underline;
font-size:14px;
}
.product_content_dd dd{
float:right;
padding-right:10px;
}
.product_content_delete{
text-decoration:line-through;
}
#product_page li{
float:left;
}
.product_page{
width:16px;
height:15px;
text-decoration:none;
float:left;
display: block;
background-color:#FC6;
margin:0px 3px 1px 0px;
text-align:center;
}
.product_page:hover{
width:16px;
height:15px;
text-decoration:none;
float:left;
display: block;
background-color:#900;
margin:0px 3px 1px 0px;
color:#FFF;
}
/*购物车页面样式开始*/
.shopping_commend{
background-image:url(../images/shopping_commend_bg.gif);
background-repeat:repeat-x;
height:21px;
border:solid 1px #999;
}
.shopping_commend_left{
float:left;
padding-left:10px;
}
.shopping_commend_right{
float:right;
padding-right:10px;
margin-top:3px;
}
.shopping_commend_right img{
cursor:pointer;
}
#shopping_commend_sort{
border:solid 1px #999;
border-top:0;
padding:5px 20px 5px 20px;
height:120px;
}
.shopping_commend_sort_left{
float:left;
width:450px;
}
.shopping_commend_sort_mid{
float:left;
width:15px;
background-image:url(../images/shopping_dotted.gif);
background-repeat:repeat-y;
height:120px;
}
.shopping_commend_list_1,.shopping_commend_list_2,.shopping_commend_list_3,.shopping_commend_list_4{
float:left;
height:30px;
line-height:30px;
}
.shopping_commend_list_1{
width:240px;
}
.shopping_commend_list_2{
width:70px;
text-align:center;
text-decoration:line-through;
color:#999;
}
.shopping_commend_list_3{
width:70px;
text-align:center;
}
.shopping_commend_list_4{
text-align:center;
width:65px;
}
.shopping_yellow{
color:#ED610C;
}
.shopping_yellow:hover{
color:#ED610C;
text-decoration:underline;
}
.shopping_list_top{
clear:both;
font-size:14px;
font-weight:bold;
margin-top:20px;
}
.shopping_list_border{
border:solid 2px #999;
}
.shopping_list_title{
background-color:#d8e4c6;
height:25px;
}
.shopping_list_title li{
float:left;
line-height:28px;
}
.shopping_list_title_1{
width:420px;
padding-left:30px;
text-align:left;
}
.shopping_list_title_2{
width:120px;
text-align:center;
}
.shopping_list_title_3{
width:120px;
text-align:center;
}
.shopping_list_title_4{
width:120px;
text-align:center;
}
.shopping_list_title_5{
width:70px;
text-align:center;
}
.shopping_list_title_6{
width:70px;
text-align:center;
}
.shopping_product_list{
background-color:#fefbf2;
height:40px;
}
.shopping_product_list input{
width:30px;
height:15px;
border:solid 1px #666;
text-align:center;
}
.shopping_product_list td{
line-height:35px;
border-bottom:dashed 1px #CCC;
}
.shopping_product_list_1{
width:420px;
padding-left:30px;
text-align:left;
}
.shopping_product_list_2{
width:120px;
text-align:center;
color:#464646;
}
.shopping_product_list_3{
width:120px;
text-align:center;
color:#464646;
}
.shopping_product_list_4{
width:120px;
text-align:center;
color:#191919;
}
.shopping_product_list_5{
width:70px;
text-align:center;
}
.shopping_product_list_6{
width:70px;
text-align:center;
}
.shopping_list_end{
background-color:#cddbb8;
height:60px;
}
.shopping_list_end li{
float:right;
}
.shopping_list_end_1{
margin:10px 10px 0px 10px;
}
.shopping_list_end_2{
font-weight:bold;
color:#BD3E00;
font-size:14px;
margin:15px 10px 0px 0px;
}
.shopping_list_end_3{
font-weight:bold;
font-size:14px;
margin:15px 0px 0px 15px;
}
.shopping_list_end_4{
border-right:solid 1px #666666;
margin:10px 0px 0px 15px;
padding-right:10px;
}
.shopping_list_end_yellow{
color:#BD3E00;
}
/*注册页面样式*/
#register_header{
background-image:url(../images/register_head_bg.gif);
background-repeat:repeat-x;
height:48px;
border:solid 1px #CCC;
}
.register_header_left{
float:left;
margin:7px 0px 0px 40px;
display:inline;
}
.register_header_right{
float:right;
margin:25px 20px 0px 0px;
display:inline;
}
.register_content{
width:950px;
margin:15px auto 15px auto;
}
.register_top_bg{
background-image:url(../images/register_top_bg.gif);
background-repeat:no-repeat;
height:5px;
}
.register_mid_bg{
border:solid 1px #a3a3a3;
border-top:0px;
height:32px;
}
.register_mid_bg li{
float:left;
}
.register_mid_left{
background-image:url(../images/register_tag_left.gif);
height:32px;
width:207px;
background-repeat:no-repeat;
padding:0px 0px 0px 106px;
font-size:14px;
color:#501500;
font-weight:bold;
line-height:35px;
}
.register_mid_mid{
background-image:url(../images/register_tag_mid.gif);
height:32px;
width:204px;
background-repeat:no-repeat;
padding:0px 0px 0px 115px;
font-size:14px;
line-height:35px;
}
.register_mid_right{
background-image:url(../images/register_tag_right.gif);
height:32px;
width:316px;
background-repeat:no-repeat;
font-size:14px;
line-height:35px;
text-align:center;
}
.register_top_bg_two_left{
float:left;
background-image:url(../images/register_cont.gif);
width:1px;
height:406px;
background-repeat:no-repeat;
}
.register_top_bg_two_right{
float:right;
background-image:url(../images/register_cont.gif);
width:1px;
height:406px;
background-repeat:no-repeat;
}
.register_top_bg_mid{
background-image:url(../images/register_shadow.gif);
background-repeat:repeat-x;
}
.register_title_bg{
background-image:url(../images/register_pic_01.gif);
background-position:123px 30px;
background-repeat:no-repeat;
padding:42px 0px 0px 202px;
color:#C30;
}
.register_dotted_bg{
background-image:url(../images/register_dotted.gif);
background-repeat:repeat-x;
height:1px;
margin:0px 20px 20px 20px;
}
.register_message{
float:left;
}
.register_row{
clear:both;
}
.register_row dt{
float:left;
width:200px;
height:30px;
text-align:right;
font-size:14px;
}
.register_row dd{
float:left;
margin-right:5px;
display:inline;
}
.register_input{
width:200px;
height:18px;
border:solid 1px #999;
margin:0px 0px 8px 0px;
}
.registerBtn{
height:35px;
margin:10px 0px 10px 200px;
clear:both;
}
/*注册页面提示样式*/
.register_input_Blur{
background-color:#fef4d0;
width:200px;
height:18px;
border:solid 1px #999;
margin:0px 0px 8px 0px;
}
.register_input_Focus{
background-color:#f1ffde;
width:200px;
height:18px;
border:solid 1px #999;
margin:0px 0px 8px 0px;
}
.register_prompt{
font-size:12px;
color:#999;
}
.register_prompt_error{
font-size:12px;
color:#C8180B;
border:solid 1px #999;
background-color:#fef4d0;
padding:0px 5px 0px 5px;
height:18px;
}
.register_prompt_ok{
background-image:url(../images/register_write_ok.gif);
background-repeat:no-repeat;
width:15px;
height:11px;
margin:5px 0px 0px 5px;
}
/*登录页面样式*/
.login_header_left{
float:left;
margin:30px 10px 0px 100px;
}
.login_header_mid{
float:left;
margin:55px 0px 0px 0px;
}
.login_header_right{
float:right;
margin:50px 60px 0px 0px;
}
.login_main_left{
float:left;
}
.login_main_left img{
float:left;
border:0px;
}
.login_main_end{
margin:0px 0px 0px 30px;
width:540px;
}
.login_green{
margin:20px 0px 20px 0px;
float:left;
width:150px;
}
.login_green dt{
color:#519403;
font-weight:bold;
}
.login_green dd{
color:#666666;
line-height:25px;
}
.login_main_dotted{
float:left;
background-image:url(../images/shopping_dotted.gif);
width:1px;
height:90px;
margin:20px 15px 20px 15px;
}
.login_main_mid{
border:solid 1px #666;
float:left;
width:300px;
padding:10px 5px 10px 5px;
}
.login_main_right{
float:left;
width:74px;
}
.login_main_right img{
border:0px;
}
.login_content_top{
background-image:url(../images/login_icon_bg_01.gif);
background-position:-300px -30px;
background-repeat:no-repeat;
padding:10px 0px 0px 35px;
font-weight:bold;
font-size:14px;
color:#900;
}
.login_content_line{
background-image:url(../images/login_icon_bg_02.gif);
background-position:0px -195px;
background-repeat:repeat-x;
height:3px;
margin:0px 0px 30px 0px;
}
.login_content{
clear:both;
margin:10px 0px 0px 0px;
}
*html .login_content{/*IE6*/
display:inline;
}
*+html .login_content{/*IE7*/
display:inline;
}
.login_content dt{
font-size:14px;
height:30px;
text-align:right;
width:150px;
float:left;
}
.login_content dd{
float:left;
}
.login_content_input{
width:120px;
height:16px;
border:solid 1px #999;
}
.login_content_input_Focus{
background-color:#f1ffde;
width:120px;
height:16px;
border:solid 1px #999;
}
.login_btn_out{
background-image:url(../images/login_icon_bg_01.gif);
background-position:0px -30px;
background-repeat:no-repeat;
width:77px;
height:26px;
border:0px;
cursor:pointer;
}
.login_btn_over{
background-image:url(../images/login_icon_bg_01.gif);
background-position:-78px -30px;
background-repeat:no-repeat;
width:77px;
height:26px;
border:0px;
cursor:pointer;
}
.login_content_dotted{
background-image:url(../images/register_dotted.gif);
height:1px;
background-repeat:repeat-x;
margin:60px 0px 0px 0px;
overflow:hidden; /*使div的高度为1px*/
}
.login_content_end_bg{
background-image:url(../images/login_icon_bg_02.gif);
background-repeat:repeat-x;
background-position:0px 0px;
padding:10px 20px 10px 20px;
}
.login_content_end_bg_top{
clear:both;
}
.login_content_bold{
font-weight:bold;
color:#333;
}
.login_content_end_bg_end{
clear:both;
text-align:right;
padding:10px;
}
.login_register_out{
background-image:url(../images/login_icon_bg_01.gif);
background-position:0px -3px;
background-repeat:no-repeat;
width:144px;
height:26px;
border:0px;
cursor:pointer;
}
.login_register_over{
background-image:url(../images/login_icon_bg_01.gif);
background-position:-144px -3px;
background-repeat:no-repeat;
width:144px;
height:26px;
border:0px;
cursor:pointer;
}@charset "gb2312";
/* CSS Document */
/* template.css */
/*网页头部导航样式开始*/
.header_top,.header_middle,.header_search{
margin-left:auto;
margin-right:auto;
width:955px;
clear:both;
}
.header_top{
border:solid 1px #999;
background-image:url(../images/dd_header_bg.gif);
background-repeat:repeat-x;
height:24px;
}
.header_top_left{
float:left;
width:260px;
padding-left:10px;
line-height:28px;
}
*html .header_top_left{ /*only IE6*/
line-height:24px;
}
.header_top_right{
float:right;
padding-right:10px;
width:400px;
text-align:right;
}
.header_top_right li{
float:right;
margin-left:5px;
margin-top:5px;
}
.logo,.menu_left,.menu_right{
float:left;
}
.logo{
width:130px;
padding-top:13px;
height:47px;
}
.menu_left{
height:28px;
padding-top:32px;
line-height:35px;
width:510px;
}
*html .menu_left{ /*only IE6*/
line-height:28px;
}
#menu_left_bold li{
float:left;
background-image:url(../images/dd_head_bg_mid.gif);
height:28px;
background-repeat:repeat-x;
padding:0px 3px 0px 3px;
}
.bold,.bold:hover{
font-weight:bold;
}
.menu_left_first{
background-image:url(../images/dd_head_bg_left.gif);
background-repeat:no-repeat;
background-position:0px 0px;
height:28px;
width:4px;
float:left;
}
.menu_left_end{
background-image:url(../images/dd_head_bg_right.gif);
background-repeat:no-repeat;
background-position:0px 0px;
height:28px;
width:4px;
float:left;
}
.menu_right{
padding-top:32px;
height:28px;
}
#menu_dull_red li{
float:left;
margin-left:5px;
text-align:center;
line-height:35px;
height:28px;
}
*html #menu_dull_red li{ /*only IE6*/
line-height:28px;
}
#menu_dull_red a,#menu_dull_red:hover{
color:#9B2B0F;
text-decoration:none;
font-weight:bold;
}
.menu_right_1{
background-image:url(../images/dd_header_1_a.jpg);
width:52px;
background-repeat:no-repeat;
}
.menu_right_2{
background-image:url(../images/dd_header_2_a.jpg);
width:39px;
background-repeat:no-repeat;
}
.menu_right_3{
background-image:url(../images/dd_header_3_a.jpg);
width:65px;
background-repeat:no-repeat;
}
.menu{
clear:both;
}
#menu_white{
float:left;
background-image:url(../images/dd_head_bg_mid.gif);
background-repeat:repeat-x;
background-position:0px -63px;
height:27px;
width:99%;
line-height:28px;
text-align:center;
color:#FFF;
}
.menu_mid_white,.menu_mid_white:hover{
color:#FFF;
padding:0px 4px 0px 4px;
}
.menu_first{
background-image:url(../images/dd_head_bg_left.gif);
background-repeat:no-repeat;
background-position:0px -31px;
height:27px;
width:4px;
float:left;
}
.menu_end{
background-image:url(../images/dd_head_bg_right.gif);
background-repeat:no-repeat;
background-position:0px -31px;
height:27px;
width:4px;
float:left;
}
.header_search{
padding-top:2px;
}
.header_serach_left,.header_serach_mid,.header_serach_right{
float:left;
height:35px;
}
.header_serach_left{
background-image:url(../images/dd_head_bg_left.gif);
background-repeat:no-repeat;
background-position:0px -58px;
width:4px;
}
.header_serach_mid{
background-image:url(../images/dd_head_bg_mid.gif);
background-repeat:repeat-x;
background-position:0px -28px;
width:99%;
}
.header_serach_right{
background-image:url(../images/dd_head_bg_right.gif);
background-repeat:no-repeat;
background-position:0px -58px;
width:4px;
}
#header_serach_mid_menu li{
float:left;
margin-top:6px;
padding:0px 5px 0px 5px;
line-height:25px;
}
.header_input_search{
margin-left:15px;
width:200px;
height:18px;
}
.header_secrch_btn{
}
/*网页头部导航样式结束*/
/*网页版权部分样式开始*/
.footer_top,.footer_end{
width:800px;
margin:0px auto 0px auto;
clear:both;
text-align:center;
}
.footer_top{
color:#9B2B0F;
}
.footer_dull_red,.footer_dull_red:hover{
color:#9B2B0F;
margin:0px 8px 0px 8px;
}
/*网页版权部分样式结束*/
/*导航部分下拉菜单样式*/
#dd_menu_top_down{
position:absolute;
width:80px;
text-align:left;
border:solid 1px #999;
border-top:0px;
display:none;
background-color:#FFF;
padding-left:10px;
}
*html #dd_menu_top_down{/*only IE6*/
right:30px;
top:25px;
}
*+html #dd_menu_top_down{/*only IE7*/
right:30px;
top:25px;
}
#dd_menu_top_down li{
float:none;
}2.HTML代码：
<!DOCTYPE html>
<html>
<head>
<!-- header.html -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>当当网站导航部分</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/template.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
//当当网
function myddang_show(elementId) {
document.getElementById(elementId).style.display = "block";
}
function myddang_hidden(elementId) {
document.getElementById(elementId).style.display = "none";
}
</script>
<body>
<!--顶部开始-->
<div class="header_top">
<div class="header_top_left">您好！欢迎光临当当网 [<a href="login.html" target="_parent">登录</a> | <a
href="register.html" target="_parent">免费注册</a>]</div>
<div class="header_top_right">
<ul>
<li><a href="#" target="_self">帮助</a></li>
<li>|</li>
<li onmouseover="myddang_show('dd_menu_top_down')" onmouseout="myddang_hidden('dd_menu_top_down')">
<a href="#" target="_self">我的当当</a> <img src="images/dd_arrow_down.gif" alt="arrow" />
<div id="dd_menu_top_down">
<a href="#" target="_self">我的订单</a><br />
<a href="#" target="_self">账户余额</a><br />
<a href="#" target="_self">购物礼券</a><br />
<a href="#" target="_self">我的会员积分</a><br />
</div>
<li><a href="#" target="_self">团购</a></li>
<li>|</li>
<li><a href="#" target="_self">礼品卡</a></li>
<li>|</li>
<li><a href="#" target="_self">个性化推荐</a></li>
<li>|</li>
<li><a href="shopping.html" target="_parent">购物车</a></li>
<li><img src="images/dd_header_shop.gif" alt="shopping" /></li>
</ul>
</div>
</div>
<!--导航开始-->
<div class="header_middle">
<div class="logo"><img src="images/dd_logo.gif" alt="logo" /></div>
<div class="menu_left">
<dl>
<dd class="menu_left_first"></dd>
</dl>
<ul id="menu_left_bold">
<li><a href="index.html" target="_parent" class="bold">首页</a></li>
<li>|</li>
<li><a href="product.html" target="_parent" class="bold">图书</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">音乐</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">影视</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">运动</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">服饰</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">家居</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">美妆</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">母婴</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">食品</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">数码家电</a></li>
</ul>
<dl>
<dd class="menu_left_end"></dd>
</dl>
</div>
<div class="menu_right" id="menu_dull_red">
<ul>
<li class="menu_right_1"><a href="#" target="_self">商店街</a></li>
<li class="menu_right_2"><a href="#" target="_self">促销</a></li>
<li class="menu_right_3"><a href="#" target="_self">当当<img src="images/dd_header_top.png"
alt="榜" /></a></li>
<li class="menu_right_2"><a href="#" target="_self">社区</a></li>
<li class="menu_right_3"><a href="#" target="_self">在线读书</a></li>
</ul>
</div>
<div class="menu">
<div class="menu_first"></div>
<div id="menu_white">
<a href="#" target="_self" class="menu_mid_white">小说</a>|
<a href="#" target="_self" class="menu_mid_white">青春</a>|
<a href="#" target="_self" class="menu_mid_white">历史</a>|
<a href="#" target="_self" class="menu_mid_white">保健</a>|
<a href="#" target="_self" class="menu_mid_white">少儿</a>|
<a href="#" target="_self" class="menu_mid_white">旅游</a>|
<a href="#" target="_self" class="menu_mid_white">期刊</a>|
<a href="#" target="_self" class="menu_mid_white">图书畅销榜</a>|
<a href="#" target="_self" class="menu_mid_white">新书热卖榜</a>|
<a href="#" target="_self" class="menu_mid_white">特价书</a>|
<a href="#" target="_self" class="menu_mid_white">图书促销</a>|
<a href="#" target="_self" class="menu_mid_white">所有图书分类</a>
</div>
<div class="menu_end"></div>
</div>
</div>
<!--搜索开始-->
<div class="header_search">
<div class="header_serach_left"></div>
<div class="header_serach_mid">
<ul id="header_serach_mid_menu">
<li><input id="header_serach" type="text" class="header_input_search" /></li>
<li><input type="image" class="header_secrch_btn" src="images/dd_header_search_btn.jpg" /></li>
<li><img src="images/dd_arrow_right.gif" alt="arrow" /> <a href="#" target="_self">高级搜索</a></li>
<li>|</li>
<li><img src="images/dd_header_search_top.jpg" alt="搜索风云榜" /></li>
<li><a href="#" target="_self">雅思</a></li>
<li>|</li>
<li><a href="#" target="_self">建造师</a></li>
<li>|</li>
<li><a href="#" target="_self">中里巴人</a></li>
<li>|</li>
<li><a href="#" target="_self">注会</a></li>
<li>|</li>
<li><a href="#" target="_self">新概念英语</a></li>
<li>|</li>
<li><a href="#" target="_self">更多>></a></li>
</ul>
</div>
<div class="header_serach_right"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- idex.html -->
<meta charset="utf-8" />
<title>当当网首页</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
/*循环显示的轮换横幅广告*/
/*循环显示的图片地址*/
var scorll_img = new Array();
scorll_img[0] = "images/dd_scroll_1.jpg";
scorll_img[1] = "images/dd_scroll_2.jpg";
scorll_img[2] = "images/dd_scroll_3.jpg";
scorll_img[3] = "images/dd_scroll_4.jpg";
scorll_img[4] = "images/dd_scroll_5.jpg";
scorll_img[5] = "images/dd_scroll_6.jpg";
/*按钮的ID编号*/
var scroll_number = new Array();
scroll_number[0] = "scroll_number_1";
scroll_number[1] = "scroll_number_2";
scroll_number[2] = "scroll_number_3";
scroll_number[3] = "scroll_number_4";
scroll_number[4] = "scroll_number_5";
scroll_number[5] = "scroll_number_6";
var NowFrame = 1; //最先显示第一张图片
var MaxFrame = 6; //一共六张图片
function loopShow(d1) {
if (Number(d1)) {
NowFrame = d1; //设当前显示图片
}
for (var i = 1; i < (MaxFrame + 1); i++) {
if (i == NowFrame) {
document.getElementById("dd_scroll").src = scorll_img[i - 1]; //显示当前图片
document.getElementById(scroll_number[i - 1]).className = "scroll_number_over"; //设置当前按钮的CSS样式
} else {
document.getElementById(scroll_number[i - 1]).className = "scroll_number_out";
}
}
if (NowFrame == MaxFrame) { //设置下一个显示的图片
NowFrame = 1;
} else {
NowFrame++;
}
//var theTimer=setTimeout('loopShow()', 3000); //设置定时器，显示下一张图片
}
var theTimer = setInterval('loopShow()', 3000); //设置定时器，显示下一张图片
/*最新上架版块TAB切换效果*/
var bookCate = new Array();
bookCate[0] = "book_history";
bookCate[1] = "book_family";
bookCate[2] = "book_culture";
bookCate[3] = "book_novel";
var bookClass = new Array();
bookClass[0] = "history";
bookClass[1] = "family";
bookClass[2] = "culture";
bookClass[3] = "novel";
function bookPutUp(elementId) {
for (var i = 0; i < bookCate.length; i++) {
if (elementId == i) {
document.getElementById(bookCate[i]).className = "book_show";
document.getElementById(bookClass[i]).className = "book_type_out";
} else {
document.getElementById(bookCate[i]).className = "book_none";
document.getElementById(bookClass[i]).className = "book_type";
}
}
}
/*右侧随鼠标滚动的广告图片关闭*/
function dd_close() {
var objRight = document.getElementById("right");
objRight.style.display = "none";
}
/*首页弹出广告窗口*/
window.open('open.html','','top=0,left=200,width=500,height=327,scrollbars=0,resizable=0');
</script>
<body>
<div id="right" class="right">
<div class="dd_close" id="dd_close"><a href="javascript:dd_close();">关闭</a></div>
<img src="images/dd_scroll.jpg" id="right1" />
</div>
<div id="header"><iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe></div>
<!--网站中间内容开始-->
<div id="main">
<div class="dd_index_top_adver"><img src="images/dd_index_top_adver.jpg" alt="通栏广告图片" /></div>
<!--左侧菜单开始-->
<div id="catList">
<!--推荐分类-->
<div class="book_sort">
<div class="book_sort_bg">推荐分类</div>
<div class="book_sort_bottom" style="border-bottom:0px;">外语 | 中小学教辅 |</div>
</div>
<!--图书商品分类开始-->
<div class="book_sort">
<div class="book_sort_bg"><img src="images/dd_book_cate_icon.gif" alt="图书" /> 图书商品分类</div>
<div class="book_cate">[小说]</div>
<div class="book_sort_bottom">悬疑 | 言情 | 职场 | 财经</div>
<div class="book_cate">[文艺]</div>
<div class="book_sort_bottom">文学 | 传记 | 艺术 | 摄影</div>
<div class="book_cate">[青春]</div>
<div class="book_sort_bottom">青春文学 | 动漫 | 幽默</div>
<div class="book_cate">[励志/成功]</div>
<div class="book_sort_bottom">修养 | 成功 | 职场 | 沟通</div>
<div class="book_cate">[少儿]</div>
<div class="book_sort_bottom">0-2 | 3-6 | 7-10 | 11-14<br />文学 | 科普 | 图画书</div>
<div class="book_cate">[生活]</div>
<div class="book_sort_bottom">保健 | 家教 | 美丽装扮 | 育儿 | 美食 | 旅游 | 收藏 | 生活 | 体育 | 地图 | 个人理财</div>
<div class="book_cate">[个人社科]</div>
<div class="book_sort_bottom">文化 | 历史 | 哲学/宗教 | 古籍 | 政治/历史 | 法律 | 经济 | 社会科学 | 心理学</div>
<div class="book_cate">[管理]</div>
<div class="book_sort_bottom">管理 | 金融 | 营销 | 会计</div>
<div class="book_cate">[科技]</div>
<div class="book_sort_bottom">科普 | 建筑 | 医学 | 计算机 | 农林 | 自然科学 | 工业 | 通信</div>
<div class="book_cate">[教育]</div>
<div class="book_sort_bottom">教材 | 中小学教辅 | 外语</div>
<div class="book_cate">[工具书]</div>
<div class="book_cate">[图外原版书]</div>
<div class="book_cate">[期刊]</div>
</div>
<!--图书商品分类结束-->
</div>
<!--左侧菜单结束-->
<!--中间部分开始-->
<div id="content">
<!--轮换显示的横幅广告图片-->
<div class="scroll_top"></div>
<div class="scroll_mid"><img src="images/dd_scroll_2.jpg" alt="轮换显示的图片广告" id="dd_scroll" />
<div id="scroll_number">
<ul>
<li id="scroll_number_1" onmouseover="loopShow(1)">1</li>
<li id="scroll_number_2" onmouseover="loopShow(2)">2</li>
<li id="scroll_number_3" onmouseover="loopShow(3)">3</li>
<li id="scroll_number_4" onmouseover="loopShow(4)">4</li>
<li id="scroll_number_5" onmouseover="loopShow(5)">5</li>
<li id="scroll_number_6" onmouseover="loopShow(6)">6</li>
</ul>
</div>
</div>
<div class="scroll_end"></div>
<!--最新上架开始-->
<!-- 书架 -->
<div class="book_sort">
<div class="book_new">
<div class="book_left">最新上架</div>
<div class="book_type" id="history" onmouseover="bookPutUp(0)">历史</div>
<div class="book_type" id="family" onmouseover="bookPutUp(1)">家教</div>
<div class="book_type" id="culture" onmouseover="bookPutUp(2)">文化</div>
<div class="book_type" id="novel" onmouseover="bookPutUp(3)">小说</div>
<div class="book_right"><a href="#">更多>></a></div>
</div>
<div class="book_class" style="height:250px;">
<!--历史-->
<dl id="book_history">
<dt><img src="images/dd_history_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">《中国时代》（上）</font><br />
作者：师永刚，邹明 主编 <br />
出版社：作家出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥39.00<br />
当当价：￥27.00
</dd>
<dt><img src="images/dd_history_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">中国历史的屈辱</font><br />
作者：王重旭 著 <br />
出版社：华夏出版社 <br />
<font class="book_publish">出版时间：2009年11月</font><br />
定价：￥26.00<br />
当当价：￥18.20
</dd>
<dt><img src="images/dd_history_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">《中国时代》（下）</font><br />
作者：师永刚，邹明 主编 <br />
出版社：作家出版社 <br />
<font class="book_publish"> 出版时间：2009年10月</font><br />
定价：￥38.00<br />
当当价：￥26.30
</dd>
<dt><img src="images/dd_history_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">大家国学十六讲</font><br />
作者：张荫麟，吕思勉 著 <br />
出版社：中国友谊出版公司 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥19.80<br />
当当价：￥13.70
</dd>
</dl>
<!--家教-->
<dl id="book_family" class="book_none">
<dt><img src="images/dd_family_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">嘿，我知道你</font><br />
作者：兰海 著 <br />
出版社：中国妇女出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.80<br />
当当价：￥17.90
</dd>
<dt><img src="images/dd_family_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">择业要趁早</font><br />
作者：（美）列文<br />
出版社：海天出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥19.30
</dd>
<dt><img src="images/dd_family_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">爷爷奶奶的“孙子兵法”</font><br />
作者：伏建全 编著 <br />
出版社：地震出版社 <br />
<font class="book_publish"> 出版时间：2009年8月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
<dt><img src="images/dd_family_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">1分钟读懂孩子心理</font><br />
作者：海韵 著 <br />
出版社：朝华出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
</dl>
<!--文化-->
<dl id="book_culture" class="book_none">
<dt><img src="images/dd_culture_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">嘿，我知道你</font><br />
作者：兰海 著 <br />
出版社：中国妇女出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.80<br />
当当价：￥17.90
</dd>
<dt><img src="images/dd_culture_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">择业要趁早</font><br />
作者：（美）列文 <br />
出版社：海天出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥19.30
</dd>
<dt><img src="images/dd_culture_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">爷爷奶奶的“孙子兵法”</font><br />
作者：伏建全 编著 <br />
出版社：地震出版社 <br />
<font class="book_publish"> 出版时间：2009年8月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
<dt><img src="images/dd_culture_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">1分钟读懂孩子心理</font><br />
作者：海韵 著 <br />
出版社：朝华出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
</dl>
<!--小说-->
<dl id="book_novel" class="book_none">
<dt><img src="images/dd_novel_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">嘿，我知道你</font><br />
作者：兰海 著 <br />
出版社：中国妇女出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.80<br />
当当价：￥17.90
</dd>
<dt><img src="images/dd_novel_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">择业要趁早</font><br />
作者：（美）列文 <br />
出版社：海天出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥19.30
</dd>
<dt><img src="images/dd_novel_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">爷爷奶奶的“孙子兵法”</font><br />
作者：伏建全 编著 <br />
出版社：地震出版社 <br />
<font class="book_publish"> 出版时间：2009年8月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
<dt><img src="images/dd_novel_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">1分钟读懂孩子心理</font><br />
作者：海韵 著 <br />
出版社：朝华出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
</dl>
</div>
</div>
<!--重点关注-->
<div class="book_sort">
<div class="book_new">
<div class="book_left">重点关注</div>
</div>
<div class="book_class" style="height:380px;">
<dl id="book_focus">
<dt><img src="images/dd_focus_1.jpg" alt="focus" /></dt>
<dt><img src="images/dd_focus_2.jpg" alt="focus" /></dt>
<dt><img src="images/dd_focus_3.jpg" alt="focus" /></dt>
<dt><img src="images/dd_focus_4.jpg" alt="focus" /></dt>
<dd><a href="#" class="blue">郑玉巧育儿经·幼儿卷</a></dd>
<dd><a href="#" class="blue">蹦蹦和跳跳的故事(全10册)</a></dd>
<dd><a href="#" class="blue">人体自有大药(让每一个人都能变成...</a></dd>
<dd><a href="#" class="blue">特效穴位使用手册</a></dd>
<dd>定价：￥49.80<br />
当当价：￥32.00</dd>
<dd>定价：￥50.00<br />
当当价：￥33.00</dd>
<dd>定价：￥29.00<br />
当当价：￥19.40</dd>
<dd>定价：￥29.00<br />
当当价：￥19.40</dd>
<dt><img src="images/dd_focus_5.jpg" alt="focus" /></dt>
<dt><img src="images/dd_focus_6.jpg" alt="focus" /></dt>
<dt><img src="images/dd_focus_7.jpg" alt="focus" /></dt>
<dt><img src="images/dd_focus_8.jpg" alt="focus" /></dt>
<dd><a href="#" class="blue">《猫武士系列》（全6册）</a></dd>
<dd><a href="#" class="blue">求医不如求己养生救命大宝典</a></dd>
<dd><a href="#" class="blue">雅思词汇词根+联想记忆法</a></dd>
<dd><a href="#" class="blue">等待Nemo的日子</a></dd>
<dd>定价：￥120.00<br />
当当价：￥79.20</dd>
<dd>定价：￥198.00<br />
当当价：￥116.90</dd>
<dd>定价：￥28.00<br />
当当价：￥18.70</dd>
<dd>定价：￥26.00<br />
当当价：￥17.90</dd>
</dl>
</div>
</div>
</div>
<!--中间部分结束-->
<!--右侧部分开始-->
<div id="silder">
<!--书讯快递-->
<div class="book_sort">
<div class="book_sort_bg"><img src="images/dd_book_mess.gif" alt="mess"
style=" vertical-align:text-bottom;" />书讯快递</div>
<div class="book_class">
<ul id="express">
<li>·2010考研英语大纲到货75折...</li>
<li>·权威定本四大名著（人民文...</li>
<li>·口述历史权威唐德刚先生国...</li>
<li>·袁伟民与体坛风云：实话实...</li>
<li>·我们台湾这些年：轰动两岸...</li>
<li>·畅销教辅推荐：精品套书50...</li>
<li>·2010版法律硕士联考大纲75...</li>
<li>·计算机新书畅销书75折抢购</li>
<li>·2009年孩子最喜欢的书>></li>
<li>·弗洛伊德作品精选集59折</li>
</ul>
</div>
<div class="book_express_avder">
<img src="images/dd_book_right_adver1.jpg" alt="adver" style="margin-bottom:5px;" />
<img src="images/dd_book_right_adver2.gif" alt="adver" />
</div>
</div>
<!--近7日畅销榜-->
<div class="book_sort">
<div class="book_seven_title">近7日畅销榜 <img src="images/dd_bang.gif" alt="bang"
style="vertical-align:top;" /></div>
<div class="book_seven_border">
<div class="book_seven_top">
<ul id="book_seven_cate">
<li>动漫</li>
<li>小说</li>
<li>外语</li>
<li>旅游</li>
<li>励志</li>
</ul>
</div>
<div class="book_seven_content">
<div class="book_seven_content_left">
<dl id="book_seven_number">
<dt><img src="images/dd_book_no_01.gif" alt="book" /></dt>
<dt><img src="images/dd_book_no_02.gif" alt="book" /></dt>
<dt><img src="images/dd_book_no_03.gif" alt="book" /></dt>
<dd><img src="images/dd_book_no_04.gif" alt="book" /></dd>
<dd><img src="images/dd_book_no_05.gif" alt="book" /></dd>
<dd><img src="images/dd_book_no_06.gif" alt="book" /></dd>
<dd><img src="images/dd_book_no_07.gif" alt="book" /></dd>
<dd><img src="images/dd_book_no_08.gif" alt="book" /></dd>
<!--<dd><img src="images/dd_book_no_09.gif" alt="book"/></dd><dd><img src="images/dd_book_no_10.gif" alt="book"/></dd>-->
</dl>
</div>
<div class="book_seven_content_right">
<!--励志开始-->
<div id="book_seven_hearten">
<dl>
<dt><img src="images/dd_seven_hearten_01.jpg" alt="hearten" /></dt>
<dd><a href="#" class="blue">不抱怨的世界</a><br />
作者：（美）鲍温<br />
出版社：陕西师范<br />
出版时间：2009年4月</dd>
<dt><img src="images/dd_seven_hearten_02.jpg" alt="hearten" /></dt>
<dd><a href="#" class="blue">遇见未知的自己</a><br />
作者：张德芬 <br />
出版社：华夏出版<br />
出版时间：2008年1月</dd>
<dt><img src="images/dd_seven_hearten_03.jpg" alt="hearten" /></dt>
<dd><a href="#" class="blue">活法</a><br />
作者：（日）稻盛<br />
出版社：东方出版<br />
出版时间：2005年3月</dd>
</dl>
<ul>
<li><a href="#" class="blue">高效能人士的七个习惯</a></li>
<li><a href="#" class="blue">被迫强大</a></li>
<li><a href="#" class="blue">遇见心想事成的自己</a></li>
<li><a href="#" class="blue">世界上最伟大的推销员</a></li>
<li><a href="#" class="blue">我的成功可以复制</a></li>
</ul>
</div>
<!--励志结束-->
</div>
</div>
</div>
</div>
</div>
<!--右侧部分结束-->
</div>
<!--网站版权部分开始-->
<div id="footer">
<div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">公司简介</a> | <a href="#"
target="_parent" class="footer_dull_red">诚证英才</a> | <a href="#" target="_parent"
class="footer_dull_red">网站联盟</a> | <a href="#" target="_parent" class="footer_dull_red">百货招商</a> |
<a href="#" target="_parent" class="footer_dull_red">交易条款</a>
</div>
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- login.html -->
<meta charset="utf-8">
<title>当当网登录页面</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function emailBlur() {
var email = $("email").value;
if (!email) {
$("user").innerHTML = "请输入email地址或者昵称";
return false;
} else {
var regex = /\w{4,12}@[a-zA-Z]{2,6}\.com|cn/;
if (!regex.test(email)) {
// alert("email地址或者昵称格式不对");
$("user").innerHTML = "email地址或者昵称格式不对";
return false;
} else {
$("user").innerHTML = "";
}
}
return true;
}
function pwdBlur() {
var pwd = $("pwd").value;
if (!pwd) {
$("password").innerHTML = "请输入密码";
return false;
} else {
var regex = /^\w{4,12}$/;
if (!regex.test(pwd)) {
$("password").innerHTML = "密码大于4位小于12位";
return false;
} else {
$("password").innerHTML = "";
}
}
return true;
}
function checkLogin() {
var e = emailBlur();
var p= pwdBlur();
if (!(e&&p)) {
return false
}
return true;
}
</script>
</head>
<body>
<div id="header">
<div class="login_header_left"><img src="images/logo.gif" alt="logo"></div>
<div class="login_header_mid"><img src="images/login_header.gif" alt="header"></div>
<div class="login_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html"
class="blue">商品展示页</a> | <a href="shopping.html" class="blue">购物车</a> | <a href="register.html"
class="blue">注册</a></div>
</div>
<div id="main">
<div class="login_main_left">
<div><img src="images/login_main_01.jpg" alt="中间图片">
<img src="images/login_main_02.jpg" alt="中间图片">
<img src="images/login_main_03.jpg" alt="中间图片">
</div>
<div class="login_main_end">
<dl class="login_green">
<dt>更多选择、更低价格</dt>
<dd>100万种商品包含图书、数码、美妆、运动健康等，价格低于地面店20%以上</dd>
</dl>
<div class="login_main_dotted"></div>
<dl class="login_green">
<dt>全场免运费、货到付款</dt>
<dd>免费送货上门、360个城市货到付款。另有网上支付、邮局汇款等多种支付方式</dd>
</dl>
<div class="login_main_dotted"></div>
<dl class="login_green">
<dt>真实、优质的商品评论</dt>
<dd>千万用户真实、优质的商品评论，给您多角度、全方位的购物参考</dd>
</dl>
</div>
</div>
<div class="login_main_mid">
<div class="login_content_top">请登录当当网</div>
<div class="login_content_line"></div>
<form action="index.html" method="get" onsubmit="return checkLogin()">
<dl class="login_content">
<dt>Email地址或昵称：</dt>
<dd><input id="email" type="text" class="login_content_input" onFocus="emailFocus()"
onBlur="emailBlur()">
<br>
<span id="user">
</span></dd>
</dl>
<dl class="login_content">
<dt>密码：</dt>
<dd><input id="pwd" type="password" class="login_content_input" onFocus="pwdFocus()"
onBlur="pwdBlur()">
<br><span id="password">
</span></dd>
</dl>
<dl class="login_content">
<dt></dt>
<dd><input id="btn" value=" " type="submit" class="login_btn_out"
onmouseover="this.className='login_btn_over'"
onmouseout="this.className='login_btn_out'"></dd>
</dl>
</form>
<div class="login_content_dotted"></div>
<div class="login_content_end_bg">
<div class="login_content_end_bg_top">
<label class="login_content_bold">还不是当当网用户？</label>快捷方便的免费注册，让你立刻尽享当当网提供的条项优惠服务......
</div>
<div class="login_content_end_bg_end">
<input class="login_register_out" value=" " type="button"
onmouseover="this.className='login_register_over'"
onmouseout="this.className='login_register_out'" onClick="jump()">
</div>
</div>
</div>
<div class="login_main_right"><img src="images/login_main_04.jpg" alt="右侧图片"></div>
</div>
<div id="footer">
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<!-- open.html -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出广告窗口</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="images/dd_winOpen.jpg" alt="open" />
</body>
</html><!DOCTYPE html>
<html>
<head>
<!-- product.html -->
<meta charset="utf-8">
<title>当当网商品展示页面</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe></div>
<!--中间部分开始-->
<div id="main">
<div class="dd_index_top_adver"><img src="images/dd_index_top_adver.jpg" alt="通栏广告图片" /></div>
<div class="current_place">您现在的位置：<a href="index.html">当当图书</a> >> 小说 >> 财经</div>
<!--左侧菜单开始-->
<div id="product_left">
<div id="product_catList">
<div class="product_catList_top">浏览同级分类</div>
<div id="product_catList_class"><!--使用javaScript显示图书分类--></div>
</div>
<div class="product_catList_end">
<img src="images/product_01.gif" alt="shopping">
<img src="images/product_02.gif" alt="shopping">
</div>
</div>
<!--右侧内容开始-->
<div id="product_storyList">
<div id="product_storyList_top">
<ul>
<li>排序方式</li>
<li><img src="images/dd_arrow_right.gif" alt="arrow"></li>
<li><select id="compositor">
<option>按销量 降序</option>
<option>按价格 升序</option>
<option>按价格 降序</option>
<option>按折扣 升序</option>
<option>按折扣 降序</option>
<option>按出版时间 升序</option>
<option>按出版时间 降序</option>
<option>按上架时间 升序</option>
<option>按上架时间 降序</option>
</select></li>
<li><img src="images/product_icon_01.gif" alt="icon"></li>
<li><img src="images/product_icon_02.gif" alt="icon"></li>
<li><img src="images/product_icon_03.gif" alt="icon"></li>
<li><img src="images/product_icon_04.gif" alt="icon"></li>
<li>每页显示的数量</li>
<li><img src="images/dd_arrow_right.gif" alt="arrow"></li>
<li><img src="images/product_icon_20.gif" alt="icon"></li>
<li><img src="images/product_icon_40.gif" alt="icon"></li>
<li style="float:right; padding-right:10px;"><img src="images/product_page_down.gif" alt="icon"></li>
<li style="float:right;">第1页</li>
<li style="float:right;"><img src="images/product_page_up.gif" alt="icon"></li>
</ul>
</div>
<!--图书排列开始-->
<div class="product_storyList_content">
<div id="storyBooksssss"><!--使用javaScript显示图书列表--></div>
<!--列表开始-->
<div class="product_storyList_content_left"><img src="images/product_list_01.jpg" alt="图书列表"></div>
<div class="product_storyList_content_right">
<ul>
<li class="product_storyList_content_dash"><a href="#" class="blue_14">私募（首部披露资本博弈秘密的金融小说）</a></li>
<li>顾客评分：<img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_gray.gif" alt="star"></li>
<li>作 者：<a href="#" class="blue_14">郭现杰</a> 著</li>
<li>出版社：<a href="#" class="blue_14">花山文艺出版社</a></li>
<li>出版时间：2009年08月</li>
<li>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金—金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。殊料，以王雨龙为首的私募基金—鑫利投资背信弃义，导致金鼎投资惨败。以至...</li>
<li>
<dl class="product_content_dd">
<dd><img src="images/product_buy_02.gif" alt="shopping"></dd>
<dd><img src="images/product_buy_01.gif" alt="shopping"></dd>
<dd>节省：￥13.10</dd>
<dd>折扣：59折</dd>
<dd class="footer_dull_red">￥18.90</dd>
<dd class="product_content_delete">￥32.00</dd>
</dl>
</li>
</ul>
</div>
<div class="product_storyList_content_bottom"></div>
<!--列表开始-->
<div class="product_storyList_content_left"><img src="images/product_list_02.jpg" alt="图书列表"></div>
<div class="product_storyList_content_right">
<ul>
<li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套.1.战局篇 </a></li>
<li>顾客评分：<img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red2.gif" alt="star"></li>
<li>作 者：<a href="#" class="blue_14">王强 </a> 著</li>
<li>出版社：<a href="#" class="blue_14">清华大学出版社</a></li>
<li>出版时间：2006年01月</li>
<li>虽然没有硝烟，却比战场更血腥；虽然并未战死，却比死亡更痛苦。 洪钧从一个底层的销售人员，成为一家著名的跨国公司的中国区代理首席代表，在即将被扶正，事业情感都志得意满的时候，掉入俞威设计的圈套，...</li>
<li>
<dl class="product_content_dd">
<dd><img src="images/product_buy_02.gif" alt="shopping"></dd>
<dd><img src="images/product_buy_01.gif" alt="shopping"></dd>
<dd>节省：￥8.90</dd>
<dd>折扣：68折</dd>
<dd class="footer_dull_red">￥19.10</dd>
<dd class="product_content_delete">￥28.00</dd>
</dl>
</li>
</ul>
</div>
<div class="product_storyList_content_bottom"></div>
<!--列表开始-->
<div class="product_storyList_content_left"><img src="images/product_list_03.jpg" alt="图书列表"></div>
<div class="product_storyList_content_right">
<ul>
<li class="product_storyList_content_dash"><a href="#" class="blue_14">饕餮（最真实的商场高端博弈小说） </a></li>
<li>顾客评分：<img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"></li>
<li>作 者：<a href="#" class="blue_14">韦帕 </a> 著</li>
<li>出版社：<a href="#" class="blue_14">国际文化出版公司</a></li>
<li>出版时间：2009年07月</li>
<li>北京，六百公里处，有宝地，233亩，土地价值2.5亿，总投资额近八亿，利润近三亿。 项目吸引了众多北京房地产商目光，其中最贪婪的一道目光，来自顾忱。但顾忱，总资产不过千万！想拿项目，无异于“空手套...</li>
<li>
<dl class="product_content_dd">
<dd><img src="images/product_buy_02.gif" alt="shopping"></dd>
<dd><img src="images/product_buy_01.gif" alt="shopping"></dd>
<dd>节省：￥8.40</dd>
<dd>折扣：74折</dd>
<dd class="footer_dull_red">￥23.60</dd>
<dd class="product_content_delete">￥32.00</dd>
</dl>
</li>
</ul>
</div>
<div class="product_storyList_content_bottom"></div>
<!--列表开始-->
<div class="product_storyList_content_left"><img src="images/product_list_04.jpg" alt="图书列表"></div>
<div class="product_storyList_content_right">
<ul>
<li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套 迷局篇2：职场商战三部曲 </a></li>
<li>顾客评分：<img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"></li>
<li>作 者：<a href="#" class="blue_14">王强 </a> 著</li>
<li>出版社：<a href="#" class="blue_14">长江文艺出版社</a></li>
<li>出版时间：2006年08月</li>
<li>《圈子圈套2·迷局篇》是“圈子圈套三部曲”的第二部。 职场风云再起。洪钧出任维西尔中国区总经理，他和俞威之间的较量又或明或暗地展开来，面对内部的纷争和商场上的尔虞我诈，他该如何出招……俞威依...</li>
<li>
<dl class="product_content_dd">
<dd><img src="images/product_buy_02.gif" alt="shopping"></dd>
<dd><img src="images/product_buy_01.gif" alt="shopping"></dd>
<dd>节省：￥11.4</dd>
<dd>折扣：59折</dd>
<dd class="footer_dull_red">￥16.60</dd>
<dd class="product_content_delete">￥28.00</dd>
</dl>
</li>
</ul>
</div>
<div class="product_storyList_content_bottom"></div>
<!--列表开始-->
<div class="product_storyList_content_left"><img src="images/product_list_05.jpg" alt="图书列表"></div>
<div class="product_storyList_content_right">
<ul>
<li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套3.终局篇（附赠王强演讲光盘） </a></li>
<li>顾客评分：<img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_red.gif" alt="star"><img src="images/star_gray.gif" alt="star"></li>
<li>作 者：<a href="#" class="blue_14">王强 </a> 著</li>
<li>出版社：<a href="#" class="blue_14">长江文艺出版社</a></li>
<li>出版时间：2007年10月</li>
<li>本书全景展示了商场和职场的生死厮杀、巅峰对决。主人公的命运、项目结局、所有的爱恨情仇都在本书中揭开谜底。 再次陷入低谷的洪钧在内忧外患中不甘消沉，在职场上和自己的上司明争暗斗，在商场上则和夙...</li>
<li>
<dl class="product_content_dd">
<dd><img src="images/product_buy_02.gif" alt="shopping"></dd>
<dd><img src="images/product_buy_01.gif" alt="shopping"></dd>
<dd>节省：￥13.10</dd>
<dd>折扣：59折</dd>
<dd class="footer_dull_red">￥18.9</dd>
<dd class="product_content_delete">￥32.00</dd>
</dl>
</li>
</ul>
</div>
<div class="product_storyList_content_bottom"></div>
<div>
<dl class="product_content_dd">
<dd><img src="images/OK.gif" alt="ok"></dd>
<dd>页</dd>
<dd><input name="page" type="text" value="1" style="width:20px;"></dd>
<dd>跳转到第</dd>
<dd><img src="images/next.gif" alt="ok"></dd>
<dd><ul id="product_page">
<li><a href="#" class="product_page">1</a></li>
<li><a href="#" class="product_page">2</a></li>
<li> <a href="#" class="product_page">3</a></li>
<li> ...</li>
<li><a href="#" class="product_page">14</a></li>
<li><a href="#" class="product_page">15</a></li>
<li><a href="#" class="product_page">16</a></li>
</ul>
<dd><img src="images/product_page_up.gif" alt="ok"></dd>
</dl>
</div>
</div>
</div>
<!--右侧内容结束-->
<script src="js/product.js" type="text/javascript"></script>
</div>
<!--网站版权部分开始-->
<div id="footer">
<div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">公司简介</a> | <a href="#" target="_parent" class="footer_dull_red">诚证英才</a> | <a href="#" target="_parent" class="footer_dull_red">网站联盟</a> | <a href="#" target="_parent" class="footer_dull_red">百货招商</a> | <a href="#" target="_parent" class="footer_dull_red">交易条款</a></div>
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- register -->
<meta charset="utf-8">
<title>当当网注册页面</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" >
function $(id) {
return document.getElementById(id);
}
function emailFocus(){
$("email_prompt").innerHTML="此邮箱将是您登录当当网的账号，并将用来接收验证邮件";
}
function emailBlur() {
var email = $("email").value;
if (!email) {
$("email_prompt").innerHTML = "请输入email地址或者昵称";
return false;
} else {
var regex = /\w{4,12}@[a-zA-Z]{2,6}\.com|cn/;
if (!regex.test(email)) {
// alert("email地址或者昵称格式不对");
$("email_prompt").innerHTML = "email地址或者昵称格式不对";
return false;
} else {
$("email_prompt").innerHTML = "";
}
}
return true;
}
function nickNameFocus(){
$("nickName_prompt").innerHTML="昵称可由大小写英文字母、数字组成，长度为4-20个字符";
}
function nickNameBlur() {
var nickName = $("nickName").value;
if (!nickName) {
$("nickName_prompt").innerHTML = "昵称为必填项";
return false;
} else {
var regex = /^[a-zA-Z0-9]{4,20}$/;
if (!regex.test(nickName)) {
// alert("email地址或者昵称格式不对");
$("nickName_prompt").innerHTML = "昵称格式不对";
return false;
} else {
$("nickName_prompt").innerHTML = "";
}
}
return true;
}
function pwdFocus(){
$("pwd_prompt").innerHTML="密码可由大小写英文字母、数字组成，长度6－20个字符";
}
function pwdBlur() {
var pwd = $("pwd").value;
if (!pwd) {
$("pwd_prompt").innerHTML = "密码为必填项";
return false;
} else {
var regex = /^[a-zA-Z0-9]{6,20}$/;
if (!regex.test(pwd)) {
// alert("email地址或者昵称格式不对");
$("pwd_prompt").innerHTML = "密码格式不对";
return false;
} else {
$("pwd_prompt").innerHTML = "";
}
}
return true;
}
function repwdFocus(){
$("repwd_prompt").innerHTML="密码可由大小写英文字母、数字组成，长度6－20个字符";
}
function repwdBlur() {
var repwd = $("repwd").value;
if (!repwd) {
$("repwd_prompt").innerHTML = "请再次输入您的密码";
return false;
} else {
var pwd = $("pwd").value;
if (!(repwd===pwd)) {
// alert("email地址或者昵称格式不对");
alert(pwd)
alert(repwd)
$("repwd_prompt").innerHTML = "密码不匹配";
$("repwd").innerHTML="";
return false;
} else {
$("repwd_prompt").innerHTML = "";
}
}
return true;
}
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 changeCity(){
var province=document.getElementById("province").value;
var city=document.getElementById("city");
city.length=0; //清除当前city中的选项
for (var i in cityList){
if (i == province){
for (var j in cityList[i]){
try{
city.add(new Option(cityList[i][j],cityList[i][j]),null);
}
catch(e){
city.add(new Option(cityList[i][j],cityList[i][j]));
}
}
}
}
}
function allProvince(){
var province=document.getElementById("province");
for (var i in cityList){
try{
province.add(new Option(i, i),null); //标准方式
}
catch(e){
province.add(new Option(i, i)); //IE
}
}
}
window.onload=allProvince;
function checkRegister(){
var e= emailBlur();
var n= nickNameBlur();
var p= pwdBlur();
var r= repwdBlur();
if(!(e&n&p&r)){
return false;
}
return true;
}
</script>
</head>
<body>
<div id="header">
<div id="register_header">
<div class="register_header_left"><img src="images/logo.gif" alt="logo"></div>
<div class="register_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a> | <a href="shopping.html" class="blue">购物车</a> | <a href="login.html" class="blue">登录</a></div>
</div>
</div>
<div id="main">
<div class="register_content">
<div class="register_top_bg"></div>
<div class="register_mid_bg">
<ul>
<li class="register_mid_left">填写注册信息</li>
<li class="register_mid_mid">2. 邮箱验证</li>
<li class="register_mid_right">3. 完成注册</li>
</ul>
</div>
<div class="register_top_bg_mid">
<div class="register_top_bg_two_left"></div>
<div class="register_top_bg_two_right"></div>
<div class="register_title_bg"><img src="images/register_pic_02.gif" alt="欢迎注册"><br>您所提供的资料不会做其他用途，敬请安心填写。</div>
</div>
<div class="register_dotted_bg"></div>
<div class="register_message">
<form action="index.html" method="get" id="myform" onSubmit="return checkRegister()">
<dl class="register_row">
<dt>Email地址：</dt>
<dd><input id="email" type="text" class="register_input" onFocus="emailFocus()" onBlur="emailBlur()"></dd>
<dd><div id="email_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>设置昵称：</dt>
<dd><input id="nickName" type="text" class="register_input" onFocus="nickNameFocus()" onBlur="nickNameBlur()"></dd>
<dd><div id="nickName_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>设定密码：</dt>
<dd><input id="pwd" type="password" class="register_input" onFocus="pwdFocus()" onBlur="pwdBlur()"></dd>
<dd><div id="pwd_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>再输入一次密码：</dt>
<dd><input id="repwd" type="password" class="register_input" onFocus="repwdFocus()" onBlur="repwdBlur()"></dd>
<dd><div id="repwd_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>性别：</dt>
<dd><input name="sex" id="man" type="radio" value="男"> <label for="man">男</label></dd>
<dd> <input name="sex" id="woman" type="radio" value="女"> <label for="woman">女</label></dd>
</dl>
<dl class="register_row">
<dt>所在地区：</dt>
<dd><select id="province" onChange="changeCity()" style="width:120px;">
<option>请选择省/城市</option>
</select>
</dd>
<dd><select id="city" style="width:130px;">
<option>请选择城市/地区</option>
</select></dd>
</dl>
<div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif" onMouseOver="btn_over()" onMouseOut="btn_out()"></div>
</form>
</div>
</div>
</div>
<!--网站版权部分开始-->
<div id="footer">
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- shopping.html -->
<meta charset="utf-8">
<title>当当网购物车页面</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var sum = 0;
function $(id) {
return document.getElementById(id);
}
//任意取消一个复选框，全选不能选中
window.onload = function(){
//先得到全选对象
var fall =$("quanxuan");
//获取其它的复选框
alert(123);
var cks =document.getElementsByName("cks");
//遍历对象
for(var i =0; i< cks.length; i++){
//为所有复选框设置点击事件
cks[i].onclick=function(){
//遍历对象
for(var i =0; i< cks.length; i++){
//假设法
var flag =true;
//但凡一个没有选中，全选就不选中
if(cks[i].checked==false){
flag=false;
fall.checked=flag;
}
}
fall.checked=flag;
}
}
}
function quanxuan(obj) {
var cks = document.getElementsByName("cks");
for (var i = 0; i < cks.length; i++) {
cks[i].checked = obj.checked;
}
}
function cks() {
//先得到全选对象
var fall =$("quanxuan");
var flag = true;
var cks = document.getElementsByName("cks");
for (var i = 0; i < cks.length; i++) {
if (cks[i].checked == false) {
flag = false;
fall=flag;
break;
}
}
$("quanxuan").checked = flag;
}
function deleteRow(id) {
//获取行对象
// alert(id)
var rowObjTr = $(id);
// alert(rowObjTr)
//根据行对象获取下标
var index = rowObjTr.rowIndex;
// alert(index);
$("shopping").deleteRow(index);
// $("shopping").deleteRow(index-1);
productCount();
}
function deleteSelectRow() {
//1.获取所有的复选框（验证是否选中）
//获取name属性为cks的所有复选框
var cks = document.getElementsByName("cks");
//遍历
for (var i = 0; i < cks.length; i++) {
if (cks[i].checked === true) {
// console.log(cks[i].value);
var result = cks[i].value;
// alert(result)
deleteRow(result);
i--;
}
}
}
function changeNum(id, type) {
// 根据id获取行对象
var rowTr = $(id);
// alert(rowTr)
//获取第6个单元格对象
var td6Value = rowTr.cells[5].children[1].value;
// alert(td6Value)
if (type === 'add') {
td6Value++;
} else if (type === 'minus') {
if (td6Value > 1) {
td6Value--;
} else {
alert("商品件数不能小于1件");
var flag = window.confirm("你确定要移除商品吗？");
if (flag == true) {
deleteRow(id);
}
}
}
rowTr.cells[5].children[1].value = td6Value;
//计算递增或递减后的总价格计算（每个商品）
//商品的单价以及件数
// calc();
productCount();
}
/*根据您挑选的商品，当当为您推荐部分的显示和隐藏
function shopping_commend_show() {
var imgId = document.getElementById("shopping_commend_arrow"); //箭头图片
var sortId = document.getElementById("shopping_commend_sort"); //推荐的商品
if (sortId.style.display == "none") {
sortId.style.display = "block";
imgId.src = "images/shopping_arrow_up.gif";
} else {
sortId.style.display = "none";
imgId.src = "images/shopping_arrow_down.gif";
}
}
// function calc(){
// //获取所有的tr标签
// var oTab = $("shopping");
// var trs = oTab.rows;
// for(var i = 3;i<trs.length;i++){
// var price = trs[i].cells[4].innerHTML;
// var count = trs[i].cells[5].children[1].value;
// var sumPrice = parseFloat(price) * parseFloat(count);
// sum = sumPrice;
// }
// $("product_total").innerHTML=sum;
// }
// window.addEventListener('load',function(){
// calc()
// });
/*自动计算商品的总金额、总共节省的金额和积分*/
function productCount(){
var total=0; //商品金额总计
var save=0; //您共节省的金额
var integral=0; //可获商品积分
var point; //每一行商品的单品积分
var price; //每一行商品的市场价格
var ddPrice; //每一行商品的当当价格
var number; //每一行商品的数量
/*访问ID为myTableProduct表格中所有的行数*/
var myTableTr=document.getElementById("shopping").getElementsByTagName("tr");
for(var i=0;i<myTableTr.length;i++){
point =myTableTr[i].cells[2].children[0].innerHTML
// alert(point);
price=myTableTr[i].cells[3].children[0].innerHTML
// alert(price)
ddPrice=myTableTr[i].cells[4].children[0].innerHTML
// alert(ddPrice)
number=myTableTr[i].cells[5].children[1].value
// alert(number)
integral+=point*number;
total+=ddPrice*number;
save+=(price-ddPrice)*number;
}
document.getElementById("product_total").innerHTML=total;
document.getElementById("product_save").innerHTML=save;
document.getElementById("product_integral").innerHTML=integral;
}
window.onload=productCount;
</script>
</head>
<body>
<div id="header"><iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe></div>
<!--中间部分开始-->
<div id="main">
<div> <img src="images/shopping_myshopping.gif" alt="shopping"> <a href="#">全场免运费活动中</a></div>
<!--为您推荐商品开始-->
<div class="shopping_commend">
<div class="shopping_commend_left">根据您挑选的商品，当当为您推荐</div>
<div class="shopping_commend_right"><img src="images/shopping_arrow_up.gif" alt="shopping"
id="shopping_commend_arrow" onClick="shopping_commend_show()"></div>
</div>
<div id="shopping_commend_sort">
<div class="shopping_commend_sort_left">
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li>
<li class="shopping_commend_list_2">￥39.00</li>
<li class="shopping_commend_list_3">￥29.30</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">解禁（当当网独家首发）</a></li>
<li class="shopping_commend_list_2">￥28.00</li>
<li class="shopping_commend_list_3">￥19.40</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王（金融危机下房地产行...</a></li>
<li class="shopping_commend_list_2">￥32.80</li>
<li class="shopping_commend_list_3">￥25.10</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li>
<li class="shopping_commend_list_2">￥36.00</li>
<li class="shopping_commend_list_3">￥27.70</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
</div>
<div class="shopping_commend_sort_mid"></div>
<div class="shopping_commend_sort_left">
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li>
<li class="shopping_commend_list_2">￥59.00</li>
<li class="shopping_commend_list_3">￥47.20</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家（马未都、王刚推荐!央...</a></li>
<li class="shopping_commend_list_2">￥34.80</li>
<li class="shopping_commend_list_3">￥20.60</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说：一...</a></li>
<li class="shopping_commend_list_2">￥39.80</li>
<li class="shopping_commend_list_3">￥30.50</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">国戏（以麻将术语解读宦海沉浮...</a></li>
<li class="shopping_commend_list_2">￥25.00</li>
<li class="shopping_commend_list_3">￥17.30</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
</div>
</div>
<div class="shopping_list_top">您已选购以下商品</div>
<div class="shopping_list_border">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="shopping_list_title">
<td>全选<input type="checkbox" name="" id="quanxuan" value="" onclick="quanxuan(this)" /></td>
<td class="shopping_list_title_1">商品名</td>
<td class="shopping_list_title_2">单品积分</td>
<td class="shopping_list_title_3">市场价</td>
<td class="shopping_list_title_4">当当价</td>
<td class="shopping_list_title_5">数量</td>
<td class="shopping_list_title_6">删除</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
<tr class="shopping_product_list" id="product1">
<td><input type="checkbox" name="cks" id="cks1" value="product1" onclick="cks()" /></td>
<td class="shopping_product_list_1"><a href="#" class="blue">私募（首部披露资本博弈秘密的金融...</a></td>
<td class="shopping_product_list_2"><label>189</label></td>
<td class="shopping_product_list_3">￥<label>32.00</label></td>
<td class="shopping_product_list_4">￥<label>18.90 </label>(59折)</td>
<td class="shopping_product_list_5"><img src="./images/shopping_arrow_down.gif"
onclick=changeNum('product1','minus')><input type="text" readonly="readonly" value="1"
onblur="productCount()"><img src="./images/shopping_arrow_up.gif"
onclick=changeNum('product1','add')></td>
<td class="shopping_product_list_6"><a href="javascript:deleteRow('product1')"
class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="product2">
<td><input type="checkbox" name="cks" id="cks2" value="product2" nclick="cks()" /></td>
<td class="shopping_product_list_1"><a href="#" class="blue"> 小团圆（张爱玲最神秘小说遗稿）</a></td>
<td class="shopping_product_list_2"><label>173</label></td>
<td class="shopping_product_list_3">￥<label>28.00</label></td>
<td class="shopping_product_list_4">￥<label>17.30</label>(62折)</td>
<td class="shopping_product_list_5"><img src="./images/shopping_arrow_down.gif"
onclick=changeNum('product2','minus')><input type="text" readonly="readonly" value="1"
onblur="productCount()"><img src="./images/shopping_arrow_up.gif"
onclick=changeNum('product2','add')></td>
<td class="shopping_product_list_6"><a href="javascript:deleteRow('product2')"
class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="product3">
<td><input type="checkbox" name="cks" id="cks3" value="product3" nclick="cks()" /></td>
<td class="shopping_product_list_1"><a href="#" class="blue">不抱怨的世界(畅销全球80国的世界...</a></td>
<td class="shopping_product_list_2"><label>154</label></td>
<td class="shopping_product_list_3">￥<label>24.80</label></td>
<td class="shopping_product_list_4">￥<label>15.40</label> (62折)</td>
<td class="shopping_product_list_5"><img src="./images/shopping_arrow_down.gif"
onclick=changeNum('product3','minus')><input type="text" readonly="readonly" value="2"
onblur="productCount()"><img src="./images/shopping_arrow_up.gif"
onclick=changeNum('product3','add')></td>
<td class="shopping_product_list_6"><a href="javascript:deleteRow('product3')"
class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="product4">
<td><input type="checkbox" name="cks" id="cks4" value="product4" nclick="cks()" /></td>
<td class="shopping_product_list_1"><a href="#" class="blue">福玛特双桶洗衣机XPB20-07S</a></td>
<td class="shopping_product_list_2"><label>358</label></td>
<td class="shopping_product_list_3">￥<label>458.00</label></td>
<td class="shopping_product_list_4">￥<label>358.00</label> (78折)</td>
<td class="shopping_product_list_5"><img src="./images/shopping_arrow_down.gif"
onclick=changeNum('product4','minus')><input type="text" readonly="readonly" value="1"
onblur="productCount()"><img src="./images/shopping_arrow_up.gif"
onclick=changeNum('product4','add')></td>
<td class="shopping_product_list_6"><a href="javascript:deleteRow('product4')"
class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="product5">
<td><input type="checkbox" name="cks" id="cks5" value="product5" nclick="cks()" /></td>
<td class="shopping_product_list_1"><a href="#" class="blue">PHP和MySQL Web开发 （原书第4版）</a></td>
<td class="shopping_product_list_2"><label>712</label></td>
<td class="shopping_product_list_3">￥<label>95.00</label></td>
<td class="shopping_product_list_4">￥<label>71.20</label> (75折)</td>
<td class="shopping_product_list_5"><img src="./images/shopping_arrow_down.gif"
onclick=changeNum('product5','minus')><input type="text" readonly="readonly" value="1"
onblur="productCount()"><img src="./images/shopping_arrow_up.gif"
onclick=changeNum('product5','add')></td>
<td class="shopping_product_list_6"><a href="javascript:deleteRow('product5')"
class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="product6">
<td><input type="checkbox" name="cks" id="cks6" value="product6" nclick="cks()" /></td>
<td class="shopping_product_list_1"><a href="#"
class="blue">法布尔昆虫记</a>（再买￥68.30即可参加“满199元减10元现金”活动）</td>
<td class="shopping_product_list_2"><label>10</label></td>
<td class="shopping_product_list_3">￥<label>198.00</label></td>
<td class="shopping_product_list_4">￥<label>130.70</label> (66折)</td>
<td class="shopping_product_list_5"><img src="./images/shopping_arrow_down.gif"
onclick=changeNum('product6','minus')><input type="text" readonly="readonly" value="1"
onblur="productCount()"><img src="./images/shopping_arrow_up.gif"
onclick=changeNum('product6','add')></td>
<td class="shopping_product_list_6"><a href="javascript:deleteRow('product6')"
class="blue">删除</a></td>
</tr>
</table>
<div class="shopping_list_end">
<ul>
<li class="shopping_list_end_1"><input name="" type="image" src="images/shopping_balance.gif">
</li>
<li class="shopping_list_end_2">￥<label id="product_total"></label></li>
<li class="shopping_list_end_3">商品金额总计：</li>
<li class="shopping_list_end_4">您共节省金额：￥<label class="shopping_list_end_yellow"
id="product_save"></label><br />
可获商品积分：<label class="shopping_list_end_yellow" id="product_integral"></label>
<li><button type="button" id="plsc" onclick="deleteSelectRow()">批量删除</button></li>
</li>
</ul>
</div>
</div>
</div>
<!--网站版权部分开始-->
<div id="footer">
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>二、其它案例
1.订单案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>订单大Boss</title>
<!-- css代码 -->
<style type="text/css">
table{
text-align: center;
width: 100%;
}
table>td{
font-size: large;
}
</style>
<!-- js代码 -->
<script type="text/javascript">
//写一个万能的通过id获取指定对象的方法(有参数有返回)
function $(id){
return document.getElementById(id);
}
//确认增加事件
//加载函数
window.onload=function(){
//删除所选
$("b").onclick=function(){
//获取所有为gname的列对象
var Tdone =document.getElementsByName("gname");
//获取完毕后，进行遍历
for(var i =0; i<Tdone.length; i++){
//根据条件进行删除
if(Tdone[i].checked){
//拿到相对应的行对象
var Tr=Tdone[i].parentNode.parentNode;
//获取行对象的下标
var index = Tr.id;
//调用删除的方法
Trdel(index);
//进行--
i--;
}
}
}
$("a").onclick=function(){
//获取表格对象,获取指定行对象
var index =$("Tabl").rows.length-1;
//进行行的插入
var Tr =$("Tabl").insertRow(index);
//为每一行设置id属性，以便可以拿到
//rowIndex从已有的行数来计算下标每次加一
Tr.id =Tr.rowIndex;
//插入第一个单元格
Tr.insertCell(0).innerHTML="<input onclick='mygname();' name='gname' type='checkbox'>";
//插入完行，进行插入单元格的数据
Tr.insertCell(1).innerHTML="<input type='text'>";
//插入完行，进行插入单元格的数据
//在js里面必须使用单引号
Tr.insertCell(2).innerHTML="<input type='text' style='width:30px;'>";
//插入完行，进行插入单元格的数据
Tr.insertCell(3).innerHTML="<input type='text' style='width:30px;'>";
//插入完行，进行插入单元格的数据
Tr.insertCell(4).innerHTML=
"<button onclick='Trdel("+Tr.rowIndex+");' type='button'>删除</button> <button onclick='Trque("+Tr.rowIndex+");' type='button'>确定</button>";
}
}
//设置删除的方法(根据编号进行删除)有参数无返回方法
function Trdel(id){
//获取表格对象
var Tabl =$("Tabl");
//拿到行对象
var index =$(id).rowIndex;
//调用表格删除的方法
Tabl.deleteRow(index);
}
//确定方法
function Trque(id){
//通过id拿到指定的行
var Tra =$(id);
//获取指定的单元格内容,并且修改单元格的内容（节点）
//设置第一个单元格；
var cells2 =Tra.cells[1].firstElementChild.value;
Tra.cells[1].innerHTML=cells2;
//设置第二个单元格；
var cells3 =Tra.cells[2].firstElementChild.value;
Tra.cells[2].innerHTML=cells3;
//设置第三个单元格；
var cells4 =Tra.cells[3].firstElementChild.value;
Tra.cells[3].innerHTML="<span>¥"+"</span><span>"+cells3+"</span>";
//设置第四个单元格；
var cells5 =Tra.cells[4].lastElementChild.innerHTML="修改";
//重新设置内容
Tra.cells[4].lastElementChild.setAttribute("onclick","Trset("+id+")");
}
//修改的方法(有bug,当第一行需要进行修改的时候)
function Trset(id){
//思路：通过名字不行
//获取当前行对象
var Tra =$(id);
//重新得到单元格
//得到第一个单元格的第一个节点,并且重新进行赋值
var cells1 =Tra.cells[1].innerHTML;
Tra.cells[1].innerHTML="<input type='text' value='"+cells1+"'>";
//得到第二个单元格的第一个节点,并且重新进行赋值
var cells2 =Tra.cells[2].innerHTML;
Tra.cells[2].innerHTML="<input style='width:30px; type='text' value='"+cells2+"' >";
//得到第三个单元格的第一个节点,并且重新进行赋值
var cells3 =Tra.cells[3].lastElementChild.innerHTML;
Tra.cells[3].innerHTML="<input style='width:30px; type='text' value='"+cells3+"'>";
//设置第四个单元格；
var cells4 =Tra.cells[4].lastElementChild.innerHTML="确定";
//重新设置内容
Tra.cells[4].lastElementChild.setAttribute("onclick","Trque("+id+")");
}
//全选的方法
function Tall(){
//获取全选的对象
var Trone =$("check");
//获取所有为gname的列对象
var Tdone =document.getElementsByName("gname");
//获取完毕后，进行遍历
for(var i =0; i<Tdone.length; i++){
//当全选勾选中的时候，它的小弟也都跟着变化而变化
Tdone[i].checked=Trone.checked;
}
}
//设置点击事件
function mygname(){
//获取全选的对象
var Trone =$("check");
//获取所有为gname的列对象
var Tdone =document.getElementsByName("gname");
//获取完毕后，进行遍历
for(var i =0; i<Tdone.length; i++){
//每一个子选项都影响着全选的情况
var flag =true;
if(Tdone[i].checked==flag){
Trone.checked=flag;
flag=false;
}
}
Trone.checked=flag;
}
//解决bug
function add(){
//拿到表格对象
var Tr =$("1");
}
</script>
</head>
<body>
<table id="Tabl" border="1px" cellpadding="0" cellspacing="0">
<tr>
<th>全选<input onclick="Tall();" type="checkbox" name="" id="check" value="" /></th>
<th>名称</th>
<th>数量</th>
<th>单价</th>
<th>操作</th>
</tr>
<tr id ="1" name="aa">
<td><input onclick="mygname(1);" type="checkbox" name="gname" id="" value="" /></td>
<td>果冻</td>
<td>15</td>
<td>¥10</td>
<td>
<button onclick="Trdel(1);" type="button">删除</button>
<button onclick="Trset(1);" type="button">修改</button></td>
</tr>
<tr>
<td colspan="5">
<button id ="b" type="button">删除所选</button>
<button id ="a" type="button">增加订单</button>
</td>
</tr>
</table>
</body>
</html>
扫一扫
4129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
