Fork me on GitHub

中秋来一发

大家中秋节快乐!!!!

不知道插件是不是这么简单的东西。。。。。。。。

我看别人的插件都是两个字“复杂”;

checkbox插件: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox插件</title>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        window.onload=function(){
            checkedBox("#cb01");
            checkedBox("#cb02",{check_all:false});
            checkedBox("#cb03",{click_pos:false});
            checkedBox("#cb04",{check_all:false,click_pos:false});
            /*单选按钮*/
            radioBox("#rb01");
            radioBox("#rb02");
        }

/******************************************************/
/*复选框*/

/*addClass()、toggleClass()、equalClass()、removeClass()封装的,关于class添加、切换、是否存在这个class、移出class*/
        function checkedBox(id,param){
            /*默认参数,是否有全选复选框,是否点击文字可选中
            *默认都是true
            */
            var setting={
                check_all:true,
                click_pos:true
            };
            /*传的json格式参数,覆盖默认参数*/
            extend(param,setting);
            /*获取元素*/
            var oCheckbox=document.querySelector(id);
            var oP=oCheckbox.getElementsByTagName("p");
            /*有全选复选框*/
            if(setting.check_all){
                oP[0].style.display="block";
                /*全选复选框点击文字选中*/
                if(setting.click_pos){
                        addClass(oP[0],"hand");
                    oP[0].onclick=function(){
                        var spanAll=this.getElementsByTagName("span")[0];
                        toggleClass(spanAll,"checked");
                        if(equalClass(spanAll,"checked")){
                            for(var i=1;i<oP.length;i++){
                                var oSpan=oP[i].getElementsByTagName("span")[0];
                                    addClass(oSpan,"checked");
                            }
                        }else{
                            for(var i=1;i<oP.length;i++){
                                var oSpan=oP[i].getElementsByTagName("span")[0];
                                    removeClass(oSpan,"checked");
                            }
                        }
                    }
                /*全选复选框不能点击文字选中*/
                }else{
                var spanAll=oP[0].getElementsByTagName("span")[0];
                    spanAll.onclick=function(){
                        toggleClass(this,"checked");
                        if(equalClass(this,"checked")){
                            for(var i=1;i<oP.length;i++){
                                var oSpan=oP[i].getElementsByTagName("span")[0];
                                    addClass(oSpan,"checked");
                            }
                        }else{
                            for(var i=1;i<oP.length;i++){
                                var oSpan=oP[i].getElementsByTagName("span")[0];
                                    removeClass(oSpan,"checked");
                            }
                        }
                    }
                }
            }
            /*可以点击文字选中*/
            if(setting.click_pos){
                for(var i=1;i<oP.length;i++){
                    addClass(oP[i],"hand");
                    oP[i].onclick=function(){
                        toggleClass(this.getElementsByTagName("span")[0],"checked");
                        for(var i=1;i<oP.length;i++){
                            if(!equalClass(oP[i].getElementsByTagName("span")[0],"checked")){
                                removeClass(oP[0].getElementsByTagName("span")[0],"checked");
                                return;
                            }else{
                                addClass(oP[0].getElementsByTagName("span")[0],"checked");
                            }
                        }
                    }
                }
            /*不可以点击文字选中*/
            }else{
                for(var i=1;i<oP.length;i++){
                    var oSpan=oP[i].getElementsByTagName("span")[0];
                    oSpan.onclick=function(){
                        toggleClass(this,"checked");
                        for(var i=1;i<oP.length;i++){
                            if(!equalClass(oP[i].getElementsByTagName("span")[0],"checked")){
                                removeClass(oP[0].getElementsByTagName("span")[0],"checked");
                                return;
                            }else{
                                addClass(oP[0].getElementsByTagName("span")[0],"checked");
                            }
                        }
                    }
                }
            }
        }
