万里任禅游

外观

javascript

1149字约4分钟

javascript

2020-05-08

语法

规则

  • // 单行注释
  • /**/ 多行注释
  • ； 语句结束
  • {} 语句块

数据类型

  • 定义 var | let | const
  • 浮点型
    • 保留两位小数 num.toFixed(2);
  • 字符串
    • 字符串替换 str.replace(/\s/g, ' ')
    • 转型
      • parseInt()
      • parseFloat()
  • JSON
    • JSON转字符串 JSON.stringify(jsonStr)
    • 字符串转JSON str.parseJSON(); JSON.parse();
    • 删除属性 delete dataObj['部门'];
    • 数据类型判断 typeof(var)
  • 子页面父页面相互调用
    • $("#compAnalysis")[0].contentWindow.getBizInfo()
    • window.parent.parentFunction();
  • 编码转换
    • 转UTF-8编码 encodeURI(str)、encodeURIComponent(str)
    • URLDecoder.decode(text, "UTF-8")

函数

日期

* 年份 `getFullYear()`
* 月份 `getMonth() + 1`
* 日 `getDate()`

事件

委托

`("父级元素").delegate('自己元素', '事件', function () {  § 巴拉巴拉....});`

框架

bootstrap

自带文件上传弹框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        .close {
            position: absolute;
            top: 12px;
            right: 12px;
        }
        .input-group {
            width: 536px;
        }
    </style>
    <link href="css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/fileinput.js" type="text/javascript"></script>
    <script src="js/fileinput_locale_de.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/fileinput_locale_zh.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            $("#input-b9").fileinput({
                showPreview: false,
                showUpload: false,
                elErrorContainer: '#kartik-file-errors',
                allowedFileExtensions: ["jpg", "png", "gif"]
                //uploadUrl: '/site/file-upload-single'
            });
        });
        </script>
</head>
<body>
    <!-- 按钮 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        上传
    </button>

    <!-- 弹框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">上传Excel</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
            <div class="file-loading">
                <input id="input-b9" name="input-b9[]" multiple type="file"'>
            </div>
            <div id="kartik-file-errors"></div>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" title="Your custom upload logic">保存</button>
            </div>
        </div>
        </div>
    </div>
</body>
</html>

iframe文件上传弹框

----------------------------------------------------------
父页面：
----------------------------------------------------------
<script>
    // 关闭弹框
    $('#upload-box').hide();
    function closeUploadPop() {
        $('#upload-box').slideUp(1000);
    }
</script>
<!-- 文件上传 -->
<iframe id="upload-box" src="upload/UploadPop.html" style="border: 0px; width: 500px; height: 400px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); position: fixed; z-index: 2; left: calc(50% - 250px); top: calc(30% - 150px);"></iframe>

----------------------------------------------------------
子页面：
----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传组件</title>
    <link href="../fileinput/css/bootstrap.min.css" rel="stylesheet">
    <link href="../fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    <style>
        html, body {
            background: #f3f7fc;
            overflow: hidden;
        }
        .upload-box {
            width: 500px;
            height: 400px;
        }
        .close-icon {
            position: absolute;
            width: 24px;
            height: 24px;
            top: 10px;
            right: 10px;
            color: #4a6775;
        }
        .close-icon:hover {
            cursor: pointer;
        }
        .panel-body {
            height: 90%;
        }
    </style>
</head>
<body>
<div class="upload-box panel panel-info" style="background: #f3f7fc;">
    <div class="close-icon" id="closeIcon">ㄨ</div>
    <div class="panel-heading">
        <h3 class="panel-title">上传Excel</h3>
    </div>
    <div class="panel-body">
        <input id="excelFile" type="file" class="file" data-overwrite-initial="false">
    </div>
</div>

<script src="../fileinput/js/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="../fileinput/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="../fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
<script>
    // 关闭弹框
    $('#closeIcon').click(function (){
        window.parent.closeUploadPop();

    })

    // 上传Excel
    let uploadHeadquartersUrl = 'http://' +  location.host + '/api/database/uploadHeadquarters';
    $("#excelFile").fileinput({
        uploadUrl: uploadHeadquartersUrl,
        uploadAsync: true,
        language: 'zh',
        allowedFileExtensions : ['xls', 'xlsx'],
        overwriteInitial: false,
        maxFileSize: 5000,
        maxFilesNum: 1,
        enctype: 'multipart/form-data',
        uploadExtraData: {},
    }).on('fileuploaded', function (event, data, previewId, index) {
        var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;
        var res = data.response;
        console.log('res -- ' + res);
    });
</script>
</body>
</html>

layUi

Ueditor

Ckfinder

常用

自定义js库

(function(){

	if(!window.ADS){window['ADS']={}}

	// 获取元素
	function $(){};
	window.ADS.$ = $;
    
    // 读取对象
    function writeObj(obj){
        let description = "";
        for(let i in obj){
            let property=obj[i];
            description+=i+" = "+property+"\n";
        }
        return description;
    }
    window.ADS.writeObj = writeObj;
    
    // 获取url参数
    function getQueryVariable(variable) {
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){
               return pair[1];
           }
       }
       return(false);
    }
    window.ADS.getQueryVariable = getQueryVariable;

})();

节点

  • 父节点 var parent = test.parentNode;
  • 全部子节点 var chils = test.childNodes;
  • 第一个子节点 var first = test.firstChild;
  • 最后一个子节点 var last = test.lastChile;
  • 上一个兄弟节点 var previous = test.previousSibling;
  • 下一个兄弟节点 var next = test.nextSibling;
  • 父节点元素 var parent = test.parentElement;
  • 第一个子节点元素 var first = test.firstElementChild;
  • 最后一个子节点元素 var last = test.lastElementChild;
  • 上一个兄弟节点元素 var previous = test.previousElementSibling;
  • 下一个兄弟节点元素 var next = test.nextElementSibling;
  • 获取兄弟节点
function sibling(elm) {
    var a = [];
    var p = elm.parentNode.children;
    for(var i = 0, pl = p.length; i < pl; i++) {
        if(p[i] !== elm) a.push(p[i]);
    }
    return a;
}

Excel解析

<script type="text/javascript" src="js/xlsx.min.js"></script>
<script type="text/javascript">
// 读取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
    var reader = new FileReader();
    reader.onload = function(e) {
        var data = e.target.result;
        var workbook = XLSX.read(data, {type: 'binary'});
        if(callback) callback(workbook);
    };
    reader.readAsBinaryString(file);
}

// 读取 excel文件
function outputWorkbook(workbook) {
    var sheetNames = workbook.SheetNames;
    sheetNames.forEach(name => {
        var worksheet = workbook.Sheets[name];
        let dataLength = 0;
        let companyObjs = []; // 公司编码，审计类型 确定一条数据 
        let processObjs = []; // 流程编号 确定一条数据
        for(var key in worksheet) {
            // v是读取单元格的原始值
            // console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
            // !ref A1:L5
            // VM10657:44 A1 序号
            // VM10657:44 B1 公司编码
            // VM10657:44 C1 公司名称
            // VM10657:44 D1 流程编码
            // VM10657:44 E1 流程名称及编号
            // VM10657:44 F1 控制点编号
            // VM10657:44 G1 控制点简述
            // VM10657:44 H1 类型
            // VM10657:44 I1 接口人
        }
    });
}
</script>