评论 - lizhenqiu blog

#²¹¹⁰

作者：广西南宁市

js一些常用方法的封装

//----------------------------解决兼容性方法------------------------------------------------------------
//获取元素的计算后样式属性

function getStyle(element, attr) {
    if(element.currentStyle) {
        return element.currentStyle[attr];
    } else {
        return window.getComputedStyle(element, null)[attr];
    }
}


//scroll().top or scroll().left获取已经滚动到元素的左边界或上边界的像素数

function scroll() {
    return {
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
    };
}

//获取可视窗口大小

function client() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    };
}

//event兼容

var eventCompatible = {
    //event兼容
    getEvent: function(event) {
        return event || window.event;
    },

    //阻止冒泡事件
    stopPropagation: function(event) {
        var event = event || window.event;
        if(event && event.stopPropagation) {
            return event.stopPropagation();
        } else {
            return event.cancelBubble = true;
        }
    },

    //event.target 事件的目标 (事件委托)
    getTarget: function(event) {
        var event = event || window.event;
        return event.target ? event.target : event.srcElement;
    },

    //鼠标页面坐标
    page: function(event) {
        var event = event || window.event;
        return {
            x: event.pageX || event.clientX + document.documentElement.scrollLeft,
            y: event.pageY || event.clientY + document.documentElement.scrollTop
        };
    },

    //阻止默认行为
    prevent: function(event){
        var event = event || window.event;
        if (event.preventDefault) {
            return event.preventDefault();
        }else{
            return event.returnValue = false;
        }
    }
};


//监听事件兼容处理

function eventListener(obj, type, handler, unbind) {
    if(unbind === true) {
        if(obj.removeEventListener) {
            obj.removeEventListener(type, handler);
        } else {
            obj.detachEvent("on" + type, handler);
        };
    } else {
        if(obj.addEventListener) {
            obj.addEventListener(type, handler);
        } else {
            obj.attachEvent("on" + type, handler);
        };
    };
};


//清除选择

function clearSelection() {
    return window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}


//---------------------------------------------------------------------------------------
//-----------------------自定义的方法------------------------------------------------

// trim

function trim(str) {
    return str.replace(/^\s+|\s+$/g, "");
}


//十进制转其他进制 type类型有"bit"、"oct"、"hex"

function changeFromDec(type, value) {
    var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]    var scale = 0;
    var sys = "";
    if(!/^[\d]*$/g.test(value)) {
        return "";
    }
    if(!value) {
        return "";
    }
    if(type === "bit") {
        scale = 2;
    } else if(type === "oct") {
        scale = 8;
    } else if(type === "hex") {
        scale = 16;
        while(true) {
            sys = arr[value % 16] + sys;
            value = parseInt(value / 16);
            if(!value) {
                break;
            }
        }
        return sys;
    }
    while(true) {
        sys = value % scale + sys;
        value = parseInt(value / scale);
        if(!value) {
            break;
        }
    }
    return sys;
}


//二进制、八进制、十六进制转十进制;


function toDec(type, value) {
    if(typeof value === "number") value += "";
    var scale = 0;
    var flag = false;
    if(type === "bit") {
        flag = /^[01]*$/g.test(value);
        scale = 2;
    } else if(type === "oct") {
        flag = /^[0-7]*$/g.test(value)
        scale = 8;
    } else if(type === "hex") {
        flag = /^[0-9a-fA-F]*$/g.test(value)
        scale = 16;
    }
    if(!flag || !value) return;
    var arr = value.split("");
    var dec = 0;
    for(var i = 0; i < arr.length; i++) {
        if(isNaN(parseInt(arr[i]))) {
            var charCode = arr[i].charCodeAt(0);
            if(charCode > 64 && charCode < 71) {
                dec += (charCode - 55) * Math.pow(scale, arr.length - 1 - i)
            } else if(charCode > 96 && charCode < 103) {
                dec += (charCode - 87) * Math.pow(scale, arr.length - 1 - i)
            }
        } else {
            dec += arr[i] * Math.pow(scale, arr.length - 1 - i);
        }
    }
    return dec;
}


//转动时钟

function clock() {
    var d = new Date();
    var ms = d.getMilliseconds();
    var s = d.getSeconds() + ms / 1000;
    var m = d.getMinutes() + s / 60;
    var h = d.getHours() + m / 60;
    second.style.transform = "rotate(" + s * 6 + "deg)";
    minute.style.transform = "rotate(" + m * 6 + "deg)";
    hour.style.transform = "rotate(" + h * 30 + "deg)";
}