/**********************************************************/
/*重复使用*/
        function extend(obj1,obj2){
            for(var attr in obj1){
                obj2[attr]=obj1[attr];
            }
        }


        /*判断对象元素是否有这个class,
**第一个参数是传元素对象,这个对象不能是数组
**第二个参数是要检查的class
*存在返回true,不存在返回false
**/
function equalClass(obj,classname){
    var arr=obj.className.split(" ");
    for(var i=0;i<arr.length;i++){
        if(arr[i]==classname){
            return true;
        }
    }
    return false;
}
/*添加class,
**第一个参数是传元素对象,这个对象不能是数组
**第二个参数是要添加的class
*/
function addClass(obj,classname){
    if(equalClass(obj,classname)){
        return;
    }else{
        if(obj.className.trim().length==0){
            obj.className=classname;
        }else{
        obj.className+=" "+classname;
        }
    }
}

/*移除class
**第一个参数是传元素对象,这个对象不能是数组
**第二个参数是要添加的class
*如果不存在class会有返回值-1
*/
function removeClass(obj,classname){
    if(equalClass(obj,classname)){
        var arr=obj.className.split(" ");
        for(var i=0;i<arr.length;i++){
            if(arr[i]==classname){
                arr.splice(i,1);
            }
        }
            obj.className=arr.join(" ");
    }else{
        return -1;
    }
}

/*切换class,
**第一个参数是传元素对象,这个对象不能是数组
**第二个参数是要切换class
*/
function toggleClass(obj,classname){
    if(equalClass(obj,classname)){
        removeClass(obj,classname);
    }else{
        addClass(obj,classname);    
    }
}
/*****************************************************/
/*单选按钮*/

/*单选按钮过于简单不注释*/
function radioBox(id){
    var oRadioBox=document.querySelector(id);
    var oRadio=oRadioBox.getElementsByTagName("p");
    if(equalClass(oRadio[0],"hand")){
        for(var i=0;i<oRadio.length;i++){
            oRadio[i].onclick=function(){
                for(var i=0;i<oRadio.length;i++){
                    var os=oRadio[i].getElementsByTagName("span")[0];
                    removeClass(os,"active");
                }
                addClass(this.getElementsByTagName("span")[0],"active");
            }
        }
    }else{
        for(var i=0;i<oRadio.length;i++){
            oRadio[i].getElementsByTagName("span")[0].onclick=function(){
                for(var i=0;i<oRadio.length;i++){
                    var os=oRadio[i].getElementsByTagName("span")[0];
                    removeClass(os,"active");
                }
                addClass(this,"active");
            }
        }
    }
}

    </script>
    <style>
        body{
            background: #00374B;
        }
        .h3{
            color: #fff;
            font-size: 15px;
        }
        .checkbox p{
            line-height: 14px;
            cursor:default;
        }
        .checkbox p.hand{
            cursor: pointer;
        }
        .checkbox{
            font-family: "微软雅黑";
            color: #fff;
            background: #00374B;
            width: 300px;
            float: left;
        }
        .checkbox input[type="checkbox"]{
            opacity: 0;
            margin: 0;
            cursor: pointer;
        }
        .checkbox .checkspan{
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 5px;
            border: 1px solid #35a48e;
            vertical-align: top;
            cursor: pointer;
        }
        .checkbox span.checked{
            background: url(icon_sprites.png);
            border: 1px solid #fff;
        }
        #check_all{
            display: none;
        }
        /* 单选按钮    */
        h2{

            color: #fff;
        }
        h3{
            color: #fff;
        }
        .radioBox{
            width: 100px;
        }
        .radioBox input[type="radio"]{
            opacity: 0;
            margin: 0;
            cursor: pointer;
        }
        .radioBox p{
            color: #fff;
            line-height: 15px;
        }
        .radioBox p.hand{
            cursor: pointer;
        }
        .radioBox span{
            background: url(icon_sprites.png) -14px 0;
            display: inline-block;
            vertical-align: top;
            width: 15px;
            height: 15px;
            margin-right: 5px;
            cursor: pointer;
        }
        .radioBox span.active{
            background: url(icon_sprites.png) -29px 0;
        }
    </style>
