分类 前端编程 下的文章

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

editor.md 开源在线 Markdown 编辑器

layer 弹出层框架

webuploader 文件上传框架

Nprogress 库

jstree 下来分组插件

font awesome 字体库

cropper 图片剪裁库

  • html代码
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="fileinput.min.css" type="text/css" rel="stylesheet">
<link href="fileinput-rtl.min.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"type="text/javascript"></script>
<script src="fileinput.js"type="text/javascript"></script>
<script src="zh.min.js"></script>
<form enctype="multipart/form-data">
 <input name="pic" id="input-44" type="file" multiple>
</form>
  • js代码
<script>
    $(document).on('ready', function() {
        $("#input-44").fileinput({
            uploadUrl: 'http://www.baidu.com',  //还写具体上传地址才显示可拖拽区域
            language: 'zh', //设置语言
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            uploadAsync: true, //默认异步上传
            showUpload:true, //是否显示上传按钮
            showRemove :true, //显示移除按钮
            showPreview :true, //是否显示预览
            showCaption:true,//是否显示长条标题
            browseClass:"btn btn-primary", //按钮样式
            dropZoneEnabled: true,//是否显示拖拽区域
            maxFileCount:10, //表示允许同时上传的最大文件个数
            enctype:'multipart/form-data',
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
            msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!', //错误提示
            uploadExtraData:{"id": 1, "fileName":'123.mp3'},//上传携带参数
            maxFileCount:10, //表示允许同时上传的最大文件个数
            maxFileSize:0,//单位为kb,如果为0表示不限制文件大小
            slugCallback:function(){}, //上传前的回调
            overwriteInitial: false, //false时,本身已存在的预览图,后面在上传就继续追加而不是覆盖原来的
            previewSettingsSmall:{image: {width: "100%", height: "100%", 'max-width': "auto",'max-height': "auto"}},  //修改之前上传的预览图
            previewSettings:{image: {width: "100%", height: "100%", 'max-width': "auto",'max-height': "auto"}},  //修改刚刚上传的预览图

            initialPreview:['<img src="1.jpg">','<img src="2.jpg">'], //初始化显示出预览图
            //initialPreviewAsData: true //为true时,initialPreview数组里面的html标签就不会解析,直接显示数据了
            initialPreviewConfig: [ //初始化预览图时,为预览图设置属性
             {
               caption: '名称1',// 预览图展示的图片名称
               width: '120px',// 图片高度
               url: 'http://localhost/1.php',//删除预览图片的回调,返回的必须是json否则删除预览图的效果就没有
               key: '1a',// 删除按钮会添加data-key="1a",同时也会提交给后台key:'1a'值
               extra: {id: 11} //调用删除路径所传参数 
             },
             {
               caption: '名称2',
               width: '120px',
               url: 'http://localhost/1.php',
               key: '2a',
               extra: {id: 22}
             }
            ]
        }).on("filebatchselected", function(event, files) {  //选中要上传的文件后回调
           $(this).fileinput("upload");  //自动上传

        }).on("fileuploaded", function(event, data) {
            if(data.response)
            {
                alert('处理成功');
            }
        }).on('filedeleted', function() {
             console.log(1111) //删除预览图的回调
        });

        //filesuccessremove  删除刚刚上传成功图片的回调
        //filebatchuploadcomplete 文件全部都上传完成才回调
        //fileuploaderror  上传文件错误后回调
        //还有更多估计你自己看源码
    });
</script>

function checkMobile(str) { //写一个判断函数
      
    var  re = /^1\d{10}$/    //正则表达式
    if (re.test(str)) {      //判断字符是否是11位数字
          return true;//手机号正确
    }
    else {
          return true;//手机号错误
    }
}

<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=60;
function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");            
            o.value="免费获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value="重新发送(" + wait + ")";
            wait--;
            setTimeout(function() {
                time(o)
            },
            1000)
        }
    }
document.getElementById("btn").onclick=function(){time(this);}
</script>