給大家介紹幾種實(shí)用的JS的使用，代碼很簡單，很容易理解。
一.固定菜單欄
實(shí)現(xiàn)效果：當(dāng)頁面向下滾動(dòng)時(shí)，菜單欄始終固定在頁面的最上方。
HTML：
<div class="nav" id="divId">
? ? ?<ul>
? ? ?<li><a href="#">菜單1</a></li>
? ? ?<li><a href="#">菜單2</a></li>
? ? ?</ul>
</div>
CSS:(根據(jù)實(shí)際情況設(shè)置CSS):
<!--當(dāng)鼠標(biāo)滑動(dòng)時(shí)，改變菜單欄顏色，其余的CSS根據(jù)情況制定-->
.nav ul li a:hover{
? ? ? ?width:78px;
? ? ? ?height:26px;
? ? ? ?line-height:28px;
? ? ? ?border:1px solid red;
? ? ? ?color:red;
? ? ? ?background:#fff;
}
JS代碼:
// 定義菜單欄離頁面頂部的距離，默認(rèn)為200
var divOffsetTop = 500;//滾動(dòng)事件
window.onscroll=function(){
var div = document.getElementById("divId");// 計(jì)算頁面滾動(dòng)了多少（需要區(qū)分不同瀏覽器）
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";}};
// 頁面加載完之后，計(jì)算菜單欄到頁面頂部的實(shí)際距離
window.onload=function(){
var div = document.getElementById("divId");
divOffsetTop = div.offsetTop;
};
效果圖：
二.登錄/注冊(cè)頁面，用戶名框和密碼框的基本設(shè)置
效果：
1.用戶名輸入框，打開頁面可以看到“輸入ID或用戶名字樣”，點(diǎn)擊框后字樣隱藏，用戶進(jìn)行輸入。
2.密碼輸入框，打開頁面看到“輸入密碼等字樣”，點(diǎn)擊后字樣隱藏，用戶輸入密碼加密處理。
//用戶名輸入框
<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>
三.注冊(cè)頁面，輸入密碼與確認(rèn)密碼是否相同的檢測
效果：用戶在注冊(cè)頁面輸入密碼加密處理，再次確認(rèn)密碼后如果兩次密碼相同則在屏幕輸出“密碼相同”，否則“密碼不相同”。
HTML：輸入框的設(shè)置與二.登錄/注冊(cè)界面相同
CSS：根據(jù)實(shí)際調(diào)節(jié)
JS：
function passwordcheck(){?
var pw1 = document.getElementById("registerpass").value;?
var pw2 = document.getElementById("registernewpass").value;?
if(pw1==pw2){?
document.getElementById(“提示語”).’innerHTML="密碼相同"; //當(dāng)兩次密碼輸入完全相同時(shí)彈出提示語句：密碼相同
?document.getElementById("submit").disabled=false; }else{
?document.getElementById(“提示語”).innerHTML="密碼不相同”;//密碼不同時(shí) ? ?document.getElementById("submit").disabled=true;
?} }
四.JS實(shí)現(xiàn)物品數(shù)量的加減
效果：點(diǎn)擊“+”數(shù)量增加，“-”數(shù)量減少
HTML+CSS：
<div class="box">
? ?<div class="mount1">
<input id="min" name=" " type="button" value="-" style="width:40px;"> //減號(hào)按鈕
<input id="text-box" name=" " type="text" value="1" style="width:60px;">
<input id="add" name=" " type="button" value="+" style="width:40px;">//加號(hào)按鈕
? ?</div>
</div>
JS：
$(document).ready(function(){
var t = $("#text_box");//初始化數(shù)量為1,并失效減
$('#min').attr('disabled',true);//數(shù)量增加操作
$("#add").click(function(){
t.val(parseInt(t.val())+1)
if (parseInt(t.val())!=1){
$('#min').attr('disabled',false);}?})
$("#min").click(function(){? ? ? //數(shù)量減少操作
t.val(parseInt(t.val())-1);
if (parseInt(t.val())==1){
$('#min').attr('disabled',true);}})});
