Start: 2月 2019

2019年2月26日星期二

拖曳一個小方塊.......不錯用

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <script src="./js_lib/jquery-3.3.1.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            position: relative;
        }

        div.container_1 {
            height: 1000px;
            background-color: #ffc;
            position: relative;
        }

        #moveEvent {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: 1px dashed;
            z-index: 99999;
            display: none;
            user-select: none;
            opacity: 0;
        }

        #box_1 {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 100px;
            z-index: 100;
            background-color: #00F;
            user-select: none;
        }
    </style>
</head>

<body>
    <div id="moveEvent">
        
    </div>
    <div class="container_1">
        <p id="box_1">
            box
        </p>
    </div>
    <script>

        // screen 與 #box_1 的座標差
        let topOffset;
        let leftOffset;
        let callback;

        $('#box_1').on('mousedown', function (e) {
            console.dir(e);

            let { left, top } = $(this).position();

            topOffset = top - e.screenY;
            leftOffset = left - e.screenX;
            //-----------------------
            callback = (function (leftOffset, topOffset, x, y) {
                let left = x + leftOffset;
                let top = y + topOffset;

                $('#box_1').css({
                    top: top,
                    left: left
                });
            }).bind(this, leftOffset, topOffset);
            //-----------------------
            $('#moveEvent').css('display', 'block');
        });

        $('#moveEvent').on('mousemove', function (e) {
            console.log('offset:(%s, %s)', e.offsetX, e.offsetY);
            console.log('screen(%s, %s)', e.screenX, e.screenY);

            if(callback){
                callback(e.screenX, e.screenY);
            }
        });

        $('#moveEvent').on('mouseup', function () {
            callback = undefined;
            $('#moveEvent').css('display', '');
        });
    </script>
</body>

</html>

2019年2月25日星期一

yahoo serialize

/*
Copyright (c) 2014, Yahoo! Inc. All rights reserved.
Copyrights licensed under the New BSD License.
See the accompanying LICENSE file for terms.
*/

'use strict';

// Generate an internal UID to make the regexp pattern harder to guess.
var UID                 = Math.floor(Math.random() * 0x10000000000).toString(16);
var PLACE_HOLDER_REGEXP = new RegExp('"@__(F|R|D)-' + UID + '-(\\d+)__@"', 'g');

var IS_NATIVE_CODE_REGEXP = /\{\s*\[native code\]\s*\}/g;
var UNSAFE_CHARS_REGEXP   = /[<>\/\u2028\u2029]/g;

// Mapping of unsafe HTML and invalid JavaScript line terminator chars to their
// Unicode char counterparts which are safe to use in JavaScript strings.
var ESCAPED_CHARS = {
    '<'     : '\\u003C',
    '>'     : '\\u003E',
    '/'     : '\\u002F',
    '\u2028': '\\u2028',
    '\u2029': '\\u2029'
};

function escapeUnsafeChars(unsafeChar) {
    return ESCAPED_CHARS[unsafeChar];
}

module.exports = function serialize(obj, options) {
    options || (options = {});

    // Backwards-compatability for `space` as the second argument.
    if (typeof options === 'number' || typeof options === 'string') {
        options = {space: options};
    }

    var functions = [];
    var regexps   = [];
    var dates     = [];

    // Returns placeholders for functions and regexps (identified by index)
    // which are later replaced by their string representation.
    function replacer(key, value) {
        if (!value) {
            return value;
        }

        // If the value is an object w/ a toJSON method, toJSON is called before
        // the replacer runs, so we use this[key] to get the non-toJSONed value.
        var origValue = this[key];
        var type = typeof origValue;

        if (type === 'object') {
            if(origValue instanceof RegExp) {
                return '@__R-' + UID + '-' + (regexps.push(origValue) - 1) + '__@';
            }

            if(origValue instanceof Date) {
                return '@__D-' + UID + '-' + (dates.push(origValue) - 1) + '__@';
            }
        }

        if (type === 'function') {
            return '@__F-' + UID + '-' + (functions.push(origValue) - 1) + '__@';
        }

        return value;
    }

    var str;

    // Creates a JSON string representation of the value.
    // NOTE: Node 0.12 goes into slow mode with extra JSON.stringify() args.
    if (options.isJSON && !options.space) {
        str = JSON.stringify(obj);
    } else {
        str = JSON.stringify(obj, options.isJSON ? null : replacer, options.space);
    }

    // Protects against `JSON.stringify()` returning `undefined`, by serializing
    // to the literal string: "undefined".
    if (typeof str !== 'string') {
        return String(str);
    }

    // Replace unsafe HTML and invalid JavaScript line terminator chars with
    // their safe Unicode char counterpart. This _must_ happen before the
    // regexps and functions are serialized and added back to the string.
    str = str.replace(UNSAFE_CHARS_REGEXP, escapeUnsafeChars);

    if (functions.length === 0 && regexps.length === 0 && dates.length === 0) {
        return str;
    }

    // Replaces all occurrences of function, regexp and date placeholders in the
    // JSON string with their string representations. If the original value can
    // not be found, then `undefined` is used.
    return str.replace(PLACE_HOLDER_REGEXP, function (match, type, valueIndex) {
        if (type === 'D') {
            return "new Date(\"" + dates[valueIndex].toISOString() + "\")";
        }

        if (type === 'R') {
            return regexps[valueIndex].toString();
        }

        var fn           = functions[valueIndex];
        var serializedFn = fn.toString();

        if (IS_NATIVE_CODE_REGEXP.test(serializedFn)) {
            throw new TypeError('Serializing native function: ' + fn.name);
        }

        return serializedFn;
    });
}

