學習web標準、用戶體驗改善、Ajax&Asp.Net

用javascript來實現select標籤的美化
論壇經常有人會問到用CSS如何美化Select標籤，其實但凡你看到很酷的都是用javascript來實現的。昨天試着做了一下，基本實現的初級功能。拿出來和大家一起分享一下。先可以看一下預覽效果：http://www.iwcn.net/demo/select。

【功能需求】
1、調用要方便，做好之後應該像這樣：
程序代碼程序代碼

function loadSelect(selectobj){
//傳入一個select對象就能將他的樣式美化
}

2、不改變原有表單項，表單的頁面代碼不去破壞：
程序代碼程序代碼

<form name="f" οnsubmit="getResult();">
    <fieldset>
        <legend>用戶註冊</legend>
        <div>
            <label for="username">帳號</label>
            <input type="text" id="username" name="username" />
        </div>
        <div>
            <label for="pwd">密碼</label>
            <input type="password" name="pwd" id="pwd" />
        </div>
        <div>
            <label for="province">省份</label>
            <select id="province" name="province">
                <option value="10">江西</option>
                <option value="11">福建</option>
                <option value="12">廣東</option>
                <option value="13">浙江</option>
            </select>
        </div>
    </fieldset>
    <input type="submit" value="提交" name="btnSub" />
</form>

【實現思路】

第一步：將表單中的select隱藏起來。
爲什麼？很簡單，因爲這傢伙太頑固了，用css根本搞不出來你想要的。所以把它殺掉。

第二步：用腳本找到select標籤在網頁上的絕對位置。
我們在那個位置上用DIV標籤做個假的、好看點的來當他的替身。

第三步：用腳本把select標籤中的值讀出來。
雖然藏起來了，但它裏邊的options我們還有用呢，統統取過來。

第四步：當用戶點擊select標籤的替身，也就是div的時候。我們再用一個div浮在上一個div的下邊，這個就是options的替身了。

大致上就是這樣了，接下來我們一步一步去實現它！

【準備工作】
1、想好你要把select美化成什麼樣子，並準備好相應的圖片。我準備了兩張小圖，就是下拉箭頭1和下拉箭頭2，1是默認樣式，2是鼠標移過來的樣式。
2、寫好一個普通的表單遞交頁面，比如下邊這個。注意我給select定義了基本的CSS樣式、在頭部添加了調用js文件的代碼、在body中添加了調用函數的腳本。
HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <title>用javascript美化Select</title>
    <script type="text/javascript" src="select.js"></script>
    <style type="text/css">
    select{width:200px;height:20px;}
</style>
    </head>
    <body>
        <h1>用javascript模擬select達到美化效果</h1>
<form name="f" οnsubmit="getResult();">
    <fieldset>
        <legend>用戶註冊</legend>
        <div>
            <label for="username">帳號</label>
            <input type="text" id="username" name="username" />
        </div>
        <div>
            <label for="pwd">密碼</label>
            <input type="password" name="pwd" id="pwd" />
        </div>
        <div>
            <label for="province">省份</label>
            <select id="province" name="province">
                <option value="10">江西</option>
                <option value="11">福建</option>
                <option value="12">廣東</option>
                <option value="13">浙江</option>
            </select>
        </div>
    </fieldset>
    <input type="submit" value="提交" name="btnSub" />
</form>
        <script type="text/javascript">
            loadSelect(document.f.province);
        </script>
    <p>
        <a href="<a href="http://www.iwcn.net" target="_blank">http://www.iwcn.net</a>">作者博客</a>
    </p>
    </body>
</html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

【編寫javascript】
程序代碼程序代碼
<script type="text/javascript" src="select.js"></script>

新建一個js文件並保存爲select.js，剩下的工作我們全部在這個js中去完成。

函數名：loadSelect(obj);
參數：select對象

相關函數：
程序代碼程序代碼

