zoukankan      html  css  js  c++  java
  • 几个前端小技巧

    1:js在进行小数运算时会有丢失精度问题(其他语言也是),比如:

    0.1+0.2 //0.30000000000000004
    

    有一种比较快捷的方式是先把小数乘以10的整数倍,然后再运算,如:

    (0.1*10+0.2*10)/10 //0.3
    

    但是这种方式也不是100%准确的,乘以整百也可能精度丢失,比如:

    2177.74*100 //217773.99999999997

      

     

    a、把小数转化为字符串,拆分整数部分和小数部分分别计算,然后再把结果进行拼接;

    b、先乘10的整数倍,然后再用toFixed进行四舍五入,这样能保证结果还是准确的,如:

    (2177.74*100).toFixed(0);
    2.3+0.3=>2.5999999999999996
    Math.round((2.3+0.3)*1e12)/1e12=>2.6

    直接运算,然后再用toFixed(或者Math.round)进行四舍五入,用于对计算结果不是很精确的场景。

    2:<a>标签的download属性可以用来设置用户下载后的文件名称,如: 

    <a href="xxx.jpg" download="改名后的文件,jpg" />
    

    但是有一点要注意,文件不能跨域,如果下载文件处于和当前域不同的域,则改名失败。

    3:用instanceof来判断跨iframe的对象类型时,会失效。比如我们在父页面定义了一个数组

    var arr = [1,2,3];
    

    然后在iframe中来访问父页面的arr对象:

    console.log(parent.arr); //[1,2,3]
    console.log(parent.arr instanceof Array); //false
    

    原因是不同的窗口各有一套自己的宿主对象,父窗口的Array构造器与子窗口的Array构造器并不是同一个,也就是说,arr是父窗口的Array实例,并不是子窗口的Array实例。

    这就是为什么我们判断数组的时候要这么办:

    Object.prototype.toString.call(parent.arr); //[object Array]
    

    4:我们常用JSON.stringify方法来格式化json对象。其实这个stringify方法还接收第三个参数,支持把格式化后的字符串加一定缩进,比如:

    JSON.stringify(obj, undefined, 4);

    结果如下:

    {
        "num": 1234,
        "str": "字符串",
        "arr": [
            1,
            2,
            3,
            4,
            5,
            6
        ],
        "obj": {
            "name": "tom",
            "age": 10,
            "like": [
                "a",
                "b"
            ]
        }
    }

    没错,上面是一个字符串。如果再用正则匹配一下,把属性/值给加上不同的高亮颜色,那么一个简单的json数据展示功能就有了:



    ("车满满(北京)信息技术有限公司","BC5E782508498B1DB5FD8E98AC0B04F2","","")

    5:js的Date对象在进行日期计算时,会自动进行月份判断以及平年闰年判断,我们可以利用这一点来做一些小技巧。

    当我们想计算某个月份有多少天时,经常会先判断当前月份有30天还是31天,还得判断是否是闰年。 其实,计算2016年7月份有多少天,可以这么写:

    new Date(2016, 7, 0).getDate(); //31
    

    js的月份从0开始,这里我们其实求的是8月0号,就会得到7月31号,也就拿到了31这个天数。

    同样,想计算某天再过20天是几月几号,也不必进行自己判断月份以及闰年。比如计算今天再过20天的日期:

    new Date(2017, 6, 20+20);
    //Wed Aug 09 2017 00:00:00 GMT+0800
    
    得到了8月9号。看到了吧,日期那里超过了31号,js会自动帮你计算到下个月。


    ⇠  箭头类

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    &#8672 u21E0 21E0 &#8674 u21E2 21E2
    &#8673 u21E1 21E1 &#8675 u21E3 21E3
    &#8606 u219E 219E &#8608 u21A0 21A0
    &#8607 u219F 219F &#8609 u21A1 21A1
    &#8592 u2190 2190 &#8594 u2192 2192
    &#8593 u2191 2191 &#8595 u2193 2193
    &#8596 u2194 2194 &#8597 u2195 2195
    &#8644 u21C4 21C4 &#8645 u21C5 21C5
    &#8610 u21A2 21A2 &#8611 u21A3 21A3
    &#8670 u21DE 21DE &#8671 u21DF 21DF
    &#8619 u21AB 21AB &#8620 u21AC 21AC
    &#8668 u21DC 21DC &#8669 u21DD 21DD
    &#8602 u219A 219A &#8603 u219B 219B
    &#8622 u21AE 21AE &#8621 u21AD 21AD
    &#8678 u21E6 21E6 &#8680 u21E8 21E8
    &#8679 u21E7 21E7 &#8681 u21E9 21E9
    &#9650 u25B2 25B2 &#9658 u25BA 25BA
    &#9660 u25BC 25BC &#9668 u25C4 25C4
    &#10132 u2794 2794 &#10137 u2799 2799
    &#10152 u27A8 27A8 &#10162 u27B2 27B2
    &#10140 u279C 279C &#10142 u279E 279E
    &#10143 u279F 279F &#10144 u27A0 27A0
    &#10148 u27A4 27A4 &#10149 u27A5 27A5
    &#10150 u27A6 27A6 &#10151 u27A7 27A7
    &#10165 u27B5 27B5 &#10168 u27B8 27B8
    &#10172 u27BC 27BC &#10173 u27BD 27BD
    &#10170 u27BA 27BA &#10163 u27B3 27B3
    &#8631 u21B7 21B7 &#8630 u21B6 21B6
    &#8635 u21BB 21BB &#8634 u21BA 21BA
    &#8629 u21B5 21B5 &#8623 u21AF 21AF
    &#10174 u27BE 27BE        
    
    

    ❤  基本形状类

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    &#10084 u2764 2764 &#9992 u2708 2708
    &#9733 u2605 2605 &#10022 u2726 2726
    &#9728 u2600 2600 &#9670 u25C6 25C6
    &#9672 u25C8 25C8 &#9635 u25A3 25A3
    &#9787 u263B 263B &#9786 u263A 263A
    &#9785 u2639 2639 &#9993 u2709 2709
    &#9742 u260E 260E &#9743 u260F 260F
    &#9990 u2706 2706 &#65533 uFFFD FFFD
    &#9729 u2601 2601 &#9730 u2602 2602
    &#10052 u2744 2744 &#9731 u2603 2603
    &#10056 u2748 2748 &#10047 u273F 273F
    &#10048 u2740 2740 &#10049 u2741 2741
    &#9752 u2618 2618 &#10086 u2766 2766
    &#9749 u9749 9749 &#10050 u2742 2742
    &#9765 u2625 2625 &#9774 u262E 262E
    &#9775 u262F 262F &#9770 u262A 262A
    &#9764 u2624 2624 &#9988 u2704 2704
    &#9986 u2702 2702 &#9784 u2638 2638
    &#9875 u2693 2693 &#9763 u2623 2623
    &#9888 u26A0 26A0 &#9889 u26A1 26A1
    &#9762 u2622 2622 &#9851 u267B 267B
    &#9855 u267F 267F &#9760 u2620 2620
    
    

    ¥  货币类

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    $ &#36 u0024 024 ¢ &#162 u00A2 0A2
    £ &#163 u00A3 0A3 ¤ &#164 u00A4 0A4
    &#8364 u20AC 20AC ¥ &#165 u00A5 0A5
    &#8369 u20B1 20B1 &#8377 u20B9 20B9
    
    

    ½  数学类

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    ½ &#189 u00BD 0BD ¼ &#188 u00BC 0BC
    ¾ &#190 u00BE 0BE &#8531 u2153 2153
    &#8532 u2154 2154 &#8539 u215B 215B
    &#8540 u215C 215C &#8541 u215D 215D
    &#8240 u2030 2030 % &#37 u0025 025
    < &#60 u003C 03C > &#62 u003E 03E
    
    

    ♫  音乐符号类

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    &#9833 u2669 2669 &#9834 u266A 266A
    &#9835 u266B 266B &#9836 u266C 266C
    &#9837 u266D 266D &#9839 u266F 266F
    
    

    ✖  对错号

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
      &#160 u00A0 0A0 &#9744 u2610 2610
    &#9745 u2611 2611 &#9746 u2612 2612
    &#10003 u2713 2713 &#10004 u2714 2714
    &#10005 u10005 10005 &#10006 u2716 2716
    &#10007 u2717 2717 &#10008 u2718 2718
    
    

    ★  全都是星星

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    &#9733 u2605 2605 &#10029 u272D 272D
    &#10030 u272E 272E &#9734 u2606 2606
    &#10026 u272A 272A &#10017 u2721 2721
    &#10031 u272F 272F &#10037 u2735 2735
    &#10038 u2736 2736 &#10040 u2738 2738
    &#10041 u2739 2739 &#10042 u273A 273A
    &#10033 u2731 2731 &#10034 u2732 2732
    &#10036 u2734 2734 &#10035 u2733 2733
    &#10043 u273B 273B &#10045 u273D 273D
    &#10059 u274B 274B &#10054 u2746 2746
    &#10052 u2744 2744 &#10053 u2745 2745
    
    

    ♒  星座类

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    &#9800 u2648 2648 &#9801 u2649 2649
    &#9802 u264A 264A &#9803 u264B 264B
    &#9804 u264C 264C &#9805 u264D 264D
    &#9806 u264E 264E &#9807 u264F 264F
    &#9808 u2650 2650 &#9809 u2651 2651
    &#9810 u2652 2652 &#9811 u2653 2653
    
    

    ♚  国际象棋类

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    &#9818 u265A 265A &#9819 u265B 265B
    &#9820 u265C 265C &#9821 u265D 265D
    &#9822 u265E 265E &#9823 u265F 265F
    &#9812 u2654 2654 &#9813 u2655 2655
    &#9814 u2656 2656 &#9815 u2657 2657
    &#9816 u2658 2658 &#9817 u2659 2659
    
    

    ♣  扑克牌类

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    &#9824 u2660 2660 &#9827 u2663 2663
    &#9829 u2665 2665 &#9830 u2666 2666
    &#9828 u2664 2664 &#9831 u2667 2667
    &#9825 u2661 2661 &#9826 u2662 2662
    
    

    Ω  希腊字母

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    Α &#913 u0391 391 Β &#914 u0392 392
    Γ &#915 u0393 393 Δ &#916 u0394 394
    Ε &#917 u0395 395 Ζ &#918 u0396 396
    Η &#919 u0397 397 Θ &#920 u0398 398
    Ι &#921 u0399 399 Κ &#922 u039A 39A
    Λ &#923 u039B 39B Μ &#924 u039C 39C
    Ν &#925 u039D 39D Ξ &#926 u039E 39E
    Ο &#927 u039F 39F Π &#928 u03A0 3A0
    Ρ &#929 u03A1 3A1 Σ &#931 u03A3 3A3
    Τ &#932 u03A4 3A4 Υ &#933 u03A5 3A5
    Φ &#934 u03A6 3A6 Χ &#935 u03A7 3A7
    Ψ &#936 u03A8 3A8 Ω &#937 u03A9 3A9
    
    

    ☩  十字

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    &#9768 u2628 2628 &#9769 u2629 2629
    &#10013 u271D 271D &#10014 u271E 271E
    &#10015 u271F 271F &#10016 u2720 2720
    &#10010 u271A 271A &#8224 u2020 2020
    &#10018 u2722 2722 &#10020 u2724 2724
    &#10019 u2723 2723 &#10021 u2725 2725
    
    

    ©  法律符号

    
    
    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    ® &#174 u00AE 0AE © &#169 u00A9 0A9
    &#8471 u2117 2117 &#153 u0099 099
    &#8480 u2120 2120        
    
    

    @  标点和符号

    
    
    
    
    

    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    « &#171 u00AB 0AB » &#187 u00BB 0BB
    &#139 u008B 08B &#155 u009B 09B
    &#8220 u201C 201C &#8221 u201D 201D
    &#8216 u2018 2018 &#8217 u2019 2019
    &#8226 u2022 2022 &#9702 u25E6 25E6
    ¡ &#161 u00A1 0A1 ¿ &#191 u00BF 0BF
    &#8453 u2105 2105 &#8470 u2116 2116
    & &#38 u0026 026 @ &#64 u0040 040
    &#8478 u211E 211E &#8451 u2103 2103
    &#8457 u2109 2109 ° &#176 u00B0 0B0
    | &#124 u007C 07C ¦ &#166 u00A6 0A6
    &#8211 u2013 2013 &#8212 u2014 2014
    &#8230 u2026 2026 &#182 u00B6 0B6
    &#8764 u223C 223C &#8800 u2260 2260

     
  • 相关阅读:
    简单工作流实现思路总结
    (转)基于SAML的单点登录介绍
    Kerberos简介
    (转)Java NIO框架Mina、Netty、Grizzly介绍与对比
    职场老好人为何没发展
    如何改变、摆脱职场老好人
    线程的状态转换图
    设计模式分类
    (转)简单的RPC java实现 .
    MYSQL导入CSV格式文件数据执行提示错误(ERROR 1290): The MySQL server is running with the --secure-file-priv option so it cannot execute this statement.
  • 原文地址:https://www.cnblogs.com/xbcq/p/5873251.html
Copyright © 2011-2022 走看看