//匀速动画

function animate(obj, attr, distance) {
    var step = 20;
    var leader = parseInt(getStyle(obj, attr)) || 0
    clearInterval(obj.atimer);
    obj.atimer = setInterval(function() {
        distance > leader ? leader += step : leader -= step;
        if(Math.abs(distance - leader) > step) {
            obj.style[attr] = leader + "px";
        } else {
            obj.style[attr] = distance + "px";
            clearInterval(obj.atimer);
        }
    }, 15);
}


//缓动动画(单个数值属性)

function slowSpeedAnimate(element, attr, distance) {
    clearInterval(element.timer);
    element.timer = setInterval(function() {
        var removing = parseInt(getStyle(element, attr)) || 0; //element.offsetLeft;
        var step = (distance - removing) / 20;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        removing = removing + step;
        element.style[attr] = removing + "px";
        if(removing == distance) {
            clearInterval(element.timer);
        }
    }, 15)
}


//缓动动画(多个数值属性)

function moreAnimate(element, json, interval, fn) {
    clearInterval(element.timer);
    element.timer = setInterval(function() {
        var flag = true;
        for(var k in json) {
            if(k === "opacity") {
                var removing = getStyle(element, k) * 100; //element.offsetLeft;
                var distance = json[k] * 100;
                var step = (distance - removing) / interval;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                removing = removing + step;
                element.style[k] = removing / 100;
            } else {
                var removing = parseInt(getStyle(element, k)) || 0; //element.offsetLeft;
                var distance = json[k];
                var step = (distance - removing) / interval;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                removing = removing + step;
                element.style[k] = removing + "px";
            }
            if(removing != distance) {
                flag = false;
            }
        }
        if(flag) {
            clearInterval(element.timer);
            if(fn) {
                fn();
            }
        }

    }, 15)
}


//进度条

function Progress(id, width, height, outClass, inClass) {
    this.width = width;
    this.height = height;
    this.color = "#fff";
    this.progress = document.createElement("div");
    this.percentage = document.createElement("div");
    this.filler = document.createElement("div");
    var element = document.getElementById(id);
    if(width) {
        this.progress.style.width = this.width + "px";
    } else {
        this.progress.style.width = "200px";
    }
    if(height) {
        this.progress.style.height = this.height + "px";
    } else {
        this.progress.style.height = "20px";
    }
    if(typeof outClass === "string" && (/^[a-zA-Z](\w|[-])+$/g.test(outClass))) {
        this.progress.className = outClass;
    } else {
        this.progress.style.border = "1px solid #cccccc";
        this.progress.style.backgroundImage = "linear-gradient(to bottom, #ccc 0%, #fff 40%, #ccc 100%)";
        this.progress.style.borderRadius = "10px";
    }
    this.progress.style.overflow = "hidden";
    this.progress.style.position = "relative";
    element.appendChild(this.progress);
    //
    this.progress.appendChild(this.percentage);
    this.percentage.style.width = "100%";
    this.percentage.style.height = "100%";
    this.percentage.style.textAlign = "center";
    this.percentage.style.position = "absolute";
    this.percentage.innerHTML = "0%";
    //
    this.progress.appendChild(this.filler);
    this.filler.style.height = "100%";
    this.filler.style.width = 0;
    if(typeof inClass === "string" && (/^[a-zA-Z](\w|[-])+$/g.test(inClass))) {
        this.filler.className = inClass;
    } else {
        this.filler.style.backgroundColor = "#DC7BBE";
        this.filler.style.backgroundImage = "linear-gradient(to bottom, #0AF 0%, #0ff 40%, #0AF 100%)";
    }
}
Progress.prototype.fill = function(value) {
    if(value) {
        this.percentage.innerHTML = value + "%";
        this.percentage.style.color = this.color;
        value = (this.progress.offsetWidth - 2) / 100 * value;
        this.filler.style.width = value + "px";
    } else {
        this.filler.style.width = 0;
        this.percentage.innerHTML = "0%";
    }
}


//ajax封装