function Offset(e)
//取標籤的絕對位置
{
    var t = e.offsetTop;
    var l = e.offsetLeft;
    var w = e.offsetWidth;
    var h = e.offsetHeight-2;

    while(e=e.offsetParent)
    {
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
    return {
        top : t,
        left : l,
        width : w,
        height : h
    }
}

第一步：把select的絕對位置記錄下來。一會替身上來就知道應該站那裏了。
程序代碼程序代碼

var offset=Offset(obj);
//這裏解釋一下Offset是一個函數，用來獲取對象的絕對位置。寫在loadSelect()函數外邊的。他有四個屬性分別是top/left/width/height。

第二步：將select隱藏。
程序代碼程序代碼

obj.style.display="none";

第三步：虛擬一個div出來代替select
程序代碼程序代碼

    var iDiv = document.createElement("div");
        iDiv.id="selectof" + obj.name;
        iDiv.style.position = "absolute";
        iDiv.style.width=offset.width + "px";
        iDiv.style.height=offset.height + "px";
        iDiv.style.top=offset.top + "px";
        iDiv.style.left=offset.left + "px";
        iDiv.style.background="url(icon_select.gif) no-repeat right 4px";
        iDiv.style.border="1px solid #3366ff";
        iDiv.style.fontSize="12px";
        iDiv.style.lineHeight=offset.height + "px";
        iDiv.style.textIndent="4px";
    document.body.appendChild(iDiv);

第四步：把原始select沒人選中的值給它。
程序代碼程序代碼
iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;

第五步：爲替身添加鼠標移過樣式。
程序代碼程序代碼

    iDiv.οnmοuseοver=function(){//鼠標移到
        iDiv.style.background="url(icon_select_focus.gif) no-repeat right 4px";
    }
    iDiv.οnmοuseοut=function(){//鼠標移走
        iDiv.style.background="url(icon_select.gif) no-repeat right 4px";
    }

第六步：添加關鍵的鼠標點擊事件。
程序代碼程序代碼

    iDiv.οnclick=function(){//鼠標點擊
        if (document.getElementById("selectchild" + obj.name)){
        //判斷是否創建過div
            if (childCreate){
                //判斷當前的下拉是不是打開狀態，如果是打開的就關閉掉。是關閉的就打開。
                document.getElementById("selectchild" + obj.name).style.display="none";
                childCreate=false;
            }else{
                document.getElementById("selectchild" + obj.name).style.display="";
                childCreate=true;
            }
        }else{
            //初始一個div放在上一個div下邊，當options的替身。
            var cDiv = document.createElement("div");
            cDiv.id="selectchild" + obj.name;
            cDiv.style.position = "absolute";
            cDiv.style.width=offset.width + "px";
            cDiv.style.height=obj.options.length *20 + "px";
            cDiv.style.top=(offset.top+offset.height+2) + "px";
            cDiv.style.left=offset.left + "px";
            cDiv.style.background="#f7f7f7";
            cDiv.style.border="1px solid silver";

            var uUl = document.createElement("ul");
            uUl.id="uUlchild" + obj.name;
            uUl.style.listStyle="none";
            uUl.style.margin="0";
            uUl.style.padding="0";
            uUl.style.fontSize="12px";
            cDiv.appendChild(uUl);
            document.body.appendChild(cDiv);
            childCreate=true;
            for (var i=0;i<obj.options.length;i++){
                //將原始的select標籤中的options添加到li中
                var lLi=document.createElement("li");
                lLi.id=obj.options[i].value;
                lLi.style.textIndent="4px";
                lLi.style.height="20px";
                lLi.style.lineHeight="20px";
                lLi.innerHTML=obj.options[i].innerHTML;
                uUl.appendChild(lLi);
            }
            var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
            for (var j=0;j<obj.options.length;j++){
                //爲li標籤添加鼠標事件
                liObj[j].οnmοuseοver=function(){
                    this.style.background="gray";
                    this.style.color="white";
                }
                liObj[j].οnmοuseοut=function(){
                    this.style.background="white";
                    this.style.color="black";
                }
                liObj[j].οnclick=function(){
                    //做兩件事情，一是將用戶選擇的保存到原始select標籤中，要不做的再好看錶單遞交後也獲取不到select的值了。
                    obj.options.length=0;
                    obj.options[0]=new Option(this.innerHTML,this.id);
                    //同時我們把下拉的關閉掉。
                    document.getElementById("selectchild" + obj.name).style.display="none";
                    childCreate=false;
                    iDiv.innerHTML=this.innerHTML;
                }
            }
        }
    }

最後這個比較複雜一點，再解釋一下，我們在做這一步之前，select的樣子已經出來了，下一步就是再加一個div去模仿select被點擊之後出現的下拉選項了。我們可以講select標籤的options通過javascript提取出來，把它寫成這樣：
程序代碼程序代碼

<div>
    <ul>
        <li>optionName</li>
        <li>optionName</li>
        <li>optionName</li>
    </ul>
</div>

基本上就這樣了。還有些缺陷，有時間大家可以一起補充！

預覽地址：javascript模擬select下拉
腳本下載：select.js

實現div可編輯的常見方法
功能：實現網頁內容的即時編輯，增加頁面的可用性、交互性。
方法1：直接通過textarea標籤實現，請運行下邊代碼：
HTML代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
    #info {
          font-size: 12px;
          overflow:hidden;
          background-color: #ffffcc;
          color: black;
          padding-right:5px;
          padding-left:5px;
          font-family: courier;
          width:100%;
          letter-spacing:0;
          line-height:12px;
          border-style:none;
        }
