@ form
【收藏】这么多WEB组件(CSS),攒一个网站够了吧?

简言

总是喜欢简单又精致的东西,美的不繁复也不张扬。这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧?

CSS组件

利用JavaScript实现只接收整数的输入框(input)方法

代码

age.onkeydown = function(event) {
    console.log(event.key+":"+event.which +":"+ event.keyCode +":"+ event.charCode);
    var c = event.keyCode;
    if ( c == 8 || c == 46 || c == 37 || c==39) {
    }
    else {
        if (c < 48 || (c > 57 && c < 96) || c >105 ) {
            event.preventDefault();
        } else if((c == 48 || c == 96) && (!this.value)) {
            event.preventDefault();
        }
    }
};
用JQuery实现Email地址格式验证

JQuery程序

$.fn.validateEmail = function () {
    var $this = $(this);
    $this.change(function () {
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if ($this.val() == "") {
            $this.removeClass("badEmail").removeClass("goodEmail")
        } else if (reg.test($this.val()) == false) {
            $this.removeClass("goodEmail");
            $this.addClass("badEmail");
        } else {
            $this.removeClass("badEmail");
            $this.addClass("goodEmail");
        }
    });
};

演示

用JQuery实现checkbox全选和反选

JQuery程序

$("#checkall").click(function() {
    //固有属性使用prop,切记
    $("#myForm input:checkbox").prop("checked",true);
});
$("#inverse").click(function() {
    $("#myForm input:checkbox").each(function () {
        $(this).prop("checked",!$(this).prop("checked"))
    })
});

演示

$ 热门标签
$ 贴士
简单是稳定的前提。 -Edsger Dijkstra
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。