function ajax(a, b) { //type, url, async, dataType, data, fn
    var xhr = null,
        type = "get",
        url = "#",
        async = true,
        dataType = "text",
        data = "",
        jsonp = "",
        jsonpCallback = "",
        methodName = "",
        c = null;
    if(typeof a === "string") {
        url = a;
    }
    if(typeof a === "object") {
        c = a;
    } else if(typeof b == "object") {
        c = b;
    }
    if(c) {
        if(c.type && typeof c.type === "string") {
            type = c.type;
        };
        if(c.url && typeof c.url === "string") {
            url = c.url;
        };
        if(c.async && typeof c.async === "boolean") {
            async = c.async;
        };
        if(c.dataType && typeof c.dataType === "string") {
            dataType = c.dataType;
        };
        if(c.data && typeof c.data === "object") {
            var arr = [];
            for(k in c.data) {
                arr.push(k + "=" + c.data[k]);
            }
            data = arr.join("&");
        };
        if(c.jsonp && typeof c.jsonp === "string") {
            if(!c.dataType) {
                dataType = "jsonp";
            }
            jsonp = c.jsonp;
            if(data) {
                data += "&";
            }
        } else {
            jsonp = "callback";
        }
        if(c.jsonpCallback && typeof c.jsonpCallback === "string") {
            methodName = c.jsonpCallback;
        } else {
            methodName = "jquery" + new Date().getTime() + "_" + (Math.random() + "").substr(2);
        }
    };
    if(dataType == "jsonp") {
        data += jsonp + "=" + methodName;
        window[methodName] = function(data) {
            c.success(data);
        }
        var script = document.createElement("script");
        script.src = url + "?" + data;
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(script);
    } else {
        //ajax部分
        if(window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = ActiveXObject("Microsoft.XMLHTTP");
        }
        if(type == "get") {
            if(data) {
                url += encodeURI("?" + data);
            }
            data = null;
        };
        xhr.open(type, url, async);
        if(type == "post") {
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        };
        xhr.send(data);
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                var obj = {
                    text: xhr.responseText,
                    json: JSON.parse(xhr.responseText),
                };
                var data = obj[dataType];
                if(typeof c.success === "function") {
                    c.success(data);
                }
            }
        }
    }
}


//millisec是距离 GMT 时间 1970 年 1 月 1 日午夜的毫秒数 (解析通过ajax返回的数据中的毫秒数值的日期)

function getFullDate(millisec, lang) {
    var data = new Date();
    data.setTime(millisec);
    var year = data.getFullYear(),
        month = data.getMonth(),
        day = data.getDate(),
        week = data.getDay(),
        hour = data.getHours(),
        minute = data.getMinutes(),
        second = data.getSeconds(),
        am = "am",
        pm = "pm",
        enWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
        cnWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        enMonth = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        cnMonth = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        cnDay = ["廿", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"]    if(lang == "cn") {
        am = "上午";
        pm = "下午";
    };
    day = day < 10 ? "0" + day : day;
    var obj = {
        year: year,
        month: lang ? (lang == "cn" ? cnMonth[month] : enMonth[month]) : (month < 10 ? "0" + (month + 1) : (month + 1)),
        day: day,
        week: lang == "en" ? enWeek[week] : cnWeek[week],
        hour: hour < 10 ? "0" + hour : hour,
        minute: minute < 10 ? "0" + minute : minute,
        second: second < 10 ? "0" + second : second,
        ms: data.getMilliseconds(),
        am: am,
        pm: pm,
        Hour: hour + minute / 60 > 12 ? (hour == 12 ? pm + hour : pm + hour % 12) : am + hour,
    };
    return obj;
}


//右键菜单

function RightMenu(area) {
    this.area = area;
    this.menu = null;
}

//根据传入的值获取目标
RightMenu.prototype.target = function(area) {
    if(typeof area === "string") {
        return document.getElementById(area);
    } else if(typeof area === "object") {
        return area;
    }
}

RightMenu.prototype.init = function(data, defaultStyle, userStyle, hoverStyle) {
    this.createMenu(data, defaultStyle, userStyle, hoverStyle);
    this.showMenu();
}

