这真的是我第一次这么认真的写博客。。。
先看一下总体结构
然后就是主页面效果图
登录页面
注册页面
下面剖入代码：
主页页面：
<script type="text/javascript">//循环显示广告图片的方法function gopic() {var index = 0;$("#scroll_number li").mousemove(function () {//获得li获得下标，每个li对应一个图片index = $(this).index();//stop():停止所有在指定元素上正在运行的动画。$("#scroll_img li").eq(index).stop(true, true).fadeIn().siblings().fadeOut();$("#scroll_number li").eq(index).addClass("scroll_number_over").stop(true, true).siblings().removeClass("scroll_number_over");clearInterval(tt);}).mouseout(function () {//鼠标移开，重新调用方法，一切恢复gopic();});//定时器var tt = setInterval(function () {//控制li对应的个数index++;//要超出了则归0if (index >= $("#scroll_img li").length) {index = 0;}//让此index对应的图片淡入，其他的淡出$("#scroll_img li").eq(index).stop(true, true).fadeIn().siblings().fadeOut();//li数字格式的变化$("#scroll_number li").eq(index).addClass("scroll_number_over").stop(true, true).siblings().removeClass("scroll_number_over");}, 2000);}//Tab切换特效 function Tab() {$('.book_new div[id]').hover(function () {//鼠标移上，标题样式改变$(this).addClass('book_type_out').siblings().removeClass("book_type_out");//因为标题的id与旗下子内容id有可联系var myid = $(this).attr("id");var result = "book_" + myid;//拼接可直接锁定标题对应的内容元素，让其显示，其他隐藏$(".book_class dl[id=" + result + "]").show().siblings().hide();}, function () {//鼠标移开，直接改变标题样式$(this).removeClass("book_type_out");});}//书讯快递function movedome() {var marginTop = 0;var stop = false;//定时器var interval = setInterval(function () {//不动if (stop) {return;}//滚动$("#express").children("li").first().animate({ "margin-top": marginTop-- }, 0, function () {var $first = $(this);if (!$first.is(":animated")) { if ((-marginTop) > $first.height()) {$first.css({ "margin-top": 0 }).appendTo($("#express"));marginTop = 0;}}});}, 50);$("#express").mouseover(function () {//鼠标移上，不动stop = true;}).mouseout(function () {//移开，滚动stop = false;});}$(function () {//保证轮播图片的序号初始为1变色$("#scroll_number li").eq(0).addClass("scroll_number_over").stop(true, true).siblings().removeClass("scroll_number_over");//打开弹出广告window.open('open.html', '', 'top=0,left=200,width=500,height=327,scrollbars=0,resizable=0');//广告悬浮效果var menuYloc = $("#right").offset().top;$(window).scroll(function () {var offsetTop = menuYloc + $(window).scrollTop() + "px";$("#right").animate({ top: offsetTop }, { duration: 100, queue: false });});//点击关闭按钮关闭$('#dd_close a').click(function () {//alert(1);$(this).parent().next().remove();$(this).parent().remove();});//循环显示广告图片gopic();//TabTab();$("#bookTab .book_class dl dd").hover(function () {$(this).css("border", "2px solid blue");//??}, function () {$(this).css("border", "");});//书讯快递的内容循环垂直向上滚动movedome();});</script>
登录页面
<script>//Emailfunction checkEmail() {var myEmail = $('#email').val();if (myEmail == '') {return false;} else {return true;}}//Pwdfunction checkPwd() {var myPwd = $('#pwd').val();if (myPwd == '') {return false;} else {return true;}}$(function () {$('#loginForm').submit(function () {var num = 0;if (!checkEmail()) {num++;}if (!checkPwd()) {num++;}//判断if (num > 0) {alert('请正确输入用户名和密码哦！');return false;} else {return true;}});});</script>
注册页面
<script type="text/javascript">//Emailfunction ckEmail() {//判断var myEmail = $('#email').val();var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;var falgEmail = reg.test(myEmail);if (myEmail == '') {$("#email_prompt").removeClass().addClass("register_prompt_error").html("电子邮件是必填项，请输入您的Email地址");return false;} else {if (falgEmail) {$("#email_prompt").removeClass().addClass("register_prompt_ok").html('');$(this).removeClass().addClass("register_input");return true;} else {$("#email_prompt").removeClass().addClass("register_prompt_error").html("电子邮件格式不正确，请重新输入");$(this).removeClass().addClass("register_input register_input_Blur");return false;}}}//昵称function ckName() {//判断var myName = $('#nickName').val();var reg = /^[a-zA-Z0-9]{4,20}$/;var falgName = reg.test(myName);if (myName == '') {$("#nickName_prompt").removeClass().addClass("register_prompt_error").html("昵称为必填项，请输入您的昵称");return false;} else {if (falgName) {$("#nickName_prompt").removeClass().addClass("register_prompt_ok").html('');$(this).removeClass().addClass("register_input");return true;} else {$("#nickName_prompt").removeClass().addClass("register_prompt_error").html("昵称格式错误，请用大小写英文字母、数字，长度4-20个字符");$(this).removeClass().addClass("register_input register_input_Blur");return false;}}}//密码function ckPwd() {//判断var myPwd = $('#pwd').val();var reg = /^[a-zA-Z0-9]{6,20}$/;var falgPwd = reg.test(myPwd);if (myPwd == '') {$("#pwd_prompt").removeClass().addClass("register_prompt_error").html("密码为必填项，请设置您的密码");return false;} else {if (falgPwd) {$("#pwd_prompt").removeClass().addClass("register_prompt_ok").html('');$(this).removeClass().addClass("register_input");return true;} else {$("#pwd_prompt").removeClass().addClass("register_prompt_error").html("密码格式错误，请用大小写英文字母、数字，长度6-20个字符");$(this).removeClass().addClass("register_input register_input_Blur");return false;}}}//重复密码function ckPwdAgain() {//判断var myPwd = $('#pwd').val();var myPwdAgain = $('#repwd').val();if (myPwdAgain == '') {$("#repwd_prompt").removeClass().addClass("register_prompt_error").html("确认密码为必填项，请设置您的确认密码");return false;} else {if (myPwd == myPwdAgain) {$("#repwd_prompt").removeClass().addClass("register_prompt_ok").html('');$(this).removeClass().addClass("register_input");return true;} else {$("#repwd_prompt").removeClass().addClass("register_prompt_error").html("两次输入密码不一致，请重新输入");$(this).removeClass().addClass("register_input register_input_Blur");return false;}}}$(function () {//**************焦点************//验证邮箱$("#email").focus(function () {$(this).removeClass().addClass("register_input register_input_Focus");$("#email_prompt").removeClass().addClass("register_prompt").html("此邮箱将是您登录当当网的账号，并将用来接收验证邮件");}).blur(function () {return ckEmail();});//验证昵称$("#nickName").focus(function () {$(this).removeClass().addClass("register_input register_input_Focus");$("#nickName_prompt").removeClass().addClass("register_prompt").html("昵称可由大小写英文字母、数字组成，长度为4-20个字符");}).blur(function () {ckName();});//验证密码$("#pwd").focus(function () {$(this).removeClass().addClass("register_input register_input_Focus");$("#pwd_prompt").removeClass().addClass("register_prompt").html("密码可由大小写英文字母、数字组成，长度6－20个字符");}).blur(function () {return ckPwd();});//验证重复密码$("#repwd").focus(function () {$(this).removeClass().addClass("register_input register_input _Focus");}).blur(function () {return ckPwdAgain();});//***************省市级联*************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['黑龙江省'] = ['黑龙江省', '哈尔滨市'];cityList['其他'] = ['其他'];$("#province").append(function () {var html = "";for (var i in cityList) {html += "<option value=" + i + ">" + i + "</option>";}return html;});$("#province").change(function () {var v = $(this).val();var html = "";if (v == "请选择省/城市") {html = "<option>请选择城市/地区</option>";$("#city").html(html);return;}var citys = cityList[v];$.each(citys, function (i, n) {html += "<option value=" + n + ">" + n + "</option>";});$("#city").html(html);});//**************提交表单**************$("#myform").submit(function () {var num = 0;if (!ckEmail()) {num++;}if (!ckName()) {num++;}if (!ckPwd()) {num++;}if (!ckPwdAgain()) {num++;}//判定if (num > 0) {//有错alert('输入有错误，请检查！');return false;} else {return true;}});//提交按钮样式变化$("#registerBtn").mouseover(function () {$(this).attr("src", "images/register_btn_over.gif");}).mouseout(function () {$(this).attr("src", "images/register_btn_out.gif");});});</script>
商品展示页面：
商品展示代码：
<script type="text/javascript">$(function () {//浏览同级分类function readleft() {var list = new Array("中国当代小说（13880）", "中国近现代小...（640）", "中国古典小说（1547）","四大名著（696）", "港澳台小说（838）", "外国小说（5119）","侦探/悬疑/推...（2519）", "惊悚/恐怖（798）", "魔幻（369）", "科幻 （513）","武侠（574）", "军事（726）", "情感 （6700）","社会（4855）", "都市（949）", "乡土（99）", "职场（176）","财经（292）", "官场（438）", "历史（1329）", "影视小说（501）","作品集（2019）", "世界名著（3273）");var mydl = $('<dl></dl>');$('#product_catList_class').append(mydl);$.each(list, function (i,val) {$('#product_catList_class dl').append('<li>.<a href="#" style="color:red">' + val + '</a></li>');});}readleft();//获取列表形式List,默认是列表形式，因此先取得列表形式的内容var arrayBookList = $("#product_storyList_content").html();//获取大图形式Listfunction getBigBookList() {var $initContent = $("#product_storyList_content");var $bookImg = $initContent.find(".product_storyList_content_left");var contents = "";$initContent.find(".product_storyList_content_right").find("ul").each(function (i, ele) {var div = "";var content = [div, "<div class='big_img_list'><ul><li class='bookImg'>" + $($bookImg[i]).html() + "</li>"];var $li = $(ele).children("li");var $price = $($li[6]).find("span");content.push("<li><dl><dd class='footer_dull_red'>"+ $($price[1]).text() + "</dd><dd class='product_content_delete'>"+ $($price[2]).text() + "</dd><dd class='footer_dull_red'>"+ $($price[0]).text() + "</dd></dl></li>");//价格content.push("<li class='detail'>" + $($li[5]).html() + "</li>");//简介content.push("<li class='detail'>" + $($li[2]).html() + "</li>");//作 者content.push("<li class='detail'>" + $($li[1]).html() + "</li>");//顾客评分content.push("<li class='detail'>" + $($li[3]).html() + "</li>");//出版社content.push("<li class='detail'>" + $($li[4]).html() + "</li></ul></div>");//出版时间contents += content.join("");});return contents;}var bigBookList = getBigBookList();//获取大图形式List//大图，列表的切换function Tabpic() {$('#product_array a').on('click', function () {$(this).addClass('click').siblings().removeClass();var result = $(this).text();if (result == '大图') {$("#product_storyList_content").empty().html(bigBookList);$('.product_storyList_content_right').addClass('big_img_list');$("#product_storyList_content").children(".big_img_list").find("ul").mouseover(function () {$(this).addClass("over");$(this).parent().addClass("over");}).mouseout(function () {$(this).removeClass("over");$(this).parent().removeClass("over");});} else {$("#product_storyList_content").empty().html(arrayBookList);$('.product_storyList_content_right').removeClass('big_img_list');} });}Tabpic();});</script>
<script>$(function() {function clickone() {$('.shopping_commend').toggle(function() {$('.shopping_commend_right').html('<img src="imagesopping_arrow_down.gif" alt="shopping" id="shopping_commend_arrow"/>');$('#shopping_commend_sort').toggle();},function() {$('.shopping_commend_right').html('<img src="imagesopping_arrow_up.gif" alt="shopping" id="shopping_commend_arrow"/>');$('#shopping_commend_sort').toggle();});}clickone();//更新积分和总计function productCount() {//总计var summer = 0;//总积分var integral = 0;//节省金额var freesummer = 0;$('tr[id]').each(function(i, dom) {//商品数量var num = $(dom).children('.shopping_product_list_5').find('input').val();// alert(num);//市场价商品小计var money = num* $(dom).children('.shopping_product_list_3').find('label').text();//alert(freemoney);//当当价商品小计var price = num* $(dom).children('.shopping_product_list_4').find('label').text();//alert(price);//显示节省金额var freemoney = parseFloat(money) - parseFloat(price);freesummer += freemoney;$('#product_save').text(freesummer.toFixed(2));//显示计算总价summer += parseFloat(price);$('#product_total').text(summer.toFixed(2));//显示计算积分integral += $(dom).children('.shopping_product_list_2').text()* num;$('#product_integral').text(integral);});}productCount();var im=$("#myTableProduct").find("input");im.bind({fouse:function(){productCount();},blur:function(){productCount();}});function del() {$('.shopping_product_list_6').find('a').on('click',function() {var yesorno = confirm('你确定要删除吗');if (yesorno) {var num = $('tr[id]').length;$(this).parent().parent().remove();if (num != 1) {productCount();} else {$('#removeAllProduct').remove();$('#myTableProduct').html('<img src="images/register_pic_01.gif"');clearmoorin();}}});}del();function clear() {$('#removeAllProduct').on('click',function() {$('.shopping_product_list').remove();$(this).remove();$('#myTableProduct').html('<img src="images/register_pic_01.gif" /><span><strong>你还没有挑选商品，去挑选<a href="#" style="color:red">看看</a><></span>');clearmoorin();});}clear();//清除系统数据function clearmoorin() {$('#product_save').text('');//显示计算总价$('#product_total').text('');//显示计算积分$('#product_integral').text('');}});
</script>
其余就是显示广告，没什么重要的，好了。。