</style>
</HEAD>

<BODY>

    <div id="sdf" style="width:400px;">
    <textarea id="info" οnblur="saveInfo()" οnmοuseοut="saveInfo()" οnkeyup="setRows()"></textarea>
    </div>
        <script language="JavaScript">
        function saveInfo() {
          var text = document.getElementById("info").value;
        //再用ajax向數據庫中更新當前修改內容
        }
        function setCols() {
          var textarea = document.getElementById("info");
          textarea.setAttribute("cols", Math.floor(textarea.clientWidth / 7));
          setRows();
        }
        function setRows() {
          var textarea = document.getElementById("info");
          var cols = textarea.cols;
          var str = textarea.value;
          str = str.replace(//r/n?/, "/n");
          var lines = 2;
          var chars = 0;
          for (i = 0; i < str.length; i++) {
            var c = str.charAt(i);
            chars++;
            if (c == "/n" || chars == cols) {
              lines ++;
              chars = 0;
            }
          }
          textarea.setAttribute("rows", lines);
          textarea.style.height = lines*12 + "px";
        }
        function setDefault(){
            var textarea=document.getElementById("info");
            textarea.value="單擊這裏進行編輯";
        }
        setDefault();
        setCols();
      </script>
</BODY>
</HTML>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

思路：將textarea通過CSS樣式設計成讓用戶感覺不像是textarea的樣子，通過onblur、oumouseout等屬性進行ajax保存用戶數據。

方法二：通過document.createElement的方法向頁面增加input來實現。請運行下邊代碼：
HTML代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<div id="gtest">
    點擊這裏就可以編輯
</div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

思路：
1、當用戶鼠標經過可編輯區域時，用背景色等方式提醒用戶該區域可編輯。
2、當用戶鼠標點擊該區域時，也就是onclick事件時，先將原來的內容清掉，將臨時創建出來一個輸入框和一個輸入按扭。
3、用戶修改完後，點擊“保存”按扭時通過ajax向數據庫中寫入新的數據。

PS：第二個方法的代碼還有點問題，有空再來調試一下。
代替marquee的滾動字幕效果代碼
由於marquee標籤現在用得是越來越少了，所以滾動效果的做法大多也都改用javascript來實現了，至於不明白爲什麼不直接用marquee標籤的朋友，不妨先閱讀一下這篇文章。
第一種方法：用javascript模擬marquee的做法。
出處：網易遊戲
HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>熱點新聞</title>
<style type="text/css">

</style>
</head>

<body>
<h4>滾動新聞</h4>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“夢幻密保”快速取回帳號密碼</a>";
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank><a href="http://www.163.com" target="_blank">網易</a>將軍令官方網站</a>";
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁紙下載</a>";
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下載</a>";
var marqueeInterval=new Array();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
function initMarquee() {
    var str=marqueeContent[0];
    document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" οnmοuseοver="clearInterval(marqueeInterval[0])" οnmοuseοut="marqueeInterval[0]=setInterval(/'startMarquee()/',marqueeDelay)"><div>'+str+'</div></div>');
    marqueeId++;
    marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() {
    var str=marqueeContent[marqueeId];
    marqueeId++;
    if(marqueeId>=marqueeContent.length) marqueeId=0;
    if(document.getElementById("marqueeBox").childNodes.length==1) {
    var nextLine=document.createElement('DIV');
    nextLine.innerHTML=str;
    document.getElementById("marqueeBox").appendChild(nextLine);
    }
    else {
        document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
        document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
        document.getElementById("marqueeBox").scrollTop=0;
    }
    clearInterval(marqueeInterval[1]);
    marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
    document.getElementById("marqueeBox").scrollTop++;
    if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
    clearInterval(marqueeInterval[1]);
    }
}
initMarquee();
</script>

</body>
</html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

個人觀點：從web可用性角度上講，我們在採用這段代碼的同時要考慮到noscript環境下的可用性，建議將內容還是以下邊代碼的形式出現在頁面中。如：
程序代碼程序代碼

<div id="newslist">
<ul>
<li><a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“夢幻密保”快速取回帳號密碼</a></li>
<li><a href=http://ekey.163.com/ target=_blank>網易將軍令官方網站</a></li>
<li><a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁紙下載</a></li>
<li><a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下載</a></li>
</ul>
</div>

然後用腳本去設置隱藏，將列表項讀進javascript中定義的數組中。即可達到在noscript環境下也能正常看到內容列表。

第二種方法：這個更強，能自動根據內容自動進行左右滾動，解決了寬度太小造成的截取問題。
原文作者：風動人
HTML代碼
<html>
<head>
<title> SCROLL </title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}
#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
</style>
<script type="text/javascript">
var tc;
window.οnlοad=function(){
    var o=document.getElementById('infozone');hscroll(o);
    window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000);
}
function scrollup(o,d,c){
    if(d==c){
        var t=o.firstChild.cloneNode(true);
        o.removeChild(o.firstChild);o.appendChild(t);
        t.style.marginTop=o.firstChild.style.marginTop='0px';
        hscroll(o);
    }
    else{
        ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
        o.firstChild.style.marginTop=-c+l+'px';
        window.setTimeout(function(){scrollup(o,d,c-l)},50);
    }
}

