给大家介绍几种实用的JS的使用，代码很简单，很容易理解。
一.固定菜单栏
实现效果：当页面向下滚动时，菜单栏始终固定在页面的最上方。
HTML：
<div class="nav" id="divId">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
</ul>
</div>
CSS:(根据实际情况设置CSS):
<!--当鼠标滑动时，改变菜单栏颜色，其余的CSS根据情况制定-->
.nav ul li a:hover{
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#fff;
}
JS代码:
// 定义菜单栏离页面顶部的距离，默认为200
var divOffsetTop = 500;//滚动事件
window.onscroll=function(){
var div = document.getElementById("divId");// 计算页面滚动了多少（需要区分不同浏览器）
var topVal = 0;
if(window.pageYOffset){
topVal = window.pageYOffset;}
else if(document.documentElement.scrollTop ){//IE678 的非quirk模式
topVal = document.documentElement.scrollTop;
}
else if(document.body.scrolltop){//IE678 的quirk模式
topVal = document.body.scrolltop;
}
if(topVal <= divOffsetTop){
div.style.position = "";
}
else {
div.style.position = "fixed";}};
// 页面加载完之后，计算菜单栏到页面顶部的实际距离
window.onload=function(){
var div = document.getElementById("divId");
divOffsetTop = div.offsetTop;
};
效果图：
二.登录/注册页面，用户名框和密码框的基本设置
效果：
1.用户名输入框，打开页面可以看到“输入ID或用户名字样”，点击框后字样隐藏，用户进行输入。
2.密码输入框，打开页面看到“输入密码等字样”，点击后字样隐藏，用户输入密码加密处理。
//用户名输入框
<div class="input"><!--CSS样式和INPUT框的名字自行更改-->
<input name="username" class="text" onFocus="if(this.value=='输入用户名') this.value=' ' onBlur="if(this.value=='') this.value='输入用户名' " value="${name}" !important" type="text">
</div>
//密码输入框
<div class="input">
<label class="l-login login-password"></label>
<input name="password" class="text" onFocus="$('.login_password').hide()" onBlur="if(this.value=='') $('.login_password').show()" value="${password}" type="password">
</div>
三.注册页面，输入密码与确认密码是否相同的检测
效果：用户在注册页面输入密码加密处理，再次确认密码后如果两次密码相同则在屏幕输出“密码相同”，否则“密码不相同”。
HTML：输入框的设置与二.登录/注册界面相同
CSS：根据实际调节
JS：
function passwordcheck(){
var pw1 = document.getElementById("registerpass").value;
var pw2 = document.getElementById("registernewpass").value;
if(pw1==pw2){
document.getElementById(“提示语”).’innerHTML="密码相同"; //当两次密码输入完全相同时弹出提示语句：密码相同
document.getElementById("submit").disabled=false; }else{
document.getElementById(“提示语”).innerHTML="密码不相同”;//密码不同时 document.getElementById("submit").disabled=true;
} }
四.JS实现物品数量的加减
效果：点击“+”数量增加，“-”数量减少
HTML+CSS：
<div class="box">
<div class="mount1">
<input id="min" name=" " type="button" value="-" style="width:40px;"> //减号按钮
<input id="text-box" name=" " type="text" value="1" style="width:60px;">
<input id="add" name=" " type="button" value="+" style="width:40px;">//加号按钮
</div>
</div>
JS：
$(document).ready(function(){
var t = $("#text_box");//初始化数量为1,并失效减
$('#min').attr('disabled',true);//数量增加操作
$("#add").click(function(){
t.val(parseInt(t.val())+1)
if (parseInt(t.val())!=1){
$('#min').attr('disabled',false);} })
$("#min").click(function(){ //数量减少操作
t.val(parseInt(t.val())-1);
if (parseInt(t.val())==1){
$('#min').attr('disabled',true);}})});