2019年2月13日星期三

java swing 刊誤

p525>>

import java.awt.event.*;
import java.awt.Window;

public class BasicWindowMonitor extends WindowAdapter {

  public void windowClosing(WindowEvent e) {
    Window w = e.getWindow();
    w.setVisible(false);
    w.dispose();
    System.exit(0);
  }
}

2019年2月9日星期六

node.js 路徑

// 專案目錄位置
const root = fs.realpathSync('./');

require(`${root}/node_modules/..........`);

批配套嵌的 script 標籤

// 否定式前向搜索
target = '<script><script>555</script></script>'
reg = <script>(?!.*<script>).*?</script>

2019年2月3日星期日

java 取得物件資訊

static void getClassInfo(Object o) {
        Class c = o.getClass();

        // 取得套件代表物件
        Package p = c.getPackage();

        out.printf("package %s;%n", p.getName());

        // 取得型態修飾，像是public、final
        int m = c.getModifiers();

        out.print(Modifier.toString(m) + " ");
        // 如果是介面
        if (Modifier.isInterface(m)) {
            out.print("interface ");
        } else {
            out.print("class ");
        }

        out.println(c.getName() + " {");
        //-----------------------
        // 取得宣告的資料成員代表物件
        Field[] fields = c.getDeclaredFields();
        for (Field field : fields) {
            // 顯示權限修飾，像是public、protected、private
            out.print("\t"
                    + Modifier.toString(field.getModifiers()));
            // 顯示型態名稱
            out.print(" "
                    + field.getType().getName() + " ");
            // 顯示資料成員名稱
            out.println(field.getName() + ";");
        }

        out.println("----------------------");
        //-----------------------
        Method[] methods = c.getDeclaredMethods();
        for (Method method : methods) {
            // 顯示權限修飾，像是public、protected、private
            out.print("\t"
                    + Modifier.toString(
                            method.getModifiers()));
            // 顯示返回值型態名稱
            out.print(" "
                    + method.getReturnType().getName() + " ");
            // 顯示方法名稱
            out.println(method.getName() + "();");
        }
        out.println("}");
    }

java 教學

https://github.com/JustinSDK/JavaSE6Tutorial

2019年2月2日星期六

tkinter 教學

https://www.programcreek.com/python/example/4300/Tkinter.Scrollbar

http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/index.html

http://effbot.org/tkinterbook/

https://www.tutorialspoint.com/python/python_gui_programming.htm

操控點位移(不錯的版本)

<pre>
<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style media="screen">
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .main_container{
            width: 400px;
            height:300px;
            background-color: #FCC;
            position: relative;
        }

        .symbol {
            width: 100%;
            height: 100%;
        }

        .operator{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        p.box{
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            background-color: #666;
        }
    </style>
    <script src="./js_lib/jquery-3.3.1.min.js" charset="utf-8"></script>

</head>

<body>
    <div>
        <button type="button" onclick=t_1()>go</button>
    </div>
    <div class="main_container">
        <div id="symbol" class="symbol">

        </div>
        <div id="operator" class="operator">
            <p class="box" id="box_1"></p>

        </div>

    </div>
    <script>
        function V(){
            this.symbol;
            this.operator;
            this.box;

            this.box_click_left;
            this.box_click_top;

            this.__construct();
        };

        (function(){
            this.__construct = function(){
                debugger;
                this.symbol = document.querySelector('#symbol');
                this.operator = document.querySelector('#operator');
                this.box = document.querySelector('#box_1');

                $(this.box).on('mousedown', (function(e){
                    this.event_1(e);
                }).bind(this));

                $(this.operator).on('mouseup', (function(e){
                    this.event_2(e);
                }).bind(this));

            };
            //----------------------------
            this.event_1 = function(e){
                // debugger;

                this.box_click_left = e.offsetX;
                this.box_click_top = e.offsetY;

                $(this.box).appendTo(this.symbol);

                $(this.operator).on('mousemove', (function(e){
                    this.event_3(e);
                }).bind(this));
            };
            //----------------------------
            this.event_2 = function(e){
                $(this.operator).off('mousemove');
                $(this.box).appendTo(this.operator);
            };
            //----------------------------

            this.event_3 = function(e){

                console.log('(%s, %s)', e.offsetX, e.offsetY);

                let x= e.offsetX - this.box_click_left;
                let y = e.offsetY - this.box_click_top;

                $(this.box).css({
                    left: x,
                    top: y
                });

            };
        }).call(V.prototype);

        new V();
    </script>
</body>

</html>
</pre>

訂閱：文章 (Atom)

2019年2月26日 星期二

2019年2月25日 星期一

2019年2月13日 星期三

2019年2月9日 星期六

2019年2月3日 星期日

2019年2月2日 星期六