RightMenu.prototype.createMenu = function(data, defaultStyle, userStyle, hoverStyle) {
    if(typeof defaultStyle == "string" && !defaultStyle) {
        hoverStyle = userStyle;
        userStyle = defaultStyle;
        defaultStyle = true;
    }
    //创建菜单及样式
    this.menu = document.createElement("ul");
    this.menu.style.position = "absolute";
    this.menu.style.margin = 0;
    this.menu.style.padding = "2px";
    this.menu.style.listStyle = "none";
    this.menu.style.display = "none";
    if(!defaultStyle) {
        this.menu.style.border = "1px solid #DDDDDD";
        this.menu.style.backgroundColor = "#CCCCCC";
        this.menu.style.boxShadow = "5px 5px 5px #ccc";
    } else {
        this.menu.className = userStyle;
    }
    //选中项样式
    var hover = document.createElement("span");
    hover.style.display = "block";
    hover.style.position = "absolute"
    hover.style.top = 0;
    hover.style.left = 0;
    hover.style.boxSizing = "border-box";
    hover.style.width = "100%";
    hover.style.height = "100%";
    if((!defaultStyle) || (defaultStyle && !hoverStyle)) {
        hover.style.border = "1px solid #aaa";
        hover.style.borderRadius = "5px";
        hover.style.backgroundImage = "linear-gradient(to bottom,rgba(255,255,255,0.5)0%,rgba(255,255,255,0.1)50%,rgba(255,255,255,0.1)100%)";

    } else {
        hover.className = hoverStyle;
    }
    //创建菜单项
    for(var item in data) {
        var li = document.createElement("li");
        li.style.position = "relative";
        li.style.padding = "5px 10px";
        li.style.cursor = "pointer";
        //绑定事件
        li.addEventListener("mouseenter", function() {
            this.appendChild(hover);
        });
        li.addEventListener("mouseleave", function() {
            this.removeChild(hover);
        });
        var itemData = data[item]        for(var obj in itemData) {
            if(typeof itemData[obj] === "string") {
                li.innerHTML = itemData[obj];
            } else if(typeof itemData[obj] === "object") {
                var handlerData = itemData[obj];
                for(var type in handlerData) {
                    li.addEventListener(type, handlerData[type]);
                }
            }
        }
        this.menu.appendChild(li);
    }
    this.target(this.area).appendChild(this.menu);
}

RightMenu.prototype.showMenu = function() {
    var that = this;
    this.menu.parentNode.oncontextmenu = function(ev) {
        that.menu.style.display = "block";
        that.menu.style.left = ev.pageX + "px";
        that.menu.style.top = ev.pageY + "px";
        if(that.menu.parentNode.offsetWidth < that.menu.offsetLeft + that.menu.offsetWidth) {
            that.menu.style.left = ev.pageX - that.menu.offsetWidth + "px";
        };
        if(that.menu.parentNode.offsetHeight < that.menu.offsetTop + that.menu.offsetHeight) {
            that.menu.style.top = ev.pageY - that.menu.offsetHeight + "px";
        };
        return false;
    }
    this.menu.parentNode.onclick = function() {
        that.menu.style.display = "none";
    }
    document.onkeydown = function(e) {
        if(e.keyCode == 18 || e.keyCode == 27) {
            that.menu.style.display = "none";
        }
    }
}


//拖拽

function Drag(target, area) {
                this.target = target;
                this.area = area;
            }

            //根据传入的值获取目标
            Drag.prototype.dragTarget = function(target) {
                if(typeof target === "string") {
                    return document.getElementById(target);
                } else if(typeof target === "object") {
                    return target;
                }
            }

            Drag.prototype.init = function() {
                this.target = this.dragTarget(this.target);
                this.target.style.position = "absolute";
                this.target.setAttribute("draggable","true");
                this.dragEvent();
            }

            Drag.prototype.dragEvent = function() {
                var that = this;
                this.target.onmousedown = function(e) {
                    e = e || window.event;
                    that.disX = e.clientX - that.target.offsetLeft;
                    that.disY = e.clientY - that.target.offsetTop;
                    document.onmousemove = function(e) {
                        that.moveEvent(e);
                    }
                    document.onmouseup = function(){
                        that.target.style.opacity = "1";
                        document.onmousemove = document.onmouseup = null;
                    }
                    return false;
                }
            }
            Drag.prototype.moveEvent = function(e) {
                var limitX = e.clientX - this.disX;
                var limitY = e.clientY - this.disY;
                //没有指定区域则用document

                if (!this.area) {
                    this.area = document.documentElement;
                }
                if(limitX < this.area.offsetLeft) {
                    limitX = this.area.offsetLeft;
                } else if(limitX > this.area.clientWidth + this.area.offsetLeft - this.target.offsetWidth) {
                    limitX =  this.area.clientWidth + this.area.offsetLeft - this.target.offsetWidth;
                }
                if(limitY < this.area.offsetTop) {
                    limitY = this.area.offsetTop;
                } else if(limitY > this.area.clientHeight + this.area.offsetTop - this.target.offsetHeight) {
                    limitY = this.area.clientHeight + this.area.offsetTop - this.target.offsetHeight;
                }
                this.target.style.left = limitX + "px";
                this.target.style.top = limitY + "px";
                this.target.style.opacity = "0.8";
            }

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2016-10-11, 18:00:45

