自己写的一些复用样式

4 篇文章 0 订阅
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/rem.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
        <style>
            *{padding:0;margin:0;}
    /*1、确定取消*/
            .delDiv{width:11.52rem;height:4.48rem;text-align:center;color:#000;background:#F7F7F7;-moz-border-radius:0.555rem;-webkit-border-radius:0.555rem;border-radius:0.555rem;font-size:0.725rem;position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:10000;}
            .delDiv .delDiv_tip{width:100%;height:2.56rem;line-height:2.56rem;border-bottom:1px solid #e2e2e2;}
            .delDiv .delDiv_info{width:100%;height:1.877rem;line-height:1.877rem;}
            .delDiv .delDiv_info .delDiv_info_left{width:50%;height:1.877rem;text-align:center;float:left;border-right:1px solid #e2e2e2;box-sizing:border-box;}
            .delDiv .delDiv_info .delDiv_info_right{width:50%;height:1.877rem;text-align:center;float:right;}
            .delDiv .delDiv_info .btn-green{border:0;font-size:0.725rem;color:#3A79FF;background:none;outline:none;}

            /*.mask{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1000;background:#000;opacity:0.4;filter:alpha(opacity=40)}*/

            .expurgate{width:4.48rem;height:2.517rem;line-height:2.517rem;text-align:center;color:#fff;background:#000;opacity:0.8;filter:alpha(opacity=80);-moz-border-radius:0.427rem;-webkit-border-radius:0.427rem;border-radius:0.427rem;font-size:0.683rem;position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;}

    /*2、确定*/
            /*弹出框*/
            .popup{width:11.52rem;height:4.48rem;text-align:center;color:#383838;background:#F7F7F7;-moz-border-radius: 0.555rem;-webkit-border-radius: 0.555rem;border-radius: 0.555rem;font-size:0.725rem;position: absolute;top:10rem;left:2.24rem;z-index:2000;}
            .popup .pop_pass{display:table;width:11.52rem;height:2.56rem;border-bottom:1px solid #ccc;box-sizing:border-box;padding:0 1rem;}
            .popup .pop_pass .pass{vertical-align:middle;display:table-cell;text-align:center;width:11.52rem;height:2.56rem;}
            .popup .ok{height:1.92rem;line-height:1.92rem;color:#3A79FF;}
            /*遮罩层*/
            .mask{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1000;background:#000;opacity:0.4;filter:alpha(opacity=40);}

    /*3、提示框*/
        .hint{display:table;width:7rem;height:2rem;padding:0.6rem;color:#fff;background:#000;opacity:0.8;filter:alpha(opacity=80);-moz-border-radius:0.427rem;-webkit-border-radius:0.427rem;border-radius:0.427rem;font-size:0.683rem;position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index: 10000;}
        .hint_txt{vertical-align:middle;display:table-cell;text-align:center;width:7rem;height:2rem;}


    /*4、圆角*/
        /*  div{-moz-border-radius:0.256rem;-webkit-border-radius:0.256rem;border-radius:0.256rem;} */

    /*5、透明度*/
        /*  div{opacity:0.3;filter:alpha(opacity=30);}  */

    /*6、placeholder颜色改变,字体大小改变*/
        /*  input:-moz-placeholder,textarea:-moz-placeholder{color:#B5B5B6;font-size:0.64rem;}   
            input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#B5B5B6;font-size:0.64rem;}   
            input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#B5B5B6;font-size:0.64rem;}   */

    /*7、滚动去除卡顿及滚动条*/
        /*  .wrap{overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
            .wrap::-webkit-scrollbar{display:none;}  */

    /*8、水平垂直居中*/
        /*  div{position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;}  */

    /*9、背景渐变效果*/
        /*  div{
                background:-webkit-linear-gradient(#ffbb18, #ff353f);
                background:-moz-linear-gradient(#ffbb18, #ff353f);
                background:-o-linear-gradient(#ffbb18, #ff353f);
                background:-webkit-gradient(linear, from(#ffbb18), to(#ff353f));
                background:#ffbb18;
                background:linear-gradient(#ffbb18, #ff353f);
            }   
        */

    /*10、引入字体*/
        /*@font-face {
            font-family:'shuweishufa';
            src: url('fonts/shuweishufa.ttf');
        }
        div{font-family:"shuweishufa";}*/

    /*11、弹性盒布局*/

    /*12、swiper轮播图*/


    /*13、input框记住账号后背景为白色*/
        /*input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px white inset;}*/

    /*14、selsect框设置下拉按钮*/
        /*.sel{width:9rem;height:1.579rem;border:0;outline:none;font-size:0.597rem;background: #fff url(../img/xiala.png) no-repeat right center;background-size:9% 50%;padding-right:0.8rem;}*/

    /*15、去除默认样式*/
        /*input[type="button"], input[type="submit"],input[type="reset"],input[type="text"],input[type="tel"],select,textarea{-webkit-appearance:none;}*/
    /*16、背景全屏显示*/   
        /**{margin: 0;padding: 0;}
            html, body {width:100%;height: 100%;overflow: hidden;}
            .cont {height: 100%;height: 100%;background-image:url("slider-2.jpg");background-size:cover;overflow:auto;}*/
    /*17、禁止选中复制*/   
        /*.nocopy {-moz-user-select:none;-webkit-user-select:none}*/
    /*18、文本溢出隐藏*/
        /*div{white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}*/

    /*19、多行隐藏*/
    /*div{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}*/      
        </style>
    </head>
    <body>
        <div>1234567890</div>
    <!--1、确定取消-->       
        <!--<div class="delDiv" style="display:block;">
            <div class="delDiv_tip">确认删除该图片吗?</div>        
            <div class="delDiv_info">
                <span id="" class="delDiv_info_left">
                    <input id="btnCancel" type="button" value="取 消" class="btn-green" />
                </span>
                <span id="" class="delDiv_info_right">
                    <input id="btnDelTrue" type="button" value="确 认" class="btn-green" />
                </span>             
            </div>
        </div>
        <div class="expurgate" style="display: none;">删除成功</div>
        <div class="mask" style="display:block;"></div>-->


    <!--2、确定,不管一行还是两行都是垂直居中-->
        <!--<div class="popup" style="display:block;">
            <div class="pop_pass"><p class="pass">虚拟购买人数不能大于当前虚拟在线人数1000</p></div>
            <p class="ok">确定</p>
        </div>
        <div class="mask" style="display:block;"></div>-->


    <!--3、提示框 ,不管一行还是两行都是垂直居中-->
        <div class="hint" style="display: none;"><p class="hint_txt">抢购尚未开始,请注意抢购时间</p></div>





    <!--13、PC端-->
        <!--<input class="inp" type="text" onkeyup="clearNoNum(this)">-->
        <!--<script>
            function clearNoNum(obj){  
                obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符     
                obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的           
                obj.value = obj.value.replace(/^\./g,"");   //必须保证第一个为数字而不是.                
                obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");  //保证.只出现一次,而不能出现两次以上         
                obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数   
                if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额  
                    obj.value= parseFloat(obj.value);  
                }  
            } 
        </script>-->


    <!--14、移动端-->               
        <!--<input type="text" class="inp" />   
        <script>
            $(".inp").bind("input","onpropertychange",function(){
                $(this).val($(this).val().replace(/[^\d.]/g,""));
                $(this).val($(this).val().replace(/\.{2,}/g,"."));

                $(this).val($(this).val().replace(/^\./g,""));

                $(this).val($(this).val().replace(".","$#$").replace(/\./g,"").replace("$#$",".")); 
                $(this).val($(this).val().replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'));
                if($(this).val().indexOf(".")< 0 && $(this).val() !=""){
                    $(this).val(parseFloat($(this).val()));
                }
            })  
        </script>   -->

    <!--15、复制按钮,复制input内容-->
    <!--<input type="text" readonly id="text" value="1234566" />
    <button onclick="myCopy()">点击复制文本框内的内容</button><br>
    <script>
        function myCopy(){
            var ele = document.getElementById("text");
            ele.select();
            document.execCommand("Copy");
            alert("复制成功");
        }
    </script>   -->


    </body>
    <script>
    //1、确定取消    
        $("#btnDelTrue").click(function(){
            $(".delDiv").hide();
            $(".mask").hide();
            /*删除图片*/
            $(".expurgate").show(0).delay(1000).hide(0);               
        })
        $("#btnCancel").click(function(){
            $(".delDiv").hide();
            $(".mask").hide();
        })

    //2、确定
    $(".ok").click(function(){
        $(".popup").hide();
        $(".mask").hide();
    })

    //3、提示框
    $(".hint").show(0).delay(1000).hide(0);




    //16、刷新当前页面
    //window.location.reload();


    //17、判断是否在微信&&安卓上,是底部隐藏,否显示     
//  function is_weixn(id){
//      var u = navigator.userAgent;
//      var ua = navigator.userAgent.toLowerCase();    
//      if((ua.match(/MicroMessenger/i)=="micromessenger")&&(u.indexOf('Android')>-1)) {//判断微信终端&&android终端
//          var oHeight = $(document).height(); //浏览器当前的高度  
//          $(window).resize(function(){
//              if($(document).height() < oHeight){
//                  $(id).hide();
//              }else{           
//                  $(id).show();
//              }
//          }) 
//      }   
//  }
//  is_weixn(".btn");


    //18、滚动条    
//  function scroll(){
//      var myscroll;
//      function loaded(){
//          setTimeout(function(){
//              myscroll=new IScroll(".wrap",{
//                  click:true,
//              })
//          },100);
//      }       
//      window.addEventListener("load",loaded,false);
//  }
//  scroll();

    //19、判断pc还是移动端,公安备号显示与隐藏
//  function goPAGE() {
//      if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
//          $(".police").hide(); //移动端
//      }
//      else {
//          $(".police").show();//pc端
//      }
//  }
//  goPAGE();

    //20、倒计时加零
//  function add_zero(n){
//      return n < 10 ? '0'+ n : n;
//  }

    //21、on绑定click事件在苹果手机失效的问题
    //方法:{cursor:pointer}苹果有这么个设置,鼠标放上去,能够出现“手”型的图标才被认作可以使用点击事件


    //22、通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端  
//      var u = navigator.userAgent;
//      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
//      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
//      alert('是否是Android:'+isAndroid);
//      alert('是否是iOS:'+isiOS);


    //23、判断iPhone|iPad|iPod|iOS|Android客户端
//      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS
            //alert(navigator.userAgent);  
//               window.location.href ="iPhone.html";
//      } else if (/(Android)/i.test(navigator.userAgent)) {   //判断Android
            //alert(navigator.userAgent); 
//          window.location.href ="Android.html";
//      } else {  //pc
//          window.location.href ="pc.html";
//      };



    //24、点击键盘backspace键清空验证码
        //动态
        $(document).on("keydown",".information_txt",function(event){
            event=event||window.event;
            if (event.keyCode == 8) {       
                $(this).val("")
            }
        })
        //不动态
    //  $('.information_txt').keydown(function (event) {
    //      event=event||window.event;
    //      if (event.keyCode == 8) {       
    //          $(this).val("")
    //      }
    //  });

    //25、复选框遍历选中的个数
//  var n=0;
//  for(var i=0; i< $(".gou").length;i++){
//      if($(".gou")[i].checked){
//          n++;
//      }
//  }

    //26、复选框遍历选中的个数的值
//  for(var j=0; j< $(".gou").length;j++){
//      if($(".gou")[j].checked){
//        var id=$(".gou")[j].value;
//      }
//  }

    //27、复选框遍历选中的个数的值拼成字符串
//  for(var j=0; j< $(".gou").length;j++){
//      if($(".gou")[j].checked){
//          var id=$(".gou")[j].value;
//          var s=s+id+",";
//      }
//  }
//    var ID=s.substr(0, s.length - 1);//最后一个逗号删除

    //28、json数据拿取
//  info:{1:{name:"生产管理",sm_id:["生产二维码","添加商品"]}}
//   var obj=data.info;
//   for (i in obj){
//      console.log(obj);
//       console.log(obj[i]);
//      console.log(obj[i].name);
//      console.log(obj[i].sm_id);
//      var s2='<div style="margin: 10px 0;color: #1aad1a"><label class="checkbox-inline"><input type="checkbox" disabled checked />'+obj[i].name+'</label></div>'
//      var arr=obj[i].sm_id;
//      var s3='';
//      for(var k=0;k<arr.length;k++){
//          var s3=s3+ '<label class="checkbox-inline"><input type="checkbox" disabled checked />'+arr[k]+'</label>'
//      }
//      $(".main_ul").append("<li class='main_li'>"+s2+"<div style='margin-left:40px'>"+s3+"</div><li>");
//  }
    //29、复选框
//      $('.all').click(function () {
//          var id = $(this).attr('title');
//          $('input[abc='+id+']').prop('checked',this.checked);
//      });
//      $('.gou').click(function () {
//          var num = $(this).attr('abc');
//          var n=0;
//          for(var i=0; i<$('input[abc='+num+']').length;i++){
//              if($('input[abc='+num+']')[i].checked){
//                  n++;
//              }
//          }
//          if(n>0){
//              $('input[title='+num+']').prop("checked", true);
//          }else{
//              $('input[title='+num+']').prop("checked", false);
//          }
//      });
        //30、每次绑定前先取消上次的绑定防止重复
//      $('#sub').unbind('click').click(function () {
//          ...
//      });
        //31、map
//      $("p").append( $("input").map(function(){
//          return $(this).val();
//      }).get().join(", ") );
    </script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

举个栗zi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值