└── README.md
/README.md:
--------------------------------------------------------------------------------
1 | ## 一、预加载图像
2 |
3 | ```javascript
4 | $.preloadImages = function () {
5 | for (var i = 0; i < arguments.length; i++) {
6 | $('img').attr('src',arguments[i]);
7 | }
8 | }
9 | $.preloadImages('img/hover-on.png','img/hover-off.png');
10 | ```
11 |
12 | ## 二、检查图像是否加载
13 |
14 | ```javascript
15 | $('img').load(function () {
16 | console.log("image load successful");
17 | });
18 | ```
19 |
20 | ## 三、自动修复破坏的图像
21 |
22 | ```javascript
23 | $('img').on('error', function () {
24 | if (!$(this).hasClass('broken-image')) {
25 | $(this).prop('src','https://cdn.segmentfault.com/v-5cc2cd8e/global/img/logo-b.svg').addClass('broken-image');
26 | }
27 | });
28 | ```
29 |
30 | ## 四、悬停切换
31 |
32 | ```javascript
33 | // addClass、removeClass
34 | $(selector).hover(function () {
35 | $(selector).addClass(className);
36 | }, function () {
37 | $(selector).removeClass(className);
38 | });
39 |
40 | // toggleClass
41 | $(selector).hover(function () {
42 | $(selector).toggleClass(className);
43 | });
44 | ```
45 |
46 | ## 五、淡入淡出/显示隐藏
47 |
48 | ```javascript
49 | $("img").click(function (e) {
50 | // 隐藏
51 | $(this).fadeToggle('slow');
52 | // 显示
53 | $(this).slideToggle('slow');
54 | });
55 | ```
56 |
57 | ## 六、鼠标滚轮
58 |
59 | ```javascript
60 | $('#content').on("mousewheel DOMMouseScroll", function (event) {
61 | // chrome & ie || // firefox
62 | var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
63 | (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));
64 |
65 | if (delta > 0) {
66 | console.log('mousewheel top');
67 | } else if (delta < 0) {
68 | console.log('mousewheel bottom');
69 | }
70 | });
71 | ```
72 |
73 | ## 七、鼠标坐标
74 |
75 | ### 1、JavaScript实现
76 |
77 | ```html
78 | X: Y:
79 | ```
80 |
81 |
82 | ```javascript
83 | function mousePosition(ev){
84 | if(ev.pageX || ev.pageY){
85 | return {x:ev.pageX, y:ev.pageY};
86 | }
87 | return {
88 | x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
89 | y:ev.clientY + document.body.scrollTop - document.body.clientTop
90 | };
91 | }
92 |
93 | function mouseMove(ev){
94 | ev = ev || window.event;
95 |
96 | var mousePos = mousePosition(ev);
97 |
98 | document.getElementById('xxx').value = mousePos.x;
99 | document.getElementById('yyy').value = mousePos.y;
100 | }
101 | document.onmousemove = mouseMove;
102 | ```
103 |
104 | ### 2、jQuery实现
105 |
106 | ```javascript
107 | $('#ele').click(function(event){
108 | //获取鼠标在图片上的坐标
109 | console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);
110 |
111 | //获取元素相对于页面的坐标
112 | console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
113 | });
114 | ```
115 |
116 | ## 八、禁止移动端浏览器页面滚动
117 |
118 | ### 1、HTML实现
119 |
120 | ```html
121 |
122 | ```
123 |
124 | ### 2、JavaScript实现
125 |
126 | ```javascript
127 | document.addEventListener('touchmove', function(event) {
128 | event.preventDefault();
129 | });
130 | ```
131 |
132 | ## 九、阻止默认行为
133 |
134 | ```javascript
135 | // JavaScript
136 | document.getElementById('btn').addEventListener('click', function (event) {
137 | event = event || window.event；
138 |
139 | if (event.preventDefault){
140 | // W3C
141 | event.preventDefault();
142 | } else{
143 | // IE
144 | event.returnValue = false;
145 | }
146 | }, false);
147 |
148 | // jQuery
149 | $('#btn').on('click', function (event) {
150 | event.preventDefault();
151 | });
152 | ```
153 |
154 | ## 十、阻止冒泡
155 |
156 | ```javascript
157 | // JavaScript
158 | document.getElementById('btn').addEventListener('click', function (event) {
159 | event = event || window.event；
160 |
161 | if (event.stopPropagation){
162 | // W3C
163 | event.stopPropagation();
164 | } else{
165 | // IE
166 | event.cancelBubble = true;
167 | }
168 | }, false);
169 |
170 | // jQuery
171 | $('#btn').on('click', function (event) {
172 | event.stopPropagation();
173 | });
174 | ```
175 |
176 | ## 十一、检测浏览器是否支持svg
177 |
178 | ```javascript
179 | function isSupportSVG() {
180 | var SVG_NS = 'http://www.w3.org/2000/svg';
181 | return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
182 | }
183 |
184 | console.log(isSupportSVG());
185 | ```
186 |
187 | ## 十二、检测浏览器是否支持canvas
188 |
189 | ```javascript
190 | function isSupportCanvas() {
191 | if(document.createElement('canvas').getContext){
192 | return true;
193 | }else{
194 | return false;
195 | }
196 | }
197 |
198 | console.log(isSupportCanvas());
199 | ```
200 |
201 | ## 十三、检测是否是微信浏览器
202 |
203 | ```javascript
204 | function isWeiXinClient() {
205 | var ua = navigator.userAgent.toLowerCase();
206 | if (ua.match(/MicroMessenger/i)=="micromessenger") {
207 | return true;
208 | } else {
209 | return false;
210 | }
211 | }
212 |
213 | alert(isWeiXinClient());
214 | ```
215 |
216 | ## 十四、检测是否移动端及浏览器内核
217 |
218 | ```javascript
219 | var browser = {
220 | versions: function() {
221 | var u = navigator.userAgent;
222 | return {
223 | trident: u.indexOf('Trident') > -1, //IE内核
224 | presto: u.indexOf('Presto') > -1, //opera内核
225 | webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
226 | gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
227 | mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端
228 | ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
229 | android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
230 | iPhone: u.indexOf('iPhone') > -1 , //iPhone
231 | iPad: u.indexOf('iPad') > -1, //iPad
232 | webApp: u.indexOf('Safari') > -1 //Safari
233 | };
234 | }
235 | }
236 |
237 | if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
238 | alert('移动端');
239 | }
240 | ```
241 |
242 | ## 十五、检测是否电脑端/移动端
243 |
244 | ```javascript
245 | var browser={
246 | versions:function(){
247 | var u = navigator.userAgent, app = navigator.appVersion;
248 | var sUserAgent = navigator.userAgent;
249 | return {
250 | trident: u.indexOf('Trident') > -1,
251 | presto: u.indexOf('Presto') > -1,
252 | isChrome: u.indexOf("chrome") > -1,
253 | isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
254 | isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
255 | webKit: u.indexOf('AppleWebKit') > -1,
256 | gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
257 | mobile: !!u.match(/AppleWebKit.*Mobile.*/),
258 | ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
259 | android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
260 | iPhone: u.indexOf('iPhone') > -1,
261 | iPad: u.indexOf('iPad') > -1,
262 | iWinPhone: u.indexOf('Windows Phone') > -1
263 | };
264 | }()
265 | }
266 | if(browser.versions.mobile || browser.versions.iWinPhone){
267 | window.location = "http:/www.baidu.com/m/";
268 | }
269 | ```
270 |
271 | ## 十六、检测浏览器内核
272 |
273 | ```javascript
274 | function getInternet(){
275 | if(navigator.userAgent.indexOf("MSIE")>0) {
276 | return "MSIE"; //IE浏览器
277 | }
278 |
279 | if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
280 | return "Firefox"; //Firefox浏览器
281 | }
282 |
283 | if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
284 | return "Safari"; //Safan浏览器
285 | }
286 |
287 | if(isCamino=navigator.userAgent.indexOf("Camino")>0){
288 | return "Camino"; //Camino浏览器
289 | }
290 | if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
291 | return "Gecko"; //Gecko浏览器
292 | }
293 | }
294 | ```
295 |
296 | ## 十七、强制移动端页面横屏显示
297 |
298 | ```javascript
299 | $( window ).on( "orientationchange", function( event ) {
300 | if (event.orientation=='portrait') {
301 | $('body').css('transform', 'rotate(90deg)');
302 | } else {
303 | $('body').css('transform', 'rotate(0deg)');
304 | }
305 | });
306 | $( window ).orientationchange();
307 | ```
308 |
309 | ## 十八、电脑端页面全屏显示
310 |
311 | ```javascript
312 | function fullscreen(element) {
313 | if (element.requestFullscreen) {
314 | element.requestFullscreen();
315 | } else if (element.mozRequestFullScreen) {
316 | element.mozRequestFullScreen();
317 | } else if (element.webkitRequestFullscreen) {
318 | element.webkitRequestFullscreen();
319 | } else if (element.msRequestFullscreen) {
320 | element.msRequestFullscreen();
321 | }
322 | }
323 |
324 | fullscreen(document.documentElement);
325 | ```
326 |
327 | ## 十九、获得/失去焦点
328 |
329 | ### 1、JavaScript实现
330 |
331 | ```html
332 |
333 | ```
334 |
335 | ```javascript
336 | // JavaScript
337 | window.onload = function(){
338 | var oIpt = document.getElementById("i_input");
339 |
340 | if(oIpt.value == "会员卡号/手机号"){
341 | oIpt.style.color = "#888";
342 | }else{
343 | oIpt.style.color = "#000";
344 | };
345 |
346 | oIpt.onfocus = function(){
347 | if(this.value == "会员卡号/手机号"){
348 | this.value="";
349 | this.style.color = "#000";
350 | this.type = "password";
351 | }else{
352 | this.style.color = "#000";
353 | }
354 | };
355 |
356 | oIpt.onblur = function(){
357 | if(this.value == ""){
358 | this.value="会员卡号/手机号";
359 | this.style.color = "#888";
360 | this.type = "text";
361 | }
362 | };
363 | }
364 | ```
365 |
366 |
367 | ----------
368 |
369 | ### 2、jQuery实现
370 |
371 |
372 | ```html
373 |
374 |
375 | ```
376 |
377 | ```javascript
378 | // jQuery
379 | $("#showPwd").focus(function() {
380 | var text_value=$(this).val();
381 | if (text_value =='请输入您的注册密码') {
382 | $("#showPwd").hide();
383 | $("#password").show().focus();
384 | }
385 | });
386 | $("#password").blur(function() {
387 | var text_value = $(this).val();
388 | if (text_value == "") {
389 | $("#showPwd").show();
390 | $("#password").hide();
391 | }
392 | });
393 | ```
394 |
395 | ## 二十、获取上传文件大小
396 |
397 | ```html
398 |
399 | ```
400 |
401 | ```javascript
402 | // 兼容IE9低版本
403 | function getFileSize(obj){
404 | var filesize;
405 |
406 | if(obj.files){
407 | filesize = obj.files[0].size;
408 | }else{
409 | try{
410 | var path,fso;
411 | path = document.getElementById('filePath').value;
412 | fso = new ActiveXObject("Scripting.FileSystemObject");
413 | filesize = fso.GetFile(path).size;
414 | }
415 | catch(e){
416 | // 在IE9及低版本浏览器，如果不容许ActiveX控件与页面交互，点击了否，就无法获取size
417 | console.log(e.message); // Automation 服务器不能创建对象
418 | filesize = 'error'; // 无法获取
419 | }
420 | }
421 | return filesize;
422 | }
423 | ```
424 |
425 | ## 二十一、限制上传文件类型
426 |
427 | ### 1、高版本浏览器
428 |
429 | ```html
430 |
431 | ```
432 |
433 | ### 2、限制图片
434 |
435 | ```html
436 |
437 | ```
438 |
439 | ### 3、低版本浏览器
440 |
441 | ```html
442 |
443 | ```
444 |
445 | ```javascript
446 | /* 通过扩展名，检验文件格式。
447 | * @parma filePath{string} 文件路径
448 | * @parma acceptFormat{Array} 允许的文件类型
449 | * @result 返回值{Boolen}：true or false
450 | */
451 |
452 | function checkFormat(filePath,acceptFormat){
453 | var resultBool= false,
454 | ex = filePath.substring(filePath.lastIndexOf('.') + 1);
455 | ex = ex.toLowerCase();
456 |
457 | for(var i = 0; i < acceptFormat.length; i++){
458 | if(acceptFormat[i] == ex){
459 | resultBool = true;
460 | break;
461 | }
462 | }
463 | return resultBool;
464 | };
465 |
466 | function limitTypes(){
467 | var obj = document.getElementById('filePath');
468 | var path = obj.value;
469 | var result = checkFormat(path,['bmp','jpg','jpeg','png']);
470 |
471 | if(!result){
472 | alert('上传类型错误，请重新上传');
473 | obj.value = '';
474 | }
475 | }
476 | ```
477 |
478 |
479 | ## 二十二、正则表达式
480 |
481 | ```javascript
482 | //验证邮箱
483 | /^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
484 |
485 | //验证手机号
486 | /^1[3|5|8|7]\d{9}$/
487 |
488 | //验证URL
489 | /^http:\/\/.+\./
490 |
491 | //验证身份证号码
492 | /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
493 |
494 | //匹配字母、数字、中文字符
495 | /^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
496 |
497 | //匹配中文字符
498 | /[\u4e00-\u9fa5]/
499 |
500 | //匹配双字节字符(包括汉字)
501 | /[^\x00-\xff]/
502 | ```
503 |
504 | ## 二十三、限制字符数
505 |
506 | ```html
507 |
508 | ```
509 |
510 | ```javascript
511 | //字符串截取
512 | function getByteVal(val, max) {
513 | var returnValue = '';
514 | var byteValLen = 0;
515 | for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
516 | returnValue += val[i];
517 | }
518 | return returnValue;
519 | }
520 |
521 | $('#txt').on('keyup', function () {
522 | var val = this.value;
523 | if (val.replace(/[^\x00-\xff]/g, "**").length > 14) {
524 | this.value = getByteVal(val, 14);
525 | }
526 | });
527 | ```
528 |
529 | ## 二十四、验证码倒计时
530 |
531 | ```html
532 |
533 | ```
534 |
535 | ```javascript
536 | // JavaScript
537 | var times = 60, // 时间设置60秒
538 | timer = null;
539 |
540 | document.getElementById('send').onclick = function () {
541 | // 计时开始
542 | timer = setInterval(function () {
543 | times--;
544 |
545 | if (times <= 0) {
546 | send.value = '发送验证码';
547 | clearInterval(timer);
548 | send.disabled = false;
549 | times = 60;
550 | } else {
551 | send.value = times + '秒后重试';
552 | send.disabled = true;
553 | }
554 | }, 1000);
555 | }
556 | ```
557 |
558 | ```jquery
559 | var times = 60,
560 | timer = null;
561 |
562 | $('#send').on('click', function () {
563 | var $this = $(this);
564 |
565 | // 计时开始
566 | timer = setInterval(function () {
567 | times--;
568 |
569 | if (times <= 0) {
570 | $this.val('发送验证码');
571 | clearInterval(timer);
572 | $this.attr('disabled', false);
573 | times = 60;
574 | } else {
575 | $this.val(times + '秒后重试');
576 | $this.attr('disabled', true);
577 | }
578 | }, 1000);
579 | });
580 | ```
581 |
582 | ## 二十五、时间倒计时
583 |
584 | ```html
585 |
586 | ```
587 |
588 | ```javascript
589 | function countdown() {
590 |
591 | var endtime = new Date("May 2, 2018 21:31:09");
592 | var nowtime = new Date();
593 |
594 | if (nowtime >= endtime) {
595 | document.getElementById("_lefttime").innerHTML = "倒计时间结束";
596 | return;
597 | }
598 |
599 | var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
600 | if (leftsecond < 0) {
601 | leftsecond = 0;
602 | }
603 |
604 | __d = parseInt(leftsecond / 3600 / 24);
605 | __h = parseInt((leftsecond / 3600) % 24);
606 | __m = parseInt((leftsecond / 60) % 60);
607 | __s = parseInt(leftsecond % 60);
608 |
609 | document.getElementById("_lefttime").innerHTML = __d + "天" + __h + "小时" + __m + "分" + __s + "秒";
610 | }
611 |
612 | countdown();
613 |
614 | setInterval(countdown, 1000);
615 | ```
616 |
617 | ## 二十六、倒计时跳转
618 |
619 | ```html
620 |
621 | ```
622 |
623 | ```javascript
624 | // 设置倒计时秒数
625 | var t = 10;
626 |
627 | // 显示倒计时秒数
628 | function showTime(){
629 | t -= 1;
630 | document.getElementById('showtimes').innerHTML= t;
631 |
632 | if(t==0){
633 | location.href='error404.asp';
634 | }
635 |
636 | //每秒执行一次 showTime()
637 | setTimeout("showTime()",1000);
638 | }
639 |
640 | showTime();
641 | ```
642 |
643 | ## 二十七、时间戳、毫秒格式化
644 |
645 | ```javascript
646 | function formatDate(now) {
647 | var y = now.getFullYear();
648 | var m = now.getMonth() + 1; // 注意 JavaScript 月份+1
649 | var d = now.getDate();
650 | var h = now.getHours();
651 | var m = now.getMinutes();
652 | var s = now.getSeconds();
653 |
654 | return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
655 | }
656 |
657 | var nowDate = new Date(1442978789184);
658 |
659 | alert(formatDate(nowDate));
660 | ```
661 |
662 | ## 二十八、当前日期
663 |
664 | ```javascript
665 | var calculateDate = function(){
666 |
667 | var date = new Date();
668 | var weeks = ["日","一","二","三","四","五","六"];
669 |
670 | return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
671 | date.getDate()+"日 星期"+weeks[date.getDay()];
672 | }
673 |
674 | $(function(){
675 | $("#dateSpan").html(calculateDate());
676 | });
677 | ```
678 |
679 | ## 二十九、判断周六/周日
680 |
681 | ```html
682 |
683 | ```
684 |
685 | ```javascript
686 | function time(y,m){
687 | var tempTime = new Date(y,m,0);
688 | var time = new Date();
689 | var saturday = new Array();
690 | var sunday = new Array();
691 |
692 | for(var i=1;i<=tempTime.getDate();i++){
693 | time.setFullYear(y,m-1,i);
694 |
695 | var day = time.getDay();
696 |
697 | if(day == 6){
698 | saturday.push(i);
699 | }else if(day == 0){
700 | sunday.push(i);
701 | }
702 | }
703 |
704 | var text = y+"年"+m+"月份"+"
"
705 | +"周六："+saturday.toString()+"
"
706 | +"周日："+sunday.toString();
707 |
708 | document.getElementById("text").innerHTML = text;
709 | }
710 |
711 | time(2018,5);
712 | ```
713 |
714 |
715 | 本文在GitHub的地址 [Common-code][11]
716 |
717 | [阅读更多][12]
718 |
719 | 参考文章 [『总结』web前端开发常用代码整理][13]
720 |
721 |
722 | [1]: /img/bV9GOl
723 | [2]: /img/bV9GOp
724 | [3]: /img/bV9GOJ
725 | [4]: /img/bV9LXp
726 | [5]: /img/bV9MaN
727 | [6]: /img/bV9M2B
728 | [7]: /img/bV9M44
729 | [8]: /img/bV9M5r
730 | [9]: /img/bV9M5E
731 | [10]: /img/bV9M50
732 | [11]: https://github.com/WEBING123/Common-code
733 | [12]: https://segmentfault.com/u/webing123
734 | [13]: https://segmentfault.com/a/1190000011087315#articleHeader21
735 |
--------------------------------------------------------------------------------