展开↯

#²¹¹¹

作者：广西南宁市

房产中介所负责的，不是一套房子，而是客户的整个人生

文章：他不是脾气暴躁，只是不能被打扰发表时间：2016-10-11, 16:04:31

展开↯

#²¹¹²

作者：广西南宁市

别人买iPhone4时我买了洗衣机，
别人买iPhone4s时我买了冰箱，
别人买iPhone5的时候我买了空调，
别人买iPhone5s的时候我买了电脑，
别人买iPhone6的时候我买了电视，
别人买iPhone6s的时候我买了沙发，
别人买iPhone7的时候我买了note7，
现在，我的洗衣机冰箱空调电脑电视沙发全都没了。

文章：他不是脾气暴躁，只是不能被打扰发表时间：2016-10-11, 15:27:11

展开↯

#²¹¹³

作者：广西南宁市

更正：

Public i As Long
Public j As Long

VB中Integer（整型）和Long（长整型）有什么区别?

Integer 数据类型

Integer 变量存储为 16位（2 个字节）的数值形式，其范围为 -32,768 到 32,767 之间。Integer 的类型声明字符是百分比符号 (%)。

Long 数据类型

Long（长整型）变量存储为 32 位（4 个字节）有符号的数值形式，其范围从 -2,147,483,648 到 2,147,483,647。Long 的类型声明字符为和号 (&)。

文章：VB简洁时间显示窗口最前端实例代码发表时间：2016-10-11, 11:44:52

展开↯

#²¹¹⁴

作者：北京市

黑客针对苹果Touch ID的破解就曾进行过一次典型的成功募资。苹果在iPhone 5s上推出的指纹身份辨识感应器Touch ID，是苹果花了好几年时间、数百万美元，开发出来的专利生物辨识科技，号称是“方便且极度安全的手机使用方式”。

伴随着Touch ID功能的发布，全世界的安全专家和骇客都蠢蠢欲动，大家都很想知道，究竟会是谁、又需要花多少时间，第一个破解这套“极度安全”的系统？于是，骇客同时用上了群众募资和游戏化两个元素，先筹建一个名为“Touch ID被破解了吗”的网站，由所有骇客捐款提供2万美元奖金，并设有排行榜显示距离2万美元募资目标还有多远。

到最后，大奖落到了混沌电脑俱乐部代号为“Starbug”的骇客手中。他巧妙地想出：在手机真正的主人使用手机，在荧幕上留下指纹之后，Starbug就将指纹照成一张2400dpi的调解析度相片，输入Photoshop，清掉杂讯，黑白反相，再打印到描图纸上。经过蚀刻得到指纹后涂上白膠，在白膠干燥后，按到Touch ID感应器，就能为手机解锁。

文章：Google方程式 WWWDOT – GOOGLE = DOTCOM 发表时间：2016-10-11, 01:12:09

展开↯

#²¹¹⁵

作者：广西南宁市

茕茕孑立踽踽独行

文章：成功的故事只能倒叙着讲发表时间：2016-10-10, 17:59:49

展开↯

#²¹¹⁶

作者：广西南宁市

莎翁笔下的约翰王曾指着他为之奋斗的宝座说，“我和我的悲哀都在这里”！出行企业的野心和无奈总比倒腾学区房的上市公司要值得尊敬的多。

文章：成功的故事只能倒叙着讲发表时间：2016-10-09, 14:20:37

展开↯

#²¹¹⁷

作者：广西南宁市

【74由几个1几个5几个10几个20组成】

var num = 74;
    for(one = 0; one <= num; one++){
        for(five = 0; five <= num/5 ; five++){
            for(ten = 0; ten <= num/5 ; ten++){
                for(twenty = 0; twenty <= num/20; twenty++){
                    if(one + five*5 + ten*10 + twenty*20 == num){
                        console.log(one + "个1，" + five + "个5，" + ten +"个10，" + twenty + "个20组成。");
                    }
                }
            }
        }
    }

