Toturials about json-server

[xyzdata]

get form checkbox data in js

https://stackoverflow.com/questions/3547035/javascript-getting-html-form-values

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements_index

function myFunction() {
    var elements = document.getElementById("myForm").elements;
    var obj ={};
    for(var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

    document.getElementById("demo").innerHTML = JSON.stringify(obj);
}

https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox

http://javascript-coder.com/javascript-form/javascript-get-check.phtml

https://www.go4expert.com/articles/getting-checkbox-value-s-html-form-jsp-t4542/

git ignore

[xyzdata]

HTML5 files upload progress

http://christopher5106.github.io/web/2015/12/13/HTML5-file-image-upload-and-resizing-javascript-with-progress-bar.html

https://www.sitepoint.com/html5-javascript-file-upload-progress-bar/

https://stackoverflow.com/questions/21646626/file-uploads-percentage-completed-progress-bar

[xyzdata]

prefetch & preload

performance optimization 性能优化

<link rel="preload" href="/static/js/app.f0740e69f6377b5e784f.js" as="script">
<link rel="preload" href="/static/js/14.3d579fef7bcc5b20c2cc.js" as="script">

<link rel="preload" href="/static/css/app.d3668b3b356b3a7a2ff319b33312d3b2.css" as="style">

<link rel="prefetch" href="/static/js/12.cbf64669f2914491841d.js">

[xyzdata]

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

[xyzdata]

no copy

oncopy="return false" onpaste="return false"

<input type="password" name="password" ng-model="password" required="" md-maxlength="20" oncopy="return false" onpaste="return false" class="md-input ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-valid-md-maxlength ng-touched" id="input_4" aria-invalid="false" ng-trim="false" style="">

[xyzdata]

[xgqfrms]

VUE 2.x

https://vue.xgqfrms.xyz/

https://scotch.io/@xgqfrms/the-path-of-learn-angular-2-notes-coding

[xyzdata]

chartjs

https://www.chartjs.org/samples/latest/charts/area/line-boundaries.html

[xyzdata]

colgroup & col

    <section>
        <table class="gildata-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead class="gildata-thead">
                <tr class="gildata-tr">
                    <th colspan="2">long long long 表头 1</th>
                    <th>表头 2</th>
                    <th>表头 3</th>
                </tr>
                <tr class="gildata-tr">
                    <th>多级表头 1</th>
                    <th>多级表头 2</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
        </table>
    </section>
    <section>
        <table class="gildata-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <tbody class="gildata-tbody">
                <tr class="gildata-tr">
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
                <tr class="gildata-tr">
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
                <tr class="gildata-tr">
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
            </tbody>
        </table>
    </section>

[xyzdata]

rowspan="2" & colspan="2"

    <section>
        <table class="gildata-table">
            <colgroup>
                <col width="10%" span="2">
                <col width="30%">
                <col width="50%">
            </colgroup>
            <thead class="gildata-thead">
                <tr class="gildata-tr">
                    <th colspan="2">long long long 表头 1</th>
                    <th rowspan="2">表头 2</th>
                    <th rowspan="2">表头 3</th>
                </tr>
                <tr class="gildata-tr">
                    <th>多级表头 1</th>
                    <th>多级表头 2</th>
                </tr>
            </thead>
        </table>
    </section>

[xyzdata]

regex

https://regexper.com/#%2F(1)(2)(3)(4)(5)(6)(7)(8)(9)(10)((%3F%3D(%5B0-9%5D%7B1%2C6%7D)))(12)%2F

regex

https://regexper.com/

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

// test

let str1 = `基金 专题 资产配置 其他 组合重大变动明细`,
    str2 = `基金,专题,资产配置,其他,组合重大变动明细`,
    str3 = `基金, 专题, 资产配置, 其他, 组合重大变动明细`,
    str4 = `基金 ,专题 ,资产配置 ,其他 ,组合重大变动明细`,
    str5 = `基金 , 专题 , 资产配置 , 其他 , 组合重大变动明细`,
    str6 = ` , 基金 , 专题 , 资产配置 , 其他 , 组合重大变动明细 , `;


const stringToArray = (str = ``) => {
    let result = [];
    result = str.replace(/,/ig, " ").trim().replace(/\s+/ig, ",").split(",");
    return result;
};

stringToArray(str6);
// (5) ["基金", "专题", "资产配置", "其他", "组合重大变动明细"]

[xyzdata]

https://assets-cdn.github.com/images/modules/network/t.png

https://ant.design/components/table-cn/#components-table-demo-fixed-header

https://ant.design/components/table-cn/#components-table-demo-grouping-columns

https://github.com/fool2fish/blog/issues/2

[xyzdata]

fixed table header

固定表头

https://stackoverflow.com/questions/673153/html-table-with-fixed-headers

http://jsfiddle.net/dPixie/byB9d/3/

http://maxdesign.com.au/jobs/sample-fixed-thead/index.htm

[xyzdata]

scroll fixed header

[xyzdata]

https://codepen.io/xgqfrms-gildata/pen/zjdzap

http://imaputz.com/cssStuff/bigFourVersion.html

http://salzerdesign.com/test/fixedTable.html

http://maxdesign.com.au/jobs/sample-fixed-thead/index.htm

https://www.cssscript.com/fix-table-header-column/
https://www.cssscript.com/demo/fix-table-header-column/
https://www.cssscript.com/demo/fix-table-header-column/fixed-table.css
https://www.cssscript.com/demo/fix-table-header-column/fixed-table.js

https://stackoverflow.com/questions/37272331/html-table-with-fixed-header-and-footer-and-scrollable-body-without-fixed-widths

https://codepen.io/xgqfrms-gildata/pen/ELvwvV

click & get Row datas

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS: fixed table header</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            overflow: auto;
        }
        
        thead {
            display: block;
            width: 100%;
            overflow: auto;
            color: #fff;
            background: #000;
            max-width: 500px;
        }
        
        tbody {
            display: block;
            width: 100%;
            height: 200px;
            background: pink;
            overflow: auto;
            max-width: 500px;
        }
        
        th,
        td {
            padding: .5em 1em;
            text-align: left;
            vertical-align: top;
        }
        
        th:nth-of-type(n + 1),
        td:nth-of-type(n + 1) {
            border-left: 1px solid #fff;
        }
        
        tr:nth-of-type(n + 1) {
            border-bottom: 1px solid #fff;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background: rgb(247, 3, 44);
        }
        
        th:nth-of-type(1),
        td:nth-of-type(1) {
            width: 200px;
            min-width: 200px;
        }
        
        th:nth-last-of-type(1),
        td:nth-last-of-type(1) {
            width: 400px;
            min-width: 200px;
        }
        
        .col {
            width: 300px;
        }
    </style>