</head>
<body>
    <h2>复选框</h2>
    <p class="h3">1、点击文字可选中和全选,2、点击文字,没有全选,3、要点击复选框才能选中,全选,4、要点击复选框,没有全选</p>
    <!-- 1、点击文字可选中和全选 -->
    <div class="checkbox" id="cb01">
        <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p>
    </div>
    <!-- 2、点击文字,没有全选 -->
    <div class="checkbox" id="cb02">
        <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p>
    </div>
    <!-- 3、要点击复选框才能选中,全选 -->
    <div class="checkbox" id="cb03">
        <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p>
    </div>
    <!-- 4、要点击复选框,没有全选 -->
    <div class="checkbox" id="cb04">
        <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>
        <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p>
    </div>
    <br clear="both">
    <hr size="5">
    <!-- 单选按钮 -->
    <h2>单选按钮</h2>
    <!-- 1 -->
    <h3>点击文字可选中</h3>
    <div class="radioBox" id="rb01">
        <p class="hand"><span class="radio_span active"><input type="radio" name="sex"></span></p>
        <p class="hand"><span class="radio_span"><input type="radio" name="sex"></span></p>
    </div>
    <h3>只能选中单选框</h3>
    <!-- 2 -->
    <div class="radioBox" id="rb02">
        <p><span class="radio_span active"><input type="radio" name="sex"></span></p>
        <p><span class="radio_span"><input type="radio" name="sex"></span></p>
    </div>
</body>
</html>

下拉菜单:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉插件</title>
    <script type="text/javascript"></script>
    <style>
    
        .select{
            font-family: "微软雅黑";
            position: relative;
            width: 136px;
            height: 38px;
            border: 1px solid #eee;
            cursor: pointer;
        }
        .select:after{
            content: " ";
            width: 0;
            height: 0;
            border: 5px solid #666;
            border-bottom:none;
            border-left-color:transparent;  
            border-right-color:transparent;  
            position: absolute;
            display: block;
            top: 17px;
            right: 17px;
        }
        .select .select_text{
            padding:0 20px 0 10px;
            line-height: 38px;

        }
        .select ul{
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            border: 1px solid #eee;
            top: 38px;
            left: -1px;
            overflow: hidden;
            height: 0;
            border-top: none;
            background: #fff;
        }
        .select ul li{
            width: 106px;
            padding:0 20px 0 10px;
            height: 36px;
            line-height: 36px;
        }
        .select ul li:hover{
            background: #6AA7EA;
            color: #fff;
        }
        .select ul li.active{
            background: #195DA3;
            color: #fff;
        }
    </style>
    <script type="text/javascript" src="dropDown.js"></script>
    <script type="text/javascript">
        window.onload=function(){
        dropDown("sel01");
        }
    </script>
</head>
<body>
    <div class="select" id="sel01">
        <div class="select_text">请选择</div>
        <ul class="select_ul">
            <li index="0" class="active">请选择</li>
            <li index="1">惠州</li>
            <li index="2">深圳</li>
            <li index="3">东莞</li>
            <li index="4">广州</li>
        </ul>
    </div>
</body>
</html>

javascript代码:

function dropDown(name){
            var obj=document.getElementById(name);
            var oSelect_text=getClass(obj,"select_text")[0];
            var oSelect_ul=getClass(obj,"select_ul")[0];
            var aSelect_li=oSelect_ul.getElementsByTagName("li");
            var th=aSelect_li[0].offsetHeight*aSelect_li.length;
            obj.onOff=true;
            obj.onclick=function(ev){
                console.log(ev.target.getAttribute("index"));
                ev=ev || event;
                /*阻止冒泡*/
                ev.cancelBubble=true;
                if(obj.onOff){
                    obj.onOff=!obj.onOff;
                    doMove(oSelect_ul,"height",5,th);
                }else{
                    obj.onOff=!obj.onOff;
                    doMove(oSelect_ul,"height",5,0);

                }
                 /*判断点击了哪个元素*/
                if(ev.target.getAttribute("index")!=null){
                    var index=ev.target.getAttribute("index");
                    for(var i=0;i<aSelect_li.length;i++){
                        removeClass(aSelect_li[i],"active");
                    }
                    oSelect_text.innerHTML=aSelect_li[index].innerHTML;
                    addClass(aSelect_li[index],"active");
                }
            }
            document.onclick=function(){
                if(!obj.onOff){
                    obj.onOff=!obj.onOff;
                    doMove(oSelect_ul,"height",5,0);
                }
            }
        }