Run code

Cut to clipboard

文章：Google方程式 WWWDOT – GOOGLE = DOTCOM 发表时间：2016-10-08, 17:16:37

展开↯

#²¹¹⁸

作者：广西南宁市

纯css实现点击特效

怎么用纯css实现和按钮一样的点击一次，然后改变样式？听说是用伪元素target，不过我不知道怎么操作

visited的方法前面的小伙伴已经讲了；那我还是帮你搞懂伪元素 target 的用法吧。学东西毕竟得踏踏实实，搞懂想要的再去学新的。:target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。

Run code

Cut to clipboard

CSS里的:target伪选择器
:target是CSS里一个非常有趣的伪选择器。它在CSS里发生效力的过程是这样的：当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。让我们看一看这个:target伪选择器是如何起作用的：
观看演示
HTML代码

下面的两个HTML元素上我们都指定了ID：

<h2 id="section1">Section 1</h2>

<h2 id="section2">Section 2</h2>

Run code

Cut to clipboard

注意上面元素的ID值，当:target指定的ID和window.location.hash值一致时，伪选择器的样式将会生效。

CSS代码

:target伪选择器可以配合CSS类、网页标记和任何其它CSS选择器使用：

/* would apply to all targetted elements */
:target {
	color: #000;
}

/* applies to H2's */
h2:target {
	color: #f00;
}

Run code

Cut to clipboard

当window.location.hash是”section2″时，ID为”section2″的元素将会变红，并显示下划线。简单吧！很像使用了CSS动画技术，你甚至可以在这种效果上做出动画。

:target非常有趣，但我们还没有发现多少人使用这种技术。其实，如果不是太注重动态效果，使用这种浏览器原生技术来修饰你的应用是不错的选择。

文章：常用html、demo代码发表时间：2016-10-08, 09:48:17

展开↯

#²¹¹⁹

作者：广西南宁市

