(转)CSS3 巧用边框设置一些效果

19 六月,2017

<style type="text/css">
.style-border b {
    border-width:100px;
    border-color:orange blue yellow red;
    width:0px;
    height:0;
    vertical-align:middle;
    display:inline-block;
    margin:10px;
}
.style-border .style-10 {
    width:110px;
    height:100px;
    border-width:50px 40px;
    font-size:15px;
    line-height:30px;
}
.style-border .solid {
    border-style:solid;
}
.style-border .dotted {
    border-style:dotted;
}
.style-border .dashed {
    border-style:dashed;
}
.style-border .double {
    border-style:double;
}
.style-border .groove {
    border-style:groove;
}
.style-border .ridge {
    border-style:ridge;
}
.style-border .inset {
    border-style:inset;
}
.style-border .outset {
    border-style:outset;
}
</style>

<div class="style-border">
    <b class="solid style-10">实线:solid</b>
    <b class="solid"></b>
    <b class="dotted style-10">点线:dotted</b>
    <b class="dotted"></b>
    <b class="dashed style-10">虚线:dashed</b>
    <b class="dashed"></b>
    <b class="double style-10">双线:double</b>
    <b class="double"></b>
    <b class="groove style-10">3D凹槽:groove</b>
    <b class="groove"></b>
    <b class="ridge style-10">3D凸槽:ridge</b>
    <b class="ridge"></b>
    <b class="inset style-10">3D凹边:inset</b>
    <b class="inset"></b>
    <b class="outset style-10">3D凸边:outset</b>
    <b class="outset"></b>
</div>

(转)jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等

16 六月,2017

禁用鼠标右键菜单栏

$("body").bind("contextmenu", function(event) {
    return false;
});

(转)jQuery 禁用浏览器快捷键

16 六月,2017

禁用快捷键的思路应该是一目了然的,也就是阻止默认行为就可以了,使用jQuery的话,则更是一个preventDefault()函数就搞定了,比如禁用浏览的CTRL+F的搜索快捷键,下面是典型的代码:

$(document).keydown(function(e){
    if(e.ctrlKey && e.which==70){
        e.preventDefault();
    }
});

JavaScript Keycode对照表

16 六月,2017

字母和数字键的键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

 

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
0 96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 109 F6 117 F12 123
6 102 . 110
7 103 / 111

 

控制键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Down Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 \| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up Arrow 38 ,< 188 ‘” 222

 

多媒体键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
音量加 175
音量减 174
停止 179
静音 173
浏览器 172
邮件 180
搜索 170
收藏 171

(转)chrome developer tool—— 断点调试篇

15 六月,2017

简单地说,断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。

Sources面板

Sources面板是chrome developer tool中的断点调试面板。我们打开Sources面板后其实会在界面中看到如下内容,我们跟着逐一看看都是什么意思:

1 2 3 18