/*获取class方法
**第一个参数是哪个对象元素下的子元素
**第二参数是要获取的class
*/
function getClass(obj,classname){
    var arr=[];
    var arr1=[];
    var tagName=obj.getElementsByTagName("*");
    for(var i=0;i<tagName.length;i++){
        arr1=tagName[i].className.split(" ");
        for(var j=0;j<arr1.length;j++){
            if(arr1[j]==classname){
                arr.push(tagName[i]);
                break;
            }
        }    
    }
    return arr;
}
/*判断对象元素是否有这个class,
**第一个参数是传元素对象,这个对象不能是数组
**第二个参数是要检查的class
*存在返回true,不存在返回false
**/
function equalClass(obj,classname){
    var arr=obj.className.split(" ");
    for(var i=0;i<arr.length;i++){
        if(arr[i]==classname){
            return true;
        }
    }
    return false;
}
/*添加class,
**第一个参数是传元素对象,这个对象不能是数组
**第二个参数是要添加的class
*/
function addClass(obj,classname){
    if(equalClass(obj,classname)){
        return;
    }else{
        if(obj.className.trim().length==0){
            obj.className=classname;
        }else{
        obj.className+=" "+classname;
        }
    }
}

/*移除class
**第一个参数是传元素对象,这个对象不能是数组
**第二个参数是要添加的class
*如果不存在class会有返回值-1
*/
function removeClass(obj,classname){
    if(equalClass(obj,classname)){
        var arr=obj.className.split(" ");
        for(var i=0;i<arr.length;i++){
            if(arr[i]==classname){
                arr.splice(i,1);
            }
        }
            obj.className=arr.join(" ");
    }else{
        return -1;
    }
}

/*切换class,
**第一个参数是传元素对象,这个对象不能是数组
**第二个参数是要切换class
*/
function toggleClass(obj,classname){
    if(equalClass(obj,classname)){
        removeClass(obj,classname);
    }else{
        addClass(obj,classname);    
    }
}




/*使用调用,obj对象,attr属性,speed速度,iTarget想达到的值,fn回调函数*/
/*因为运动基本都是px为单位的,至于透明度是没有单位,所以在这里把它分开了,
    其实也没有怎么改,就是判断是不是透明度这个属性,然后走透明度这条线
*/
        function doMove(obj,attr,speed,iTarget,fn){
            if(attr=="opacity"){
                obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;
            }else{
                obj.len=iTarget-parseFloat(getStyle(obj,attr));
            }
            /*这里判断方向,在初始点后的为负数,在初始点前为正数*/
            speed=obj.len>0?speed:-speed;

            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                if(!obj.num){
                    obj.num=0;
                }
                if(attr=="opacity"){
                    obj.num=parseFloat(getStyle(obj,attr))*100+speed;
                }else{
                    obj.num=parseInt(getStyle(obj,attr))+speed;
                }
                /*这里是判断到了目标点没有,到了就停止定时器*/
                if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
                    obj.num=iTarget;
                    clearInterval(obj.timer);
                }
                if(attr=="opacity"){
                    obj.style[attr]=obj.num/100;
                }else{
                    obj.style[attr]=obj.num+"px";
                }
                /*因为放在上面无法实现到回调函数的完整作用,出现一些BUG*/
                if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
                    fn && fn();
                }
            },5);

        }
        /*获取css属性值的,会获取表现出现的值*/
        function getStyle(obj,attr){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
        }