function hscroll(o){
    var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
    if(w1<=w2)return;
    tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
}

function hs(o,d,c,p){
    c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
    if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
    else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}
</script>
</head>

<body>
<div id="infozone"><div>溫嵐 - 屋頂(周杰倫對唱版)</div><div>范瑋琪 - 那些花兒</div><div>張韶涵 - 娃娃</div><div>孫楠&韓紅 - 美麗的神話</div></div>
</body>
</html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

個人觀點：從xhtml的語義化的角度看，頁面內容中濫用div標籤現象比較嚴重，可改成ul/li形式。

第三種是最精簡的，代碼非常少。
原文作者：cityvoice
HTML代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
    #newslist{
        background:#f7f7f7;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:300px;
    }
    #contain{
        font-size:12px;overflow:hidden;list-style:none;width:300px;height:20px;margin:0px;padding:0;
    }
    #contain li{
        height:20px;line-height:20px;white-space:nowrap;overflow:hidden;
    }
</style>
</HEAD>

<BODY>
    <div id="newslist">
        <ul id="contain">
            <li><a href="http:/www.iwcn.net">溫嵐 - 屋頂(左右擺動)</a></li>
            <li><a href="http:/www.iwcn.net">范瑋琪 - 那些花兒</a></li>
            <li><a href="http:/www.iwcn.net">張韶涵 - 娃娃</a></li>
            <li><a href="http:/www.iwcn.net">孫楠&韓紅 - 美麗的神話</a></li>
            <li><a href="http:/www.iwcn.net">張信哲 - 白月光</a></li>
        </ul>
    </div>
<SCRIPT LANGUAGE="JavaScript">
function xx(){
var container=document.getElementById("contain");
container.appendChild(container.firstChild);
}
setInterval("xx()",3000);
</SCRIPT>
</BODY>
</HTML>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

