SZ 博客

前端笔记

发表于 2017-12-28 更新于 2020-01-14 分类于学习，笔记阅读次数：

多余字符隐藏并显示省略号

效果

代码

td {
    text-align: center;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

阅读全文 »

运算符

按位与(&)

1&3 = 1 // 0001 & 0011 = 0001

按位或(|)

9|3=11 // 1001 & 0011 = 1011

按位异或(^)

9^3 = 10 // 1001 & 0011 == 1010

按位非(~)

1; // 二进制 00000000000000000000000000000001

~1 = 111111111111111111111111111110

有符号左移(<<)

1 << 1 = 2 // 00000000000000000000000000000001<<1 = 00000000000000000000000000000010

-1 << 1 = - 2 // 111111111111111111111111111111 << 1 = 111111111111111111111111111110

有符号右移(>>)

1 >> 1 = 0 // 00000000000000000000000000000001 >>1 = 00000000000000000000000000000000

-2>>1 = -1 //111111111111111111111111111110 >> 1 = 111111111111111111111111111111

-1>>1 = -1 // 111111111111111111111111111110 >> 1 = 111111111111111111111111111111

阅读全文 »

svgRingButton(简单的模块封装)

发表于 2017-12-20 更新于 2017-12-21 分类于 JavaScript 阅读次数：

因为目前工作相对紧张且有相对较为复杂的算法在啃（关于D3力学图向3维引申的算法问题，在时间复杂度优化上遇到了些困难，D3本身的四叉树封装相对于常见的四叉树更为个性化、在向八叉树引申时遇到了困难），进展不是十分顺利。同时圈子里搞程序的工程师在svg的环状按钮组上尝试了很久，并且在自己的找工作的面试过程中也经常被问到一些关于模块封装的问题。在大问题进展不顺利的情境下，这里尝试实现一个简单的svg环状按钮组模块。

阅读全文 »

JS自定义事件

发表于 2017-12-04 更新于 2017-12-19 分类于 JavaScript 阅读次数：

(function () {
    this.count = 0;
    this.eventList = {};
    this.on = function (type, listener) {
        if (typeof this.eventList[type] == "undefined") {
            this.eventList[type] = listener;
        }
    };
    setInterval(function () {
        if (this.count == 100) {
            if(this.eventList.end instanceof Function){
                this.eventList.end();                            
            }
            this.count = 0;
        } else if (this.count == 0) {
            if(this.eventList.start instanceof Function){
                this.eventList.start();                            
            }
            this.count++;
        } else {
            if(this.eventList.tick instanceof Function){
                this.eventList.tick();                            
            }
            this.count++;
        }
    }.bind(this), 50)
    t = this;
})()

t.on("start", function () {
    document.getElementById('states').innerHTML = 'start';
    document.getElementById('value').innerHTML = t.count;
})
t.on("tick", function () {
    document.getElementById('states').innerHTML = 'tick';
    document.getElementById('value').innerHTML = t.count; 
})
t.on("end", function () {
    document.getElementById('states').innerHTML = 'end';
    document.getElementById('value').innerHTML = t.count;    
})