申请进度条:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
<script type="text/javascript">
    window.onload=function(){
        step("sb01");
    }
    /*主要是css样式的添加和移出,不解释*/
    function step(name){
        var oStep_body=document.getElementById(name);
        var oStep_act=oStep_body.querySelector(".step-act");
        var aP=oStep_body.querySelectorAll(".step-t p");
        var aSpan=oStep_body.querySelectorAll(".step-t span");
        var astep_list=oStep_body.querySelectorAll(".step-content .step-list");
        var oPre=document.getElementById("pre");
        var oNext=document.getElementById("next");
        var oGotoBtn=document.getElementById("gotoBtn");
        var count=0;
        oStep_act.style.width="6.25%";
        oPre.onclick=function(){
            if(count>0){
                aP[count].className="";
                aSpan[count].className="";
                for(var i=0;i<astep_list.length;i++){
                    astep_list[i].style.display="none";
                }
                astep_list[count].style.display="block";
            }
            count--;
            if(count<0){
                count=0;
            }
            if(count==0){
                oStep_act.style.width="6.25%";
            }else if(count<7&&count>=1){
                oStep_act.style.width=(18.75+12.5*(count-1))+"%";
            }    
        }
        oNext.onclick=function(){
            count++;
            if(count==1){
                oStep_act.style.width="18.75%";
            }else if(count==7){
                oStep_act.style.width="100%";
            }else if(count<7&&count>1){
                oStep_act.style.width=(18.75+12.5*(count-1))+"%";
            }else{
                count=7;
                return ;
            }
            aP[count].className="p-active";
            aSpan[count].className="active";
            for(var i=0;i<astep_list.length;i++){
                astep_list[i].style.display="none";
            }
            astep_list[count].style.display="block";
        }
        oGotoBtn.onclick=function(){
            for(var i=0;i<aSpan.length;i++){
                aSpan[i].className="";
                aP[i].className="";
            }
            count=2;
            aP[count].className="p-active";
            aSpan[0].className="active";
            aSpan[1].className="active";
            aSpan[2].className="active";
            for(var i=0;i<astep_list.length;i++){
                astep_list[i].style.display="none";
            }
            astep_list[count].style.display="block";
            oStep_act.style.width=(18.75+12.5*(count-1))+"%";
        }
    }
</script>
<style>
    .step-body{
        font-family: "微软雅黑";
        width: 80%;
        margin: 0 auto;
        position: relative;
        color: #625454;
    }
    .stepBox{
        position: relative;
        width: 100%;
        height: 130px;
    }
    .step-p{
        height: 5px;
        background: #ddd;
        width: 100%;
        border-radius: 10px;
        position: relative;
        top: 51px;
        left: 0;
    }
    .step-act{
        width: 0%;
        background: #466faa;
        height: 100%;
        border-radius: 10px;
        transition: all 0.5s;
    }
    .step-t{
        margin: 0;
        padding:0;
        list-style: none;
        position: absolute;
        z-index: 3;
        width: 100%;
        top: 0;
        left: 0;
    }
    .step-t li{
        float: left;
        width: 12.5%;
        text-align: center;
        font-size: 12px;
    }
    .step-t li p.p-active{
        color: #466faa;
    }
    .step-t li span{
        font-size: 17px;
        display: block;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 50%;
        background: #ddd;
        margin: 0 auto;
    }
    .step-t li span.active{
        background:#466faa; 
        color: #fff;
    }
    .step-content{
        margin-bottom: 10px;
    }
    .step-content .step-list{
        display: none;
    }
    </style>
</head>
<body>
    <div class="step-body" id="sb01">
        <div class="stepBox">
            <div class="step-p">
                <div class="step-act"></div>
            </div>
            <ul class="step-t">
                <li>
                    <p class="p-active">填写申请表</p>
                    <span class="active">1</span>
                </li>
                <li>
                    <p>上传资料</p>
                    <span>2</span>
                </li>
                <li>
                    <p>待确认</p>
                    <span>3</span>
                </li>
                <li>
                    <p>已确认</p>
                    <span>4</span>
                </li>
                <li>
                    <p>待受理</p>
                    <span>5</span>
                </li>
                <li>
                    <p>已受理</p>
                    <span>6</span>
                </li>
                <li>
                    <p>预约完成</p>
                    <span>7</span>
                </li>
                <li>
                    <p>签证单已发放</p>
                    <span>8</span>
                </li>
            </ul>
        </div>
        <div class="step-content">
            <div class="step-list" style="display:block">填写申请表</div>
            <div class="step-list">上传资料</div>
            <div class="step-list">待确认</div>
            <div class="step-list">已确认</div>
            <div class="step-list">待受理</div>
            <div class="step-list">已受理</div>
            <div class="step-list">预约完成</div>
            <div class="step-list">签证单已发放</div>

        </div>
        <button id="pre">上一步</button>
        <button id="next">下一步</button>
        <button id="gotoBtn">调到指定步骤</button>
    </div>
</body>
</html>

 抽奖:这个之前写过一个,封装封装一下,就能拿来用了。链接:抽奖代码地址

posted @ 2016-09-15 23:46  小数点就是问题  阅读(426)  评论(0编辑  收藏  举报