jquery 写官网（全部功能）

官网（全部功能）"/>

jquery 写官网（全部功能）

jquery 写官网

最近有个需求就是写一个官网，内容包含：导航/简介/产品/优势/加入我们等。

导航点击事件

<div class="navList"><a class="nav-item active" data-name="one" href="#shouye" target="_self">网站首页</a><a class="nav-item" data-name="two" href="#pinpai" target="_self">品牌简介</a><a class="nav-item" data-name="three" href="#chanpin" target="_self">产品优势</a><a class="nav-item" data-name="four" href="#pingtai" target="_self">平台优势</a><a class="nav-item" data-name="five" href="#join" target="_self">加入我们</a>
</div>

对应的jquery代码：

// 对每个nav-item类名的元素进行遍历，通过each遍历。
// $(this)就是每个nav-item类名的元素，点击事件触发的函数如下：
// 将所有的元素移除class类名active,即选中状态。
// 给当前点击事件的元素添加active类名
// var href = $.attr(this,'href');获取当前元素的href属性内容，然后拼接到地址栏中。
// window.location.hash = href;
$(".nav-item").each(function (index) {$(this).click(function () {$(".nav-item").removeClass("active");$(".nav-item").eq(index).addClass("active");var href = $.attr(this, 'href');// 这个动画没有生效……………………$('html, body').animate({scrollTop: $(href).offset().top}, 50, function () {window.location.hash = href;});return false;})
})

导航部分效果图：

产品部分切换图片

点击“<” ">"按钮时，会实现图片的切换。

html代码：

<div class="chanpin-con"><div class="left" id="left"><img src="../image/left.png" alt="左"></div><div class="chanpin-item"><div><div class="chanpin-tit">智能加热</div><div class="chanpin-sub">Intelligent heating</div></div><div><div class="chanpin-tit">三档可调</div><div class="chanpin-sub">Three-speed adjustable</div></div><div><div class="chanpin-tit">防水防风面料</div><div class="chanpin-sub">Waterproof and windproof fabric</div></div></div><div class="chanpin-img"><img src="../image/clothes/cloth0.png" alt="产品图"></div><div class="chanpin-item right"><div><div class="chanpin-tit">防钻绒工艺</div><div class="chanpin-sub">Anti-pile drilling technology</div></div><div><div class="chanpin-tit">恒温控制</div><div class="chanpin-sub">Constant temperature control</div></div><div><div class="chanpin-tit">远红外线理疗</div><div class="chanpin-sub">Far Infrared physiotherapy</div></div></div><div class="right" id="right"><img src="../image/right.png" alt="右"></div>
</div>

js部分代码：
处理思路：将所有图片放在一个数组中，点击切换按钮时，选取不同的图片进行展示即可。

 var imgArr = ["../image/clothes/cloth0.png", "../image/clothes/cloth1.png", "../image/clothes/cloth2.png", "../image/clothes/cloth3.png", "../image/clothes/cloth4.png", "../image/clothes/cloth5.png"];
var len = imgArr.length;$("#left").click(function () {if (index === 0) {index = len - 1;} else {index--;}$(".chanpin-img img").attr("src", imgArr[index]);
})
$("#right").click(function () {if (index === len - 1) {index = 0;} else {index++;}$(".chanpin-img img").attr("src", imgArr[index]);})

加入我们部分

地图部分的代码：
此处使用的是百度地图API，是最简单的定位的代码。

html代码：

<div class="join-map" id="allmap"></div>

js代码：

// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(120.21926, 30.345913), 50);
map.enableScrollWheelZoom(true);// 用经纬度设置地图中心点
function theLocation() {if (document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "") {map.clearOverlays();var new_point = new BMap.Point(document.getElementById("longitude").value, document.getElementById("latitude").value);var marker = new BMap.Marker(new_point);  // 创建标注map.addOverlay(marker);              // 将标注添加到地图中map.panTo(new_point);}
}

加入我们部分的代码：

jquery校验手机号

var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if (!myreg.test(phone)) {alert('请输入有效的手机号码！');return;
}

jquery校验邮箱

var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
if (!reg.test(email)) { //正则验证不通过，格式不对alert("请输入正确的邮箱！");return false;
}

jquery存缓存与取缓存

var time = localStorage.getItem("uid") || guid();
localStorage.setItem("uid", time);

ajax请求数据

//ajax:请求方式:type  头部：headers  请求地址：url  请求发送的数据：data 请求成功返回的函数：success 请求失败返回的函数：error
var name = $("#name").val();
var phone = $("#phone").val();
var email = $("#email").val();
var message = $("#message").val();
if (!name || !phone || !email) {alert("姓名 电话 邮箱为必填项,请填写完整！");return;
};
var list = {"joinerName": name,"joinerTel": phone,"joinerMail": email,"joinerMsg": message
};
$.ajax({//请求方式type: "POST",//请求的媒体类型headers: { 'Content-Type': 'application/json;charset=utf8', 'pt': 'web', 'dk': time, 'pk': 'mall' },//请求地址url: "/user/join/createJoiner",//数据，json字符串data: JSON.stringify(list),//请求成功success: function (result) {console.log(result);if (result.code === 200) {alert("信息提交成功!");$("#name").val("");$("#phone").val("");$("#email").val("");$("#message").val("");}},//请求失败，包含具体的错误信息error: function (e) {console.log(e.status);console.log(e.responseText);flag = false;}
});

nginx的使用

1. 下载nginx
   在ajax调取官网接口数据时，会出现跨域的情况。这个时候如果想要获取到接口数据，则可以通过nginx解决跨域问题。
   
2. 使用方法：
   双击nginx.exe，会弹窗然后消失。
   将写好的代码放入到html文件夹下面。
   
   可以是一个新的文件夹，也可以是xxx.html文件。

找到此文件夹中的主html文件。双击打开，此时打开的地址是本地路径。


此时，需要修改地址，具体改为的内容需要查看conf文件夹中的nginx.conf，此文件以记事本格式打开后，如下：

找到server部分，listen:监听的端口号是8081,serve_name:路径的地址是：localhost

所以可以将已经打开的本地路径改为：localhost:8081,就是要从html/之前的全部都替换掉。

改为：

将conf文件夹下面的nginx.conf文件中的内容更改：
将下面的location 部分前面的“#”去掉，如果带着“#”，则表示是注释状态。

需要调用的api接口地址是:http://api/test.zjddwl/user/……
所以：
代理的网址为：
location 后面的内容应该是/user，就是接口地址除去域名之外的内容。这样在ajax调用的时候就可以直接使用代理的网址了。