個人觀點：太短小精幹了，如果你喜歡簡單的話，這個也可以考慮的。
改善用戶體驗之密碼強度提示
功能說明：在用戶註冊或更改密碼時，根據用戶輸入進行檢測並返回結果。能有效地提醒用戶提高帳號的安全性。

類似效果：Live.com中的修改密碼功能

簡單預覽：

HTML代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>密碼</title>
<style type="text/css">
body{
    font-size:12px;
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
}
form{
    margin:2em;
}
#chkResult{margin-left:53px;height:15px;}
</style>
</head>

<body>
<form name="form1">
    <label for="pwd">用戶密碼</label>
    <input type="password" name="pwd" οnblur="chkpwd(this)" />
    <div id="chkResult"></div>
    <label for="pwd2">重複密碼</label>
    <input type="password" name="pwd2" />
</form>
<script type="text/javascript">
    function chkpwd(obj){
        var t=obj.value;
        var id=getResult(t);

        //定義對應的消息提示
        var msg=new Array(4);
        msg[0]="密碼過短。";
        msg[1]="密碼強度差。";
        msg[2]="密碼強度良好。";
        msg[3]="密碼強度高。";

        var sty=new Array(4);
        sty[0]=-45;
        sty[1]=-30;
        sty[2]=-15;
        sty[3]=0;

        var col=new Array(4);
        col[0]="gray";
        col[1]="red";
        col[2]="#ff6600";
        col[3]="Green";

        //設置顯示效果
        var bImg="attachments/month_0612/v200612702136.gif";//一張顯示用的圖片
        var sWidth=300;
        var sHeight=15;
        var Bobj=document.getElementById("chkResult");

        Bobj.style.fontSize="12px";
        Bobj.style.color=col[id];
        Bobj.style.width=sWidth + "px";
        Bobj.style.height=sHeight + "px";
        Bobj.style.lineHeight=sHeight + "px";
        Bobj.style.background="url(" + bImg + ") no-repeat left " + sty[id] + "px";
        Bobj.style.textIndent="20px";
        Bobj.innerHTML="檢測提示：" + msg[id];
    }

    //定義檢測函數,返回0/1/2/3分別代表無效/差/一般/強
    function getResult(s){
        if(s.length < 4){
            return 0;
        }
        var ls = 0;
        if (s.match(/[a-z]/ig)){
            ls++;
        }
        if (s.match(/[0-9]/ig)){
            ls++;
        }
         if (s.match(/(.[^a-z0-9])/ig)){
            ls++;
        }
        if (s.length < 6 && ls > 0){
            ls--;
        }
        return ls
    }
</script>
</body>

</html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

使用方法：
第一步：保存圖片
第二步：根據您的需要修改js文件中該圖片地址。如下所示：
程序代碼程序代碼
var bImg="pwdlen.gif";//一張顯示用的圖片

第三步：在需要檢測的頁面中引用這個腳本文件，如下所示：
程序代碼程序代碼
<script type="text/javascript" src="chkpwd.js"></script>

第四步：在網頁的表單中，找到密碼輸入框添加onblur事件驅動，然後添加一個Div，如下所示：
程序代碼程序代碼

<input type="password" name="pwd" οnblur="chkpwd(this)" />
<div id="chkResult">強度檢測</div>

第五步：根據您頁面的需要通過樣式表CSS重新定義#chkResult的擺放位置，以合適您網頁的整體佈局。

完整效果預覽：點擊這裏

腳本文件chkpwd.js 下載：下載文件點擊下載此文件
改善用戶體驗之alert提示效果
類似於新浪郵箱的提示效果。比較獨立。在wenming版主的幫助下，已解決了高度不能適應的BUG。

使用方法很簡單，在需要彈出提示的頁面先引用alert.js腳本文件,如:
程序代碼程序代碼

<script type="text/javascript" src="alert.js"></script>

然後直接在需要提出處使用：
程序代碼程序代碼

sAlert("需要提示的信息");

即可.不需要額外添加HTML代碼.

