这真的是我第一次这么认真的写博客。。。
先看一下总体结构
然后就是主页面效果图
登录页面
注册页面
下面剖入代码：
主页页面：
<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++;
//要超出了则归0
if (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();
//Tab
Tab();
$("#bookTab .book_class dl dd").hover(function () {
$(this).css("border", "2px solid blue");//??
}, function () {
$(this).css("border", "");
});
//书讯快递的内容循环垂直向上滚动
movedome();
});
</script>
登录页面
<script>
//Email
function checkEmail() {
var myEmail = $('#email').val();
if (myEmail == '') {
return false;
} else {
return true;
}
}
//Pwd
function 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">
//Email
function 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();
//获取大图形式List
function 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>
其余就是显示广告，没什么重要的，好了。。