纯css3自适滑动选项卡
用input标签实现css3点击

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
html,
body { height: 100%; position: relative; overflow: hidden; margin: 0; }
div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.4s ease; transform: translateX(-100%); }
div:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5vw; font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #fdfdfd; letter-spacing: 4px; }
div:nth-of-type(1) { background-color: #1abc9c; }
div:nth-of-type(1):after { content: "#1abc9c"; }
div:nth-of-type(2) { background-color: #2ecc71; }
div:nth-of-type(2):after { content: "#2ecc71"; }
div:nth-of-type(3) { background-color: #3498db; }
div:nth-of-type(3):after { content: "#3498db"; }
div:nth-of-type(4) { background-color: #e74c3c; }
div:nth-of-type(4):after { content: "#e74c3c"; }
div:nth-of-type(5) { background-color: #34495e; }
div:nth-of-type(5):after { content: "#34495e"; }
div:nth-of-type(6) { background-color: #9b59b6; }
div:nth-of-type(6):after { content: "#9b59b6"; }
div:nth-of-type(7) { background-color: #f1c40f; }
div:nth-of-type(7):after { content: "#f1c40f"; }
div:nth-of-type(8) { background-color: #e67e22; }
div:nth-of-type(8):after { content: "#e67e22"; }
input[type="radio"] { position: absolute; right: 0; width: 25%; height: 20px; outline: 20px solid; outline-offset: -10px; margin: 0; z-index: 1; cursor: pointer; }
input[type="radio"]:nth-of-type(1) { outline-color: #1abc9c; left: 0%; }
input[type="radio"]:nth-of-type(2) { outline-color: #2ecc71; left: 25%; }
input[type="radio"]:nth-of-type(3) { outline-color: #3498db; left: 50%; }
input[type="radio"]:nth-of-type(4) { outline-color: #e74c3c; left: 75%; }
input[type="radio"]:nth-of-type(5) { outline-color: #34495e; left: 0%; bottom: 0px; }
input[type="radio"]:nth-of-type(6) { outline-color: #9b59b6; left: 25%; bottom: 0px; }
input[type="radio"]:nth-of-type(7) { outline-color: #f1c40f; left: 50%; bottom: 0px; }
input[type="radio"]:nth-of-type(8) { outline-color: #e67e22; left: 75%; bottom: 0px; }
input[type="radio"]:checked+ div { transform: translateX(0%); transition: transform 0.4s ease 0.4s; }
</style>
</head>

<body>
<input type="radio" name="name" checked="checked"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2016-10-08, 09:35:10

展开↯

#²¹²⁰

作者：广西南宁市

CSS3实现自定义Checkbox和Radiobox
我们知道浏览器自带的Checkbox复选框不怎么美观（这或许是我们看习惯了的缘故），而且复选框在不同的浏览器上显示的样式又有很大的差异，由于目前越来越多的人开始接受支持CSS3的现代浏览器，所以今天就简单的用一些CSS3代码来自定义Checkbox的显示方式，个人觉得比浏览器自带的Checkbox美观不少。
效果图如下

下面来分析一下源代码，原理很简单，先把页面上<input type="checkbox" />的display设置为none，从而把它隐藏掉，然后利用CSS3代码来绘制与checkbox邻近的label元素：
HTML代码：

<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
        <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
        <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label>
        <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>

Run code

Cut to clipboard

CSS3代码：

.regular-checkbox + label {
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

Run code

Cut to clipboard

下面的CSS代码可以让checkbox选中后出现阴影的效果，主要利用了box-shadow属性：

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

Run code

Cut to clipboard

radiobox的实现也是同样的原理

文章：常用html、demo代码发表时间：2016-10-08, 09:33:37

展开↯

#²¹²¹

作者：广西南宁市

网页设计前端页面制作的规范要求和注意事项
组合命名规则:
[元素类型]-[元素作用/内容] 如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover 点击：click 已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
用户体验方面需要注意的：
1）．每个连接，按钮要做上鼠标hover时的一个变化效果。如果hover时是换一张背景图片，请把这两张图片整合在一张图片中，以防止在hover时，页面还在download变化的那张图片，这样会出现那个按钮无图的间隔；
2）． INPUT有个label，可以让用户在点击字时，光标自动跳入相应input中；

文章：常用html、demo代码发表时间：2016-10-08, 09:24:02

展开↯

#²¹²²

作者：北京市

上联：乡下早晨鸡叫人下联：城里晚上人叫鸡

文章：成功的故事只能倒叙着讲发表时间：2016-10-07, 10:01:40

展开↯

#²¹²³

作者：中国

曾志伟去姚明家，因为姚明家特制的门，门镜高，敲了好几次门都没有人开，以为姚明不在家，就走了。
第二天他看到姚明无精打采的，就问他昨晚干嘛去了。
姚明神秘的说：昨晚我家好像闹鬼了，一直有人敲门，可是从猫眼又看不见人，吓得我一整夜没睡。
误解一般都是因高度不同造成的。所以，以后再被人误解就别再闹心了，因为高度不同，角度不一样，今天你对太多事情不理解，是因为你还没有站到对方的位置。

文章：他不是脾气暴躁，只是不能被打扰发表时间：2016-10-04, 01:41:38

展开↯

#²¹²⁴

作者：中国

公司会上，总经理在黑板上做了这四道题： 2+2=4；4+4=8；8+8=16；9+9=20。员工们纷纷说道:“你算错了一道。” 总经理转过身来，慢慢地说道：“是的，大家看得很清楚，这道题是算错了。可是前面我算对了三道题，为什么没有人夸奖我，而只是看到我算错的一道呢！”做人也是这样，你对他十次好，也许他忘记了，一次不顺心，也许会抹杀所有。这就是100-1=0人性的道理。

文章：他不是脾气暴躁，只是不能被打扰发表时间：2016-10-04, 00:05:47

展开↯

#²¹²⁵

作者：广西南宁市

程序的优化问题
有这样一个问题，有a,b,c,d四个字母，每当刷新页面时会以随机的顺序出现，比如a,d,b,c和b,d,c,a。

我当时的解决方案为：

<script type="text/javascript">
    var str1;
    var str=[];
    var flag1=true;
    var flag2=true;
    var flag3=true;
    var flag4=true;
    do{
        var num=parseInt(Math.round(Math.random()*(4-1))+1);
        if(num==1&&flag1){
            str[str.length]="a";
            flag1=false;
        }else if(num==2&&flag2){
            str[str.length]="b";
            flag2=false;
        }else if(num==3&&flag3){
            str[str.length]="c";
            flag3=false;
        }else if(num==4&&flag4){
            str[str.length]="d";
            flag4=false;
        }
    }while(flag1||flag2||flag3||flag4)
    str1=str[0]+str[1]+str[2]+str[3];
    document.write(str1);
</script>

Run code

Cut to clipboard

不过这样写有着很明显的弊端，那就是下次如果想换一些字母进行输出时，必须将程序进行一次大的更改才能继续进行应用，这样做不利于重复使用
下面这种方法就很好的解决了这个问题，当想再次调用时，只需将数组arr中的值进行更改就可以了

<script type="text/javascript">
    var arr=["a","b","c","d"];
    function changestr(){
        var newArry=[];
        var temp=[];//新创建的两个数组
        for(var p in arr){
            temp[p]=arr[p];//将原本数组中的值复制给重新定义的数组
        }
        for(var i=0;i<arr.length;i++){
            var random=Math.round(Math.random()*(temp.length-1));//产生0~temp数组长度-1的值
            newArry[i]=temp[random];//将temp数组中随机出来的数组值赋给新数组
            temp.splice(random,1);//删除赋给新数组的值，temp数组的长度减一，直到temp中没有值为止
        }
        return newArry
    }
    document.write(Arry=changestr());
</script>

Run code

Cut to clipboard

在我看来，真正好的函数必须做到可重复使用，模块化，和具有良好的封装性。

找了个最精简的写法

function randomsort(a, b) {
return Math.random()>.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
}
var arr = ["a","b","c","d"];
arr.sort(randomsort);
document.write(arr);

Run code

Cut to clipboard

文章：Google方程式 WWWDOT – GOOGLE = DOTCOM 发表时间：2016-09-30, 18:43:01

展开↯

#²¹²⁶

作者：广西南宁市

盒子不同模式下的宽高判断
曾经遇到过这样的问题，设定一个div，当给div设置padding的时候，发现整个div的宽高都发生了变化，这里就产生了一个疑惑，一个盒子的总体宽高到底是怎么去判断的呢？
经过查询得知，盒子宽高的判定模式一共有两种，分别为标准模式和怪异模式。

一般情况下个盒子的宽高在一般情况下等于内容的宽高+边框的宽高+内边距的宽高+外边距的宽高
这就是标准模式下的盒子宽高判定

但在某些时候（ie6,7,8 下DOCTYPE缺失）盒子的宽高等于设定的宽高+外边距的宽高，这里的设定的宽高就等于内容的宽高+内边距的宽高+边框的宽高
这就是怪异模式下的盒子宽高判定

我们可以通过使用box-sizing属性来决定使用哪一种模式，

content-box : 将采用标准模式解析计算 ，
border-box: 将采用怪异模式解析计算

Run code

Cut to clipboard

通过怪异模式我们可以在不改变盒子整体宽高的情况下给其设定padding。

文章：常用html、demo代码发表时间：2016-09-30, 18:40:53

展开↯

#²¹²⁷

作者：广西南宁市

CSS3实现让人有点击欲望的按钮

主要通过css3的动画效果来实现

总结两点重要属性就是：

（1）css3的animation属性，要注意几大内核的兼容

animation:myfirst 1s infinite;

-moz-animation:myfirst 1s infinite; /* Firefox */
-webkit-animation:myfirst 1s infinite; /* Safari and Chrome */

-o-animation:myfirst 1s infinite ease-in-out; /* Opera */

Run code

Cut to clipboard

然后就是对myfirst动画名称的具体定义

@keyframes myfirst{from {font-size:15px;}to {font-size:20px;}}
@-moz-keyframes myfirst{from {font-size:15px;}to {font-size:20px;}} /* Firefox */
@-webkit-keyframes myfirst {from {font-size:15px;}to {font-size:20px;}} /* Safari and Chrome */
@-o-keyframes myfirst {from {font-size:15px;}to {font-size:20px;}} /* Opera */

Run code

Cut to clipboard

掌握这两个就可以做出很多非常具有点击欲的按钮

文章：常用html、demo代码发表时间：2016-09-30, 17:44:30

展开↯

#²¹²⁸

作者：广西南宁市

台湾小哥说：你们有七天长假好好哦~
我想说：你们也可以有的...

文章：成功的故事只能倒叙着讲发表时间：2016-09-30, 11:41:36

展开↯

Records:2794 112/148 «‹108 109 110 111 112 113 114 115 116 ›»