完整代碼:
HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-CN" lang="zh-CN">
    <head>
        <meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" />
        <title>
            政策文件_中國電力工程造價信息網</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="gb2312" />
        <meta name="KeyWords" content="電力工程造價,價格信息,裝材,設備,電力工程" />
        <meta name="description" content="電力工程造價信息" />
        <style type="text/css">
            *{
                margin:0;padding:0;
            }
        </style>
    </head>
    <body>


    <div class="cecmbody" id="cecmpolicy">
        <div class="leftClass">

<p>測試</p><p>測試</p>
            <p>測試</p><p>測試</p><p>測試</p><p>測試</p><p>測試</p>
            <p>測試</p><p>測試</p><p>測試</p><p>測試</p><p>測試</p><p>測試</p><p>測試</p><p>測試</p>

            <input type="button" value="點擊這裏" οnclick="sAlert('測試效果');" />


        </div>
        <div class="rightClass">
        </div>
    </div>
                <script type="text/javascript" language="javascript">

//Author:Daviv
//Blog:<a href="http://blog.163.com/<a href="http://www.iwcn.net" target="_blank">jxdawei</a>" target="_blank">http://blog.163.com/<a href="http://www.iwcn.net" target="_blank">jxdawei</a></a>
//Date:2006-10-27
//Email:<a href="http://www.iwcn.net" target="_blank">jxdawei</a>@gmail.com

            function sAlert(str){
            var msgw,msgh,bordercolor;
            msgw=400;//提示窗口的寬度
            msgh=100;//提示窗口的高度
            titleheight=25 //提示窗口標題高度
            bordercolor="#336699";//提示窗口的邊框顏色
            titlecolor="#99CCFF";//提示窗口的標題顏色

            var sWidth,sHeight;
            sWidth=document.body.offsetWidth;
            sHeight=screen.height;

            var bgObj=document.createElement("div");
            bgObj.setAttribute('id','bgDiv');
            bgObj.style.position="absolute";
            bgObj.style.top="0";
            bgObj.style.background="#777";
            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
            bgObj.style.opacity="0.6";
            bgObj.style.left="0";
            bgObj.style.width=sWidth + "px";
            bgObj.style.height=sHeight + "px";
            bgObj.style.zIndex = "10000";
            document.body.appendChild(bgObj);

            var msgObj=document.createElement("div")
            msgObj.setAttribute("id","msgDiv");
            msgObj.setAttribute("align","center");
            msgObj.style.background="white";
            msgObj.style.border="1px solid " + bordercolor;
            msgObj.style.position = "absolute";
            msgObj.style.left = "50%";
            msgObj.style.top = "50%";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.marginLeft = "-225px" ;
            msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
            msgObj.style.width = msgw + "px";
            msgObj.style.height =msgh + "px";
            msgObj.style.textAlign = "center";
            msgObj.style.lineHeight ="25px";
            msgObj.style.zIndex = "10001";

           var title=document.createElement("h4");
           title.setAttribute("id","msgTitle");
           title.setAttribute("align","right");
           title.style.margin="0";
           title.style.padding="3px";
           title.style.background=bordercolor;
           title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
           title.style.opacity="0.75";
           title.style.border="1px solid " + bordercolor;
           title.style.height="18px";
           title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
           title.style.color="white";
           title.style.cursor="pointer";
           title.innerHTML="關閉";
           title.οnclick=function(){
                document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
           document.body.appendChild(msgObj);
           document.getElementById("msgDiv").appendChild(title);
           var txt=document.createElement("p");
           txt.style.margin="1em 0"
           txt.setAttribute("id","msgTxt");
           txt.innerHTML=str;
           document.getElementById("msgDiv").appendChild(txt);
            }
        </script>
    </body>
</html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

下載文件點擊下載此文件

學習web標準、用戶體驗改善、Ajax&Asp.Net

詩哲魂：制約中國互聯網發展瓶頸在哪裏？

歷史上殺傷力最大的笑話！！！

青藏鐵路一月可運送12個師讓印感害怕

女人用一輩子承諾一句話

學習web標準、用戶體驗改善、Ajax&Asp.Net

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結