码迷，mamicode.com
首页 > 其他好文 > 详细

中秋来一发

时间：2016-09-16 00:11:51      阅读：289      评论：0      收藏：0      [点我收藏+]

标签：

大家中秋节快乐！！！！

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

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

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>

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

中秋来一发

标签：

原文地址：http://www.cnblogs.com/zhangzhicheng/p/5875692.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！