// JavaScript Document
/*
*所有js效果就绪，加载网页即执行
*
*/
$(function(){
/**** 根据显示器分辨率，选择css文件 ****/
if(screen.width > 960){
$("link").attr("href","css/style.css");
$("head").append("<link>");
}
/**** 根据显示器分辨率，选择css文件 ****/
/*********** About页面Banner切换 ***********/
$("#about_slider").easySlider({
auto:true,
width:415,
height:362});
/*********** About页面Banner切换 ***********/
/*********** Contact页面表单验证 **************/
var inputNameObj = $("#name");
var inputEmailObj = $("#email");
var inputMessageObj = $("#message");
var isNameOn = false;
var isEmailOn = false;
var isMessageOn = false;
/* 初始化按钮是否可按 */
isButton();
/* 处理name字段缓存 */
if(!isNull(inputNameObj.val())){
var text = inputNameObj.val();
if(!isName(text)){
$("#name").css("border-color","red");
isNameOn = false;
}
else{
$("#name").css("border-color","black");
isNameOn = true;
}
isButton();
}
/* 处理email字段缓存 */
if(!isNull(inputEmailObj.val())){
var text = inputEmailObj.val();
if(isNull(text) || !isEmail(text)){
$("#email").css("border-color","red");
isEmailOn = false;
}
else{
$("#email").css("border-color","black");
isEmailOn = true;
}
isButton();
}
/* 处理message字段缓存 */
if(!isNull(inputMessageObj.val())){
var text = inputMessageObj.val();
if(isNull(text) || !isMessage(text)){
$("#message").css("border-color","red");
isMessageOn = false;
}
else{
$("#message").css("border-color","black");
isMessageOn = true;
}
isButton();
}
/* 检测SUBMIT按钮是否可按*/
function isButton(){
if(isNameOn && isEmailOn && isMessageOn){
$("#button").css("background-color","#f04922");
$("#button").removeAttr("disabled");
}
else{
$("#button").css("background-color","#666");
$("#button").attr("disabled",true);
}
};
/* name字段输入时的格式检测 */
inputNameObj.keyup(function(){
var text = inputNameObj.val();
if(isNull(text) || !isName(text)){
$("#name").css("border-color","red");
isNameOn = false;
}
else{
$("#name").css("border-color","black");
isNameOn = true;
}
isButton();
});
/* email字段输入时的格式检测 */
inputEmailObj.keyup(function(){
var text = inputEmailObj.val();
if(isNull(text) || !isEmail(text)){
isEmailOn = false;
}
else{
$("#email").css("border-color","black");
isEmailOn = true;
}
isButton();
});
/* message字段输入时的格式检测 */
inputMessageObj.keyup(function(){
var text = inputMessageObj.val();
if(isNull(text) || !isMessage(text)){
$("#message").css("border-color","red");
isMessageOn = false;
}
else{
$("#message").css("border-color","black");
isMessageOn = true;
}
isButton();
});
/* 检测是否为空或者空格 */
function isNull(str){
if(str == "")
{
return true;
}
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
};
/* name字段只有字母和数字，以字母开头 */
function isName(str){
var regu = /^[a-zA-Z][0-9a-zA-Z]*$/;
var re = new RegExp(regu);
if(regu.test(str)){
return true;
}
else{
return false;
}
};
/* email字段符合邮件格式 */
function isEmail(str){
var myReg = /^[-_A-Za-z0-9\.]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if(myReg.test(str)){
return true;
}
else{
return false;
}
};
/* message字段不能含不可见字符，如+#&=|<>^~ */
function isMessage(str){
var myReg = /[\+\#\&\=\|\<\>\^\~]/;
if(myReg.test(str)){
return false;
}
else{
return true;
}
};
/* name字段光标移出时的检测 */
$("#name").blur(function(){
var text = inputNameObj.val();
if(isNull(text) || !isName(text)){
$("#name").css("border-color","red");
isNameOn = false;
}
else{
$("#name").css("border-color","black");
isNameOn = true;
}
isButton();
});
/* email字段光标移出时的检测 */
$("#email").blur(function(){
var text = inputEmailObj.val();
if(isNull(text) || !isEmail(text)){
$("#email").css("border-color","red");
isEmailOn = false;
}
else{
$("#email").css("border-color","black");
isEmailOn = true;
}
isButton();
});
/*message字段光标移出时的检测*/
$("#message").blur(function() {
var text = inputMessageObj.val();
if(isNull(text) || !isMessage(text)){
$("#message").css("border-color","red");
isMessageOn = false;
}
else{
$("#message").css("border-color","black");
isMessageOn = true;
}
isButton();
});
/* 按钮触发事件 */
$("#button").click(function(){
/* post的httprequest请求
夹带name、email、message
url为"data/contact.json"
*/
$.post("data/contact.json",
{
name:$("#name").val(),
email:$("#email").val(),
message:$("#message").val()
},function(data){
$.each(data,function(InfoIndex,Info){
if(InfoIndex == "callback")
{
alert(Info);
}
});
});
});
/*********** Contact页面表单验证 **************/
/*********** 鼠标经过图片效果 **************/
$("#about_text ul img").each(function(k,img){
new JumpObj(img,10);
$(img).hover(function(){
this.parentNode.parentNode.className="hover";
});
});
$("#footer ul img").each(function(k, img) {
new JumpObj(img,10);
$(img).hover(function() {
this.parentNode.parentNode.className="hover";
});
});
/*********** 鼠标经过图片效果 **************/
});
/*
*About页面Banner实现从右到左切换效果函数
*
*/
(function($) {
$.fn.easySlider = function(options){
// 默认参数设置
var defaults = {
speed: 1300,
auto: false,
pause: 3000,
width: 415,
height: 362,
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = options.width;
var h = options.height;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
$("li", obj).css('float','right');
function animate(dir,clicked){
var ot = t;
if(ot == ts){
t = 0;
$("ul",obj).css("margin-left","0px")
};
t = t + 1;
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
options.speed
);
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.speed+options.pause);
};
};
// 初始化
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
});
};
})(jQuery);
/*
*
*鼠标经过图片抖动函数
*
*/
function JumpObj(elem, range, startFunc, endFunc) {
//图片鼠标移上去的动画效果
var curMax = range = range || 6;
startFunc = startFunc || function(){};
endFunc = endFunc || function(){};
var drct = 0;
var step = 1;
init();
function init() { elem.style.position = 'relative';active() }
function active() { elem.onmouseover = function(e) {if(!drct)jump()} }
function deactive() { elem.onmouseover = null }
function jump() {
var t = parseInt(elem.style.top);
if (!drct) motionStart();
else {
var nextTop = t - step * drct;
if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop + 'px';
else if(nextTop < -curMax) drct = -1;
else {
var nextMax = curMax / 2;
if (nextMax < 1) {motionOver();return;}
curMax = nextMax;
drct = 1;
}
}
setTimeout(function(){jump()}, 200 / (curMax+3) + drct * 3);
}
function motionStart() {
startFunc.apply(this);
elem.style.top='0';
drct = 1;
}
function motionOver() {
endFunc.apply(this);
curMax = range;
drct = 0;
elem.style.top = '0';
}
this.jump = jump;
this.active = active;
this.deactive = deactive;
}
这里的代码是不是没写submit后网页的返回结果
JS操作DOM属性
本文介绍JavaScript中使用attr方法来修改HTML元素属性的方式，通过示例展示了如何使元素失效。
扫一扫
842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
