fore_home.js
var index = 1;
$(function () {
//主页切换动画
getTimer();
var timer = setInterval(getTimer, 3000);
$(".banner_main > a").attr("href", "/tmall/product/" + $("#banner1").attr("name"));
//单击商品分类链接时
$(".banner_div a").click(function () {
$(".banner_main").unbind("click");
});
//悬浮到分类导航时
$(".banner_nav>li").hover(function () {
$(this).find(">a").css("color", "#6347ED");
var div = $(this).find(">.banner_div").css("display", "block");
if ($(this).attr("data-status") === "ajaxShow") {
return;
}
$(this).attr("data-status", "ajaxShow");
$.ajax({
type: "GET",
url: "product/nav/" + $(this).attr("data-toggle"),
data: null,
dataType: "json",
success: function (data) {
if (data.success) {
var list = data.category.complexProductList;
for (var i = 0; i < list.length; i++) {
if (list[i].length === 0) {
continue;
}
div.append("<div class='hot_word'></div>");
var hot_word_div = div.children(".hot_word").last();
for (var j = 0; j < list[i].length; j++) {
var product_title = list[i][j].product_title;
var index = product_title.indexOf(' ');
if (index !== -1) {
product_title = product_title.substring(0, index);
}
hot_word_div.append("<a href='product/" + list[i][j].product_id + "'>" + product_title + "</a>");
}
}
//热词样式
div.find("a").each(function () {
var random = parseInt(Math.random() * 10);
if (random > 7) {
$(this).css("color", "#6347ED");
}
});
}
},
error: function (data) {
},
beforeSend: function () {
}
});
}, function () {
$(this).find(">a").css("color", "#FFFFFF");
$(this).find(".banner_div").css("display", "none");
});
//搜索框验证
$('form').submit(function () {
if ($(this).find("input[name='product_name']").val() === "") {
alert("请输入关键字!");
return false;
}
});
//悬浮到指定节点时
$(".banner_slider>li").hover(function () {
index = parseInt($(this).attr("id").substring($(this).attr("id").indexOf("_") + 1));
clearInterval(timer);
getTimer();
}, function () {
timer = setInterval(getTimer, 3000);
});
});
function getTimer() {
var banner = $(".banner");
var sliders = $(".banner_slider>li");
var color;
var img = $("#banner" + index);
$(".banner_main > a").attr("href", "/tmall/product/" + img.attr("name"));
if (index === 1) {
color = "#0F1322";
} else if (index === 2 || index === 5) {
color = "#E8E8E8";
} else if (index === 3) {
color = "#FBB4B0";
} else if (index === 4) {
color = "#262C42";
} else {
color = "#BD160D";
}
sliders.css("background", "rgba(0,0,0,0.4)");
$("#slider_" + index).css("background", "rgba(255,255,255,0.4)");
img.stop(true, true).fadeIn(1000);
banner.stop(true, true).animate({
"backgroundColor": color
}, 800);
img.siblings('img').stop(true, true).fadeOut(1000);
index++;
index = index > 6 ? 1 : index;
}
- 首先定义了一个变量
index
,并初始化为1。 - 在
$(function(){...})
中,定义了页面加载完成后的初始化操作和事件处理逻辑。 getTimer
函数用于控制轮播图的切换效果。- 在页面加载完成后,设置了一个定时器
timer
,每隔3秒调用一次getTimer
函数,实现轮播效果。 - 给
.banner_main > a
设置了链接地址,根据#banner1
的name
属性来动态生成链接。 - 给
.banner_div a
绑定了点击事件,点击时取消了.banner_main
的点击事件。 - 给
.banner_nav>li
绑定了鼠标悬停事件,当鼠标悬停在分类导航上时,发送 AJAX 请求获取数据,并根据返回的数据动态生成热词链接,并设置样式。 - 给搜索框绑定了表单提交事件,当搜索关键字为空时弹出提示。
- 给
.banner_slider>li
绑定了鼠标悬停事件,用于控制轮播图的切换效果。
总体来说,这段代码是一个典型的使用jQuery实现页面交互效果的脚本,包括轮播图、分类导航、搜索框验证等功能。
fore_login.js
$(function () {
//二维码动画
$("#qrcodeA").hover(
function () {
$(this).stop().animate({left: "13px"}, 450, function () {
$("#qrcodeB").stop().animate({opacity: 1}, 300)
});
}
, function () {
$("#qrcodeB").css("opacity", "0");
$(this).stop().animate({left: "80px"}, 450);
});
//登录方式切换
$("#loginSwitch").click(function () {
var messageSpan = $(".loginMessageMain").children("span");
if ($(".pwdLogin").css("display") === "block") {
$(".pwdLogin").css("display", "none");
$(".qrcodeLogin").css("display", "block");
messageSpan.text("密码登录在这里");
$(this).removeClass("loginSwitch").addClass("loginSwitch_two");
} else {
$(".pwdLogin").css("display", "block");
$(".qrcodeLogin").css("display", "none");
messageSpan.text("扫码登录更安全");
$(this).removeClass("loginSwitch_two").addClass("loginSwitch");
}
});
$("#pwdLogin").click(function () {
var messageSpan = $(".loginMessageMain").children("span");
$(".pwdLogin").css("display", "block");
$(".qrcodeLogin").css("display", "none");
messageSpan.text("扫码登录更安全");
$("#loginSwitch").removeClass("loginSwitch_two").addClass("loginSwitch");
});
//登录验证
$(".loginForm").submit(function () {
var yn = true;
$(this).find(":text,:password").each(function () {
if ($.trim($(this).val()) === "") {
styleUtil.errorShow($("#error_message_p"), "请输入用户名和密码!");
yn = false;
return yn;
}
});
if (yn) {
$.ajax({
type: "POST",
url: "/tmall/login/doLogin",
data: {"username": $.trim($("#name").val()), "password": $.trim($("#password").val())},
dataType: "json",
success: function (data) {
$(".loginButton").val("登 录");
if (data.success) {
location.href = "/tmall";
} else {
styleUtil.errorShow($("#error_message_p"), "用户名和密码错误!");
}
},
error: function (data) {
$(".loginButton").val("登 录");
styleUtil.errorShow($("#error_message_p"), "服务器异常,请刷新页面再试!");
},
beforeSend: function () {
$(".loginButton").val("正在登录...");
}
});
}
return false;
});
$(".loginForm :text,.loginForm :password").focus(function () {
styleUtil.errorHide($("#error_message_p"));
});
});
- 在
$(function(){...})
中,定义了页面加载完成后的初始化操作和事件处理逻辑。 - 给
#qrcodeA
绑定了鼠标悬停事件,当鼠标悬停在元素上时,通过动画效果改变元素的位置,并显示另一个二维码。 - 给
#loginSwitch
绑定了点击事件,用于切换登录方式。根据当前显示的登录方式,切换到另一种登录方式,并修改提示信息和样式。 - 给
#pwdLogin
绑定了点击事件,用于切换到密码登录方式,并修改提示信息和样式。 - 给
.loginForm
绑定了表单提交事件,用于验证用户输入的用户名和密码,然后通过 AJAX 请求发送到服务器进行登录验证。根据返回的数据,显示相应的提示信息或者跳转到首页。 - 给
.loginForm :text,.loginForm :password
绑定了焦点事件,用于在输入框获得焦点时隐藏错误提示信息。
总体来说,这段代码实现了用户登录页面的交互逻辑,包括二维码动画效果、登录方式切换、登录验证等功能。
fore_register.js
$(function () {
//刷新下拉框
$('#select_user_address_province').selectpicker('refresh');
$('#select_user_address_city').selectpicker('refresh');
$('#select_user_address_district').selectpicker('refresh');
//改变订单信息时
$('#select_user_address_province').change(function () {
$.ajax({
type: "GET",
url: "/tmall/address/" + $(this).val(),
data: null,
dataType: "json",
success: function (data) {
$(".loader").hide();
if (data.success) {
$("#select_user_address_city").empty();
$("#select_user_address_district").empty();
for (var i = 0; i < data.addressList.length; i++) {
var address_id = data.addressList[i].address_areaId;
var address_name = data.addressList[i].address_name;
$("#select_user_address_city").append("<option value='" + address_id + "'>" + address_name + "</option>")
}
for (var j = 0; j < data.childAddressList.length; j++) {
var childAddress_id = data.childAddressList[j].address_areaId;
var childAddress_name = data.childAddressList[j].address_name;
$("#select_user_address_district").append("<option value='" + childAddress_id + "'>" + childAddress_name + "</option>")
}
$('#select_user_address_city').selectpicker('refresh');
$("#select_user_address_district").selectpicker('refresh');
$("span.address-province").text($("#select_user_address_province").find("option:selected").text());
$("span.address-city").text($("#select_user_address_city").find("option:selected").text());
$("span.address_district").text($("#select_user_address_district").find("option:selected").text());
} else {
alert("加载地区信息失败,请刷新页面再试!")
}
},
beforeSend: function () {
$(".loader").show();
},
error: function () {
alert("加载地区信息失败,请刷新页面再试!")
}
});
});
$("#select_user_address_city").change(function () {
$.ajax({
type: "GET",
url: "/tmall/address/" + $(this).val(),
data: null,
dataType: "json",
success: function (data) {
$(".loader").hide();
if (data.success) {
$("#select_user_address_district").empty();
for (var i = 0; i < data.addressList.length; i++) {
var address_id = data.addressList[i].address_areaId;
var address_name = data.addressList[i].address_name;
$("#select_user_address_district").append("<option value='" + address_id + "'>" + address_name + "</option>")
}
$('#select_user_address_district').selectpicker('refresh');
$("span.address-city").text($("#select_user_address_city").find("option:selected").text());
$("span.address_district").text($("#select_user_address_district").find("option:selected").text());
} else {
alert("加载地区信息失败,请刷新页面再试!")
}
},
beforeSend: function () {
$(".loader").show();
},
error: function () {
alert("加载地区信息失败,请刷新页面再试!")
}
});
});
$("#select_user_address_district").change(function () {
$("span.address_district").text($(this).find("option:selected").text());
});
$("#textarea_details_address").bind('input propertychange', function () {
$(".address_details").text($(this).val());
});
//用户名input获取光标
$("#user_name").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请输入用户名").css("display", "inline-block").css("color", "#00A0E9");
});
//密码input获取光标
$("#user_password").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请输入密码").css("display", "inline-block").css("color", "#00A0E9");
});
//再次输入密码input获取光标
$("#user_password_one").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请再次输入密码").css("display", "inline-block").css("color", "#00A0E9");
});
//昵称input获取光标
$("#user_nickname").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请输入昵称").css("display", "inline-block").css("color", "#00A0E9");
});
//出生日期input获取光标
$("#user_birthday").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请输入出生日期").css("display", "inline-block").css("color", "#00A0E9");
});
//input离开光标
$(".form-text").blur(function () {
$(this).css("border-color", "#cccccc")
.next().css("display", "none");
});
//非空验证
$("#register_sub").click(function () {
//用户名
var user_name = $.trim($("input[name=user_name]").val());
//密码
var user_password = $.trim($("input[name=user_password]").val());
//确认密码
var user_password_one = $.trim($("input[name=user_password_one]").val());
//昵称
var user_nickname = $.trim($("input[name=user_nickname]").val());
//出生日期
var user_birthday = $.trim($("input[name=user_birthday]").val());
//验证密码的格式 包含数字和英文字母
var reg = new RegExp(/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/);
if (user_name == null || user_name === "") {
$("#user_name").css("border", "1px solid red")
.next().text("请输入用户名").css("display", "inline-block").css("color", "red");
return false;
} else if (user_password == null || user_password === "") {
$("#user_password").css("border", "1px solid red")
.next().text("请输入密码").css("display", "inline-block").css("color", "red");
return false;
} else if (user_password_one == null || user_password_one === "") {
$("#user_password_one").css("border", "1px solid red")
.next().text("请重复输入密码").css("display", "inline-block").css("color", "red");
return false;
}else if(!reg.test(user_password)){
$("#user_password").css("border", "1px solid red")
.next().text("密码格式必须包含数字和字母").css("display", "inline-block").css("color", "red");
return false;
} else if (user_password !== user_password_one) {
$("#user_password_one").css("border", "1px solid red")
.next().text("两次输入密码不相同").css("display", "inline-block").css("color", "red");
return false;
} else if (user_nickname == null || user_nickname === "") {
$("#user_nickname").css("border", "1px solid red")
.next().text("请输入昵称").css("display", "inline-block").css("color", "red");
return false;
} else if (user_birthday == null || user_birthday === "") {
$("#user_birthday").css("border", "1px solid red")
.next().text("请选择出生日期").css("display", "inline-block").css("color", "red");
return false;
}
$.ajax({
type: "POST",
url: "/tmall/register/doRegister",
data: {
"user_name": user_name,
"user_password": user_password,
"user_nickname": user_nickname,
"user_birthday": user_birthday,
"user_gender": $("input[name=user_gender]:checked").val(),
"user_address": $("#select_user_address_district").val()
},
dataType: "json",
success: function (data) {
if (data.success) {
$(".msg").stop(true, true).animate({
opacity: 1
}, 550, function () {
$(".msg").animate({
opacity: 0
}, 1500, function () {
location.href = "/tmall/login";
});
});
} else {
$("#user_name").css("border", "1px solid red")
.next().text(data.msg).css("display", "inline-block").css("color", "red");
}
},
error: function (data) {
location.reload(true);
},
beforeSend: function () {
}
});
});
});
- 在
$(function(){...})
中,定义了页面加载完成后的初始化操作和事件处理逻辑。 - 使用
selectpicker('refresh')
方法刷新下拉框的显示。 - 给
#select_user_address_province
绑定了 change 事件,当省份选择发生变化时,发送 AJAX 请求获取对应的城市和区域信息,并根据返回的数据动态更新城市和区域下拉框的选项。 - 给
#select_user_address_city
和#select_user_address_district
绑定了 change 事件,当城市和区域选择发生变化时,发送 AJAX 请求获取对应的区域信息,并根据返回的数据动态更新区域下拉框的选项。 - 给
#textarea_details_address
绑定了 input 和 propertychange 事件,用于实时更新详细地址的显示。 - 给各个输入框绑定了 focus 和 blur 事件,用于输入框获取和失去焦点时的样式和提示处理。
- 给
#register_sub
绑定了点击事件,用于进行用户注册信息的非空验证,然后通过 AJAX 请求将注册信息发送到服务器进行注册。根据返回的数据,显示相应的提示信息或者跳转到登录页面。
总体来说,这段代码实现了用户注册页面的交互逻辑,包括地区选择、输入框提示、非空验证和注册信息提交等功能。
fore_userDatiles.js
$(function () {
//刷新下拉框
$('#select_user_address_province').selectpicker('refresh');
$('#select_user_address_city').selectpicker('refresh');
$('#select_user_address_district').selectpicker('refresh');
//改变订单信息时
$('#select_user_address_province').change(function () {
$.ajax({
type: "GET",
url: "/tmall/address/" + $(this).val(),
data: null,
dataType: "json",
success: function (data) {
$(".loader").hide();
if (data.success) {
$("#select_user_address_city").empty();
$("#select_user_address_district").empty();
for (var i = 0; i < data.addressList.length; i++) {
var address_id = data.addressList[i].address_areaId;
var address_name = data.addressList[i].address_name;
$("#select_user_address_city").append("<option value='" + address_id + "'>" + address_name + "</option>")
}
for (var j = 0; j < data.childAddressList.length; j++) {
var childAddress_id = data.childAddressList[j].address_areaId;
var childAddress_name = data.childAddressList[j].address_name;
$("#select_user_address_district").append("<option value='" + childAddress_id + "'>" + childAddress_name + "</option>")
}
$('#select_user_address_city').selectpicker('refresh');
$("#select_user_address_district").selectpicker('refresh');
$("span.address-province").text($("#select_user_address_province").find("option:selected").text());
$("span.address-city").text($("#select_user_address_city").find("option:selected").text());
$("span.address_district").text($("#select_user_address_district").find("option:selected").text());
} else {
alert("加载地区信息失败,请刷新页面再试!")
}
},
beforeSend: function () {
$(".loader").show();
},
error: function () {
alert("加载地区信息失败,请刷新页面再试!")
}
});
});
$("#select_user_address_city").change(function () {
$.ajax({
type: "GET",
url: "/tmall/address/" + $(this).val(),
data: null,
dataType: "json",
success: function (data) {
$(".loader").hide();
if (data.success) {
$("#select_user_address_district").empty();
for (var i = 0; i < data.addressList.length; i++) {
var address_id = data.addressList[i].address_areaId;
var address_name = data.addressList[i].address_name;
$("#select_user_address_district").append("<option value='" + address_id + "'>" + address_name + "</option>")
}
$('#select_user_address_district').selectpicker('refresh');
$("span.address-city").text($("#select_user_address_city").find("option:selected").text());
$("span.address_district").text($("#select_user_address_district").find("option:selected").text());
} else {
alert("加载地区信息失败,请刷新页面再试!")
}
},
beforeSend: function () {
$(".loader").show();
},
error: function () {
alert("加载地区信息失败,请刷新页面再试!")
}
});
});
$("#select_user_address_district").change(function () {
$("span.address_district").text($(this).find("option:selected").text());
});
//用户名input获取光标
$("#user_name").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请输入用户名").css("display", "inline-block").css("color", "#00A0E9");
});
//密码input获取光标
$("#user_password").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请输入密码").css("display", "inline-block").css("color", "#00A0E9");
});
//再次输入密码input获取光标
$("#user_password_one").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请再次输入密码").css("display", "inline-block").css("color", "#00A0E9");
});
//昵称input获取光标
$("#user_nickname").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请输入昵称").css("display", "inline-block").css("color", "#00A0E9");
});
//出生日期input获取光标
$("#user_birthday").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请输入出生日期").css("display", "inline-block").css("color", "#00A0E9");
});
//真实姓名input获取光标
$("#user_realname").focus(function () {
$(this).css("border", "1px solid #3879D9")
.next().text("请输入真实姓名").css("display", "inline-block").css("color", "#00A0E9");
});
//input离开光标
$(".form-text").blur(function () {
$(this).css("border-color", "#cccccc")
.next().css("display", "none");
});
//非空验证
$("#register_sub").click(function () {
//真实姓名
var user_realname = $.trim($("input[name=user_realname]").val());
//密码
var user_password = $.trim($("input[name=user_password]").val());
//确认密码
var user_password_one = $.trim($("input[name=user_password_one]").val());
//昵称
var user_nickname = $.trim($("input[name=user_nickname]").val());
//出生日期
var user_birthday = $.trim($("input[name=user_birthday]").val());
//验证密码的格式 包含数字和英文字母
var reg = new RegExp(/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/);
if (user_realname == null || user_realname === "") {
$("#user_realname").css("border", "1px solid red")
.next().text("请输入真实姓名").css("display", "inline-block").css("color", "red");
return false;
} else if (user_password == null || user_password === "") {
$("#user_password").css("border", "1px solid red")
.next().text("请输入密码").css("display", "inline-block").css("color", "red");
return false;
} else if (user_password_one == null || user_password_one === "") {
$("#user_password_one").css("border", "1px solid red")
.next().text("请重复输入密码").css("display", "inline-block").css("color", "red");
return false;
} else if (!reg.test(user_password)) {
$("#user_password").css("border", "1px solid red")
.next().text("密码格式必须包含数字和字母").css("display", "inline-block").css("color", "red");
return false;
} else if (user_password !== user_password_one) {
$("#user_password_one").css("border", "1px solid red")
.next().text("两次输入密码不相同").css("display", "inline-block").css("color", "red");
return false;
} else if (user_nickname == null || user_nickname === "") {
$("#user_nickname").css("border", "1px solid red")
.next().text("请输入昵称").css("display", "inline-block").css("color", "red");
return false;
} else if (user_birthday == null || user_birthday === "") {
$("#user_birthday").css("border", "1px solid red")
.next().text("请选择出生日期").css("display", "inline-block").css("color", "red");
return false;
}
return true;
});
});
//图片上传
function uploadImage(fileDom) {
//获取文件
var file = fileDom.files[0];
//判断类型
var imageType = /^image\//;
if (file === undefined || !imageType.test(file.type)) {
alert("请选择图片!");
return;
}
//判断大小
if (file.size > 512000) {
alert("图片大小不能超过500K!");
return;
}
//清空值
$(fileDom).val('');
var formData = new FormData();
formData.append("file", file);
//上传图片
$.ajax({
url: "/tmall/user/uploadUserHeadImage",
type: "post",
data: formData,
contentType: false,
processData: false,
dataType: "json",
mimeType: "multipart/form-data",
success: function (data) {
if (data.success) {
$(fileDom).prev("img").attr("src","/tmall/res/images/item/userProfilePicture/"+data.fileName);
$("#user_profile_picture_src_value").val(data.fileName);
} else {
alert("图片上传异常!");
}
},
beforeSend: function () {
},
error: function () {
}
});
}
- 在
$(function(){...})
中,定义了页面加载完成后的初始化操作和事件处理逻辑。 - 使用
selectpicker('refresh')
方法刷新下拉框的显示。 - 给
#select_user_address_province
绑定了 change 事件,当省份选择发生变化时,发送 AJAX 请求获取对应的城市和区域信息,并根据返回的数据动态更新城市和区域下拉框的选项。 - 给
#select_user_address_city
和#select_user_address_district
绑定了 change 事件,当城市和区域选择发生变化时,发送 AJAX 请求获取对应的区域信息,并根据返回的数据动态更新区域下拉框的选项。 - 给
#textarea_details_address
绑定了 input 和 propertychange 事件,用于实时更新详细地址的显示。 - 给各个输入框绑定了 focus 和 blur 事件,用于输入框获取和失去焦点时的样式和提示处理。
- 给
#register_sub
绑定了点击事件,用于进行用户注册信息的非空验证,然后通过 AJAX 请求将注册信息发送到服务器进行注册。根据返回的数据,显示相应的提示信息或者跳转到登录页面。
总体来说,这段代码实现了用户注册页面的交互逻辑,包括地区选择、输入框提示、非空验证和注册信息提交等功能。