一款jQuery tab选项卡制作手机注册和邮箱注册表单页面，带滑块和验证码等功能代码。
使用方法

在页面引入以下jquery-1.7.2.min.js、drag.js文件

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

清空按钮

~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";
        }
    }
      
}();