javascript網頁特效——文本輸入框和下拉式功能表特效

執行個體一：讓文字框只帶有底線

<script type="text/javascript">                         function changeTextStyle(){             //讓文字框只帶有底線        //獲得文字框的DOM        var myText = document.getElementById("myText");                              myText.style.borderColor = 'black';     //設定邊框顏色        myText.style.borderStyle = 'solid';     //設定邊框樣式為實線        myText.style.borderWidth = '0 0 1px 0'; //設定邊框大小，0代表無    }</script>

執行個體二：首字母或全部字母大寫

<script type="text/javascript">                     //格式校正            function validateInput(){                //獲得文字框的DOM                var myText1 = document.getElementById("myText1");                var myText2 = document.getElementById("myText2");                var val1 = myText1.value;           //文字框1的值                var val2 = myText2.value;           //文字框2的值                var errMsg = '';                    //定義錯誤提示字元                //判斷是否以大寫字母開頭                if(val1 != '' && (val1.charAt(0)>'Z' || val1.charAt(0)<'A')){                    //拼接錯誤字元                    errMsg = '文字框1的首字母需要大寫\n';                    alert(errMsg);                }                if(val2 != '' && !/\b[A-Z]+\b/.test(val2)){                    //拼接錯誤字元                    errMsg = '文字框2的需要全部為大寫字母\n';                    alert(errMsg);                }            }</script>

執行個體三：只能輸入數位文字框

<script type="text/javascript">                     //格式校正            function validateInput(){                //獲得文字框的DOM                var myText = document.getElementById("myText");                var val = myText.value;         //擷取使用者輸入的值                if(!/\b[0-9]+\b/.test(val)){        //使用正則校正                    alert('只能輸入數字');            //提示錯誤資訊                }            }</script>

執行個體四：用Regex驗證Email格式

<script type="text/javascript">                     //格式校正            function validateInput(){                //獲得文字框的DOM                var myText = document.getElementById("myText");                var email = myText.value;   //獲得使用者輸入的Email                //定義Regex                var emailReg                     = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;                if(emailReg.test(email)){   //判斷是否符合格式要求                    alert("校正通過，允許提交");     //通過                }else{                    alert("校正失敗，請檢查重新輸入");  //驗證失敗                }            }</script>

執行個體五：成為焦點時清除文字框內容

<script type="text/javascript">                     //清楚內容            function clearContent(myText){                myText.value = '';      //把常值內容的值設為空白字元            }</script><input type="text" value="" onfocus="clearContent(this)"/>

執行個體六：使用者輸入完以後立刻進行格式校正

<script type="text/javascript">                         function validateTel(){             //格式校正        //獲得文字框的DOM        var myTel = document.getElementById("myTel");        var val = myTel.value;          //擷取使用者輸入的值        if(!/\b[0-9]+\b/.test(val)){            //使用正則校正            alert('只能輸入數字');            //提示錯誤資訊            //修改樣式，引起注意            myTel.style.border = '1px solid red';        }else if(val.length != 11){         //長度必須是11位            alert('手機號碼是11位');      //提示錯誤資訊            //修改樣式，引起注意            myTel.style.border = '1px solid red';        }else{            //修改樣式，表示通過了            myTel.style.border = '1px solid green';            return true;        }    }</script><input type="text" value="" id="myTel" onblur="validateTel()"/>

執行個體七：聯動的省市下拉式功能表

onchange 事件會在域的內容改變時發生。

<script type="text/javascript">                     var arr = new Array();              //資料數組            //定義資料，結構為：id、名字、父id            arr[arr.length] = [1, '北京市', null];            arr[arr.length] = [2, '四川省', null];            arr[arr.length] = [3, '廣東省', null];            arr[arr.length] = [4, '北京市', 1];            arr[arr.length] = [5, '成都市', 2];            arr[arr.length] = [6, '廣州市', 3];            arr[arr.length] = [7, '深圳市', 3];            //動態設定下拉項目            function fillOptions(type){                if(type == 'province'){                    //擷取省份下拉式功能表的DOM                    var province = document.getElementById("province");                    province.innerHTML = '';        //內容先置空                    //填充省的字元                    var proStr = '<option value=""></option>';                    //遍曆數組                    for(var i=0; i<arr.length; i++){                        var item = arr[i];      //當前項                        //如果沒有父id，則是省份                        if(item[2] == null)                            proStr += '<option value='+item[0]+'>'+item[1]+'</option>';                    }                    province.innerHTML = proStr;//填充新內容                }else if(type == 'city'){                    //擷取當前的省份的id                    var currProId = document.getElementById("province").value;                    if(currProId == '')                        return false;                    //擷取城市下拉式功能表的DOM                    var city = document.getElementById("city");                    city.innerHTML = '';            //內容先置空                    //填充市的字元                    var cityStr = '<option value=""></option>';                    //遍曆數組                    for(var i=0; i<arr.length; i++){                        var item = arr[i];      //當前項                        //判斷是否為當前省下的城市                        if(item[2] == currProId)                            cityStr += '<option value='+item[0]+'>'+item[1]+'</option>';                    }                    city.innerHTML = cityStr        ;//填充新內容                }            }        </script><body style="text-align:center;" onload="fillOptions('province');">        <!-- 定義下拉式功能表 -->        省：<select id="province" onchange="fillOptions('city')"></select><br/><br/>        市：<select id="city"></select><br/><br/>    </body>

執行個體八：三級聯動的省市縣下拉式功能表

<script type="text/javascript">                     var arr = new Array();              //資料數組            //定義資料，結構為：id、名字、父id            arr[arr.length] = [1, '北京市', null];            arr[arr.length] = [2, '四川省', null];            arr[arr.length] = [3, '廣東省', null];            arr[arr.length] = [4, '北京市', 1];            arr[arr.length] = [5, '成都市', 2];            arr[arr.length] = [6, '廣州市', 3];            arr[arr.length] = [7, '深圳市', 3];            arr[arr.length] = [8, '武侯區', 5];            arr[arr.length] = [9, '青羊區', 5];            arr[arr.length] = [10, '白雲區', 6];            arr[arr.length] = [11, '增城市', 6];            arr[arr.length] = [12, '從化市', 6];            //動態設定下拉項目            function fillOptions(type){                if(type == 'province'){                    //擷取省份下拉式功能表的DOM                    var province = document.getElementById("province");                    province.innerHTML = '';        //內容先置空                    //填充省的字元                    var proStr = '<option value=""></option>';                                      for(var i=0; i<arr.length; i++){    //遍曆數組                        var item = arr[i];          //當前項                        //如果沒有父id，則是省份                        if(item[2] == null)                            proStr += '<option value='+item[0]+'>'+item[1]+'</option>';                    }                    province.innerHTML = proStr;    //填充新內容                }else if(type == 'city'){                    //擷取當前的省份的id                    var currProId = document.getElementById("province").value;                    if(currProId == '')                        return false;                    //擷取城市下拉式功能表的DOM                    var city = document.getElementById("city");                    city.innerHTML = '';            //內容先置空                    //填充市的字元                    var cityStr = '<option value=""></option>';                                     for(var i=0; i<arr.length; i++){    //遍曆數組                        var item = arr[i];          //當前項                        //判斷是否為當前省下的城市                        if(item[2] == currProId)                            cityStr += '<option value='+item[0]+'>'+item[1]+'</option>';                    }                    city.innerHTML = cityStr        ;//填充新內容                }else if(type == 'area'){                    //擷取當前城市的id                    var currCityId = document.getElementById("city").value;                    if(currCityId == '')                        return false;                    //擷取區縣下拉式功能表的DOM                    var area = document.getElementById("area");                    area.innerHTML = '';            //內容先置空                    //填充區縣的字元                    var areaStr = '<option value=""></option>';                                     for(var i=0; i<arr.length; i++){    //遍曆數組                        var item = arr[i];          //當前項                        //判斷是否為當前城市下的區縣                        if(item[2] == currCityId)                            areaStr += '<option value='+item[0]+'>'+item[1]+'</option>';                    }                    area.innerHTML = areaStr;   //填充新內容                }             }</script><body style="text-align:center;" onload="fillOptions('province');">        <!-- 定義下拉式功能表 -->        省：<select id="province" onchange="fillOptions('city')"></select><br/><br/>        市：<select id="city" onchange="fillOptions('area')"></select><br/><br/>        縣/區：<select id="area"></select><br/><br/></body>

執行個體九：輸入文字時文字框邊框閃爍

onfocus()和onblur()最好成對編寫。

<script type="text/javascript">             //初始化函數    function init(){        //擷取所有的文本DOM                        var texts = document.getElementsByTagName('input');        //遍曆所有的文字框        for(var i=0;i<texts.length;i++){            var t = texts[i];//當前文字框            var timer;            //監聽聚焦事件            t.onfocus = function(){                var e = this;//保留當前DOM的引用                //開始閃爍的定時器                timer = setInterval(function(){                    //擷取當前的邊框顏色變數                    var c = e.style.borderColor;                    if(c == 'yellow'){//如果是黃色                        e.style.borderColor = '';//恢複原色                    }else{//否則，邊框變成黃色                        e.style.borderColor = 'yellow';                    }                },1000);//每1秒閃爍一次            };            t.onblur = function(){//監聽離開事件                //恢複邊框顏色                t.style.borderColor = '';                clearInterval(timer);//清除定時器            }        }    }</script><body style="text-align:center;" onload="init();">