zoukankan      html  css  js  c++  java
  • Web notes

    HTML/CSS

    contenteditable与placeholder

    <div id='textfield' contenteditable onblur='this.innerHTML = this.textContent'></div>
    
    #textfield:empty::before {
        content: 'placeholder text'
    }
    

    上传文件

    <div class='hidden'>
    	<input id='upload-files' type='file' multiple oninput='upload(this.files); this.value = "";'>
    </div>
    
    .hidden {
        position: fixed;
        top: -999px;
    }
    

    input元素change事件与input事件

    change: 失去焦点并且值改变才触发.
    input: 立即触发.

    在web应用程序中使用文件 - MDN

    JavaScript

    批量插入DOM元素

    let fragment = document.createDocumentFragment();
    ...
    fragment.appendChild(...);
    ...
    document.body.appendChild(fragment);
    

    Uint8Array与hex字符串的互转

    function u8a2hex(u8a) {
        return [].map.call(u8a, b => b.toString(16).padStart(2, '0')).join('');
    }
    
    function hex2u8a(hex) {
        return new Uint8Array(hex.match(/[da-f]{2}/gi).map(h => parseInt(h, 16)));
    }
    

    下载文本

    function download(text, name) {
        var a = document.createElement('a');
        var e = document.createEvent('MouseEvents');
        e.initEvent('click', false, false);
        a.download = name;
        var blob = new Blob([text]);
        a.href = URL.createObjectURL(blob);
        a.dispatchEvent(e);
    }
    

    fetch提交表单

    let form = new FormData();
    form.append('path', path);
    form.append('files[]', file);
    
    fetch('upload.php', {
        method: 'POST',
        body: form
    });
    

    将js对象转为URL

    // 调用urlEncode(obj)
    function urlEncode(obj, key) {
        var type = typeof obj;
        if (type === 'string' || type === 'number' || type === 'boolean') {
            return key+'='+encodeURIComponent(obj)+'&';
        } else {
            var ret = '';
            for (var i in obj) {
                var k = key == null ? i : obj instanceof Array ? key+'%5B'+i+'%5D' : key+'.'+i;
                ret += urlEncode(obj[i], k);
            }
            return key == null ? ret.slice(0, -1) : ret;
        }
    }
    

    iframe与父页面通信

    // 父页面调用iframe函数
    iframeId.contentWindow.foo();
    // iframe调用父页面函数
    window.parent.foo();
    

    检查一个DOM元素是否取得焦点

    dom === document.activeElement // dom is the target element
    

    PHP

  • 相关阅读:
    修改ubuntu14.04命令行启动
    python 配置文件读写
    platform模块
    PowerDesigner简单使用记录
    python中的pika模块
    RSync实现文件备份同步
    Tornado web 框架
    psutil模块
    .sort与sorted的区别
    Python __len__()、__reversed__()、__contains__()
  • 原文地址:https://www.cnblogs.com/maoruimas/p/13618870.html
Copyright © 2011-2022 走看看