jQuery手機端注冊表單頁面帶滑塊驗證碼功能代碼



135 537 180



特效描述:jQuery 手機端注冊 表單頁面 帶滑塊 驗證碼功能,jQuery手機端注冊表單頁面帶滑塊驗證碼功能代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css"/>
<link href="css/drag.css" rel="stylesheet" type="text/css"/>

2. 引入JS

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/drag.js" type="text/javascript"></script>

3. HTML代碼

<div class="header">
    <div class="header-container">
        <h2 class="fl"><a href="#">系統注冊</a></h2>
    </div>
</div>
<div class="main">
    <div class="main-form">
        <form action="" id="form">
            <div class="form-tab">
                <ul>
                    <li class="cur-tab">
                        <span class="phone-icon"></span>
                        <span>手機注冊</span>
                    </li>
                    <li>
                        <span class="email-icon"></span>
                        <span>郵箱注冊</span>
                    </li>
                </ul>
            </div>
            <div class="form-content">
                <div class="phone-res">
                    <div class="form-group">
                        <label for="userName">手機號碼</label>
                        <div class="input-group">
                            <input id="userName" type="text" placeholder="請輸入手機號碼"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="drag0">滑動驗證</label>
                        <div class="drag" id="drag0"></div>
                    </div>
                    <div class="form-group">
                        <label for="cen-code">驗證號碼</label>
                        <div class="input-group">
                            <input id="cen-code" type="text" placeholder="請輸入驗證碼"/>
                            <button id="getCodeBtn">獲取驗證碼</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pwd">登錄密碼</label>
                        <div class="input-group">
                            <input id="pwd" type="password" placeholder="請輸入登錄密碼"/>
                            <em></em>
                        </div>
                    </div>
                    <div class="form-group marl form-group-sp">
                        <input id="service_item" type="checkbox"/><label for="service_item"><span>同意并遵守</span><a class="service-item" href="#">《服務條款》</a></label>
                    </div>
                    <div class="form-group marl">
                        <a href="#" class="login-btn">立即注冊</a>
                    </div>
                </div>
            </div>
            <div class="form-content hide">
                <div class="email-res">
                    <div class="form-group">
                        <label for="emailAdres">常用郵箱</label>
                        <div class="input-group">
                            <input id="emailAdres" type="text" placeholder="請輸入常用郵箱"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="drag1">滑動驗證</label>
                        <div class="drag" id="drag1"></div>
                    </div>
                    <div class="form-group">
                        <label for="cen-code">驗證號碼</label>
                        <div class="input-group">
                            <input type="text" placeholder="請輸入驗證碼"/>
                            <button id="getCodeBtn0">獲取驗證碼</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pwd0">登錄密碼</label>
                        <div class="input-group">
                            <input id="pwd0" type="password" placeholder="請輸入登錄密碼"/>
                            <em></em>
                        </div>
                    </div>
                    <div class="form-group marl form-group-sp">
                        <input id="service_item0" type="checkbox"/><label for="service_item0"><span>同意并遵守</span><a class="service-item" href="#">《服務條款》</a></label>
                    </div>
                    <div class="form-group marl">
                        <a href="#" class="login-btn">立即注冊</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    // input 聚焦清空 離開還原 用戶輸入時 后邊出現清空按鈕,點擊可以清空
    ~function () {
        //input 聚焦清空 離開還原 用戶輸入時 后邊出現清空按鈕,點擊可以清空
        function inputFun(input_id) {
            var input_id = document.getElementById(input_id), new_i = document.createElement("i");
            new_i.innerHTML = "×";
            input_id.val = input_id.getAttribute("placeholder"); // 自定義屬性
            //聚焦時清空placeholder
            input_id.onfocus = function () {
                this.setAttribute("placeholder", "");
                this.style.color = "#333";
            };
            input_id.onblur = function () {
                this.setAttribute("placeholder", this.val);
                this.style.color = "#888";
            };
            // 用戶輸入時同時出現后邊的清空按鈕
            input_id.onkeydown = function () {
                if (this.value != "") {
                    this.parentNode.appendChild(new_i);
                }
            };
            input_id.onkeyup = function () {
                if (this.value == "") {
                    this.parentNode.removeChild(new_i);
                }
            };
            // 點擊請空按鈕 input 輸入清空
            new_i.onclick = function () {
                this.parentNode.children[0].value = "";
                this.parentNode.removeChild(this);
            }
        }
        inputFun("userName");
        inputFun("pwd");
    }();
    //滑動驗證
    $('.drag').drag();
    //點擊獲取驗證碼
    ~function () {
        function getCode(btnId) {
            var getCodeBtn = document.getElementById(btnId);
            var timer = null, num = 30;
            getCodeBtn.onclick = function () {
                var _this = this;
                this.className = "clicked";
                this.disabled = true;
                timer = window.setInterval(function () {
                    if (num == 0)
                    {
                        _this.className = "";
                        _this.disabled = false;
                        _this.innerHTML = "獲取驗證碼";
                        clearInterval(timer);
                        num = 30;
                        return;
                    }
                    _this.innerHTML = num-- + " s后重新獲取";
                }, 1000);
            }
        }
        getCode("getCodeBtn");
        getCode("getCodeBtn0");
    }();
    // 選項卡
    ~function () {
        var lis = document.getElementById("form").children[0].getElementsByTagName("li");
        var form_contents = $(".form-content");
        console.log(form_contents.length);
        for (var i = 0; i < lis.length; i++) {
            var liEle = lis[i];
            liEle.index = i;
            liEle.onclick = function () {
                for (var j = 0; j < lis.length; j++) {
                    var liLink = lis[j];
                    liLink.className = "";
                    form_contents[j].className = "form_contents hide";
                }
                this.className = "cur-tab";
                form_contents[this.index].className = "form_contents show";
            }
        }
    }();
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 滑動選項卡 滑動切換 文本框 text文本框 單選框 單選按鈕 驗證碼 表單提交 表單驗證 表單驗證插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子