给大家介绍几种实用的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);}})});

数量增减按钮 点击按钮效果

---