</head>

<body>
    <section>
        <table>
            <colgroup>
                <col class="col">
                <col class="col">
            </colgroup>
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                </tr>
            </thead>
        </table>
    </section>
    <section>
        <table>
            <colgroup>
                <col class="col">
                <col class="col">
            </colgroup>
            <tbody>
                <tr>
                    <td>Cell 1, Row 1</td>
                    <td>Cell 2, Row 1</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 2</td>
                    <td>Cell 2, Row 2</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 3</td>
                    <td>Cell 2, Row 3</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 4</td>
                    <td>Cell 2, Row 4</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 5</td>
                    <td>Cell 2, Row 5</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 6</td>
                    <td>Cell 2, Row 6</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 7</td>
                    <td>Cell 2, Row 7</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 8</td>
                    <td>Cell 2, Row 8</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 9</td>
                    <td>Cell 2, Row 9</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 10</td>
                    <td>Cell 2, Row 10</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 11</td>
                    <td>Cell 2, Row 11</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 12</td>
                    <td>Cell 2, Row 12</td>
                </tr>
            </tbody>
        </table>
    </section>
    <!-- js -->
    <script>
        let trs = [...document.querySelectorAll(`tbody tr`)];
        trs.forEach((tr) => {
            tr.addEventListener(`click`, (e) => {
                console.log(`e =\n`, e);
                // td / cell
                // console.log(`e.target.innerHTML =\n`, e.target.innerHTML);
                // tr
                // console.log(`e.target.parentNode =\n`, e.target.parentNode);
                // console.log(`e.target.parentNode.children =\n`, e.target.parentNode.children);
                // console.log(`e.target.parentElement.Text =\n`, e.target.parentElement.innerText);
                let tds = [...e.target.parentNode.children],
                    result = [];
                for (let i = 0; i < tds.length; i++) {
                    let value = tds[i].innerText;
                    result.push(value);
                }
                // get Row Datas
                console.log(`result =\n`, result);
                window.ROW = [];
                window.ROW = result;
                return result;
            });
        });
    </script>
</body>

</html>

[xyzdata]

click get table row data

https://codepen.io/webgeeker/pen/odeGpZ

https://codepen.io/xgqfrms-gildata/pen/gzxGGv

[xyzdata]

Date.prototype.format = function (format) {
    /*
     * format="yyyy-MM-dd hh:mm:ss";
     */
    var o = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds()
    };

    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }

    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
};

[xyzdata]

history.back();

[xgqfrms]

openGL

计算机图形学opengl 课件

http://computergraphics.blog.163.com/
http://lixk2014.blog.163.com/

https://whois.aliyun.com/whois/domain/