h5弹窗、生成二维码、身份证效验

代码来自各大途径，如有侵权，请告知删除

禁止屏幕滚动:

    var mo=function(e){e.preventDefault();};
    // 禁止滚动
    function stop(){
        document.body.style.overflow='hidden';       
        document.addEventListener("touchmove",mo,{passive:false});//禁止页面滑动
    }
    // 取消滑动限制
    function move(){
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,{passive:false});       
    }

移动端模态框

<style>
 /* 模态框 */
 h4{  
     margin-left: 20px;  
 }  
 p{  
     text-align: center;  
 }
 .modal{  
     display: none;  
     width: 100%;  
     height: 100%;  
     position: fixed;  
     left: 0;  
     top: 0;  
     z-index: 1000;  
     background-color: rgba(0,0,0,0.5);  
 }  
 .modal-content{  
     display: flex;  
     flex-flow: column nowrap;  
     justify-content: space-between;  
     width: 50%;  
     max-width: 600px;  
     height: 40%;  
     max-height: 500px;  
     margin: 5rem auto;  
     border-radius:10px;  
     background-color:#fff;  
     -webkit-animation: zoom 0.6s;  
     animation: zoom 0.6s;  
     resize: both;  
     overflow: auto;  
 }  
 @-webkit-keyframes zoom{  
     from {-webkit-transform: scale(0)}  
     to {-webkit-transform: scale(1)}  
 }  
 @keyframes zoom{  
     from {transform: scale(0)}  
     to {transform: scale(1)}  
 }  
 .modal-header{  
     box-sizing:border-box;  
     border-bottom:1px solid #ccc;  
     display: flex;  
     justify-content: space-between;  
     align-items: center;  
 }  
 .close{  
     color: #b7b7b7;  
     font-size: 30px;  
     font-weight: bold;  
     margin-right: 20px;  
     transition: all 0.3s;  
 }  
 .close:hover, .close:focus{  
     color: #95b4ed;  
     text-decoration: none;  
     cursor: pointer;  
 }  
 .modal-body{  
     padding: 10px;  
     font-size: 16px;  
     box-sizing:border-box;  
 }  
 .modal-footer{  
     box-sizing:border-box;  
     border-top:1px solid #ccc;  
     display: flex;  
     padding: 15px;  
     justify-content: flex-end;  
     align-items: center;  
 }  
 .modal-footer #sure {
     background-color: rgb(8, 188, 112);
 }
 .modal-footer button{  
     width: 60px;  
     height: 35px;  
     padding: 5px;  
     box-sizing: border-box;  
     margin-right: 10px;  
     font-size: 16px;  
     color: white;  
     border-radius: 5px;
     border: none;
 }  
 .modal-footer button:hover, .modal-footer button:focus{  
     background-color: #95b4ed;  
     cursor: pointer;  
 }  
 @media only screen and (max-width: 700px){  
     .modal-content {  
         width: 80%;  
     }  
 }
 style>

 <div id="modal" class="modal">  
     <div class="modal-content">  
         <header class="modal-header">  
             <h4>请确认h4>  
             <span class="close">×span>  
         header>  
         <div class="modal-body">

         div>  
         <footer class="modal-footer">  
             <button id="cancel">取消button>  
             <button id="sure">确定button>  
         footer>  
     div>  
 div>

<script>
 // 点击确定
 $("#sure").on('click',function(){
  	 $("#modal").hide()})
 // 点击取消
 $("#cancel").on('click',function(){
     $("#modal").hide()
 })
 $(".close").on('click',function(){
     $("#modal").hide()
 })
script>

生成二维码

	
	<div class="ewm">
        <div id="qrcode">div>
    div>
    
    
    <script src="js/jquery.min.js">script>
	<script src="js/qrcode.js">script>
	
	
	<script>
		jQuery(function(){
            jQuery('#qrcode').qrcode(baseStr);
        });
	script>

字符串加密成base64

function base64_encode(str) {
        var c1, c2, c3;
        var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
        var i = 0,
            len = str.length,
            string = '';

        while (i < len) {
            c1 = str.charCodeAt(i++) & 0xff;
            if (i == len) {
                string += base64EncodeChars.charAt(c1 >> 2);
                string += base64EncodeChars.charAt((c1 & 0x3) << 4);
                string += "==";
                break;
            }
            c2 = str.charCodeAt(i++);
            if (i == len) {
                string += base64EncodeChars.charAt(c1 >> 2);
                string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
                string += base64EncodeChars.charAt((c2 & 0xF) << 2);
                string += "=";
                break;
            }
            c3 = str.charCodeAt(i++);
            string += base64EncodeChars.charAt(c1 >> 2);
            string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
            string += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
            string += base64EncodeChars.charAt(c3 & 0x3F)
        }
        return string
    }

hmac_sha256 加密算法使用

   
   链接: [link](https://www.bootcdn.cn/crypto-js/).
   <script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js">script>
   <script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/hmac-sha256.min.js">script>
   <script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/enc-base64.min.js">script>

   <script>
   	   // 生成签名
       let signSrt = 'abc
       const hash = CryptoJS.HmacSHA256("Message", signSrt);
       // 生成十六进制的
       const hashInSixTeen= CryptoJS.enc.Hex.stringify(hash);
   script>

生成订单号（随机数+时间戳）

function random_No(j) {
    varrandom_no = "";
    for (var i = 0; i < j; i++) //j位随机数，用以加在时间戳后面。
    {
        random_no += Math.floor(Math.random() * 10);
    }
    random_no = new Date().getTime() + random_no;
    return random_no;
};

校验身份证是否合法

		// 校验身份证是否合法
       function checkIdcard(code) { 
        var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "};
        var tip = "";
        var pass= true;
        
        if(!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)){
            tip = "身份证号格式错误";
            pass = false;
        }
        
        else if(!city[code.substr(0,2)]){
            tip = "地址编码错误";
            pass = false;
        }
        else{
            //18位身份证需要验证最后一位校验位
            if(code.length == 18){
                code = code.split('');
                //∑(ai×Wi)(mod 11)
                //加权因子
                var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
                //校验位
                var parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
                var sum = 0;
                var ai = 0;
                var wi = 0;
                for (var i = 0; i < 17; i++)
                {
                    ai = code[i];
                    wi = factor[i];
                    sum += ai * wi;
                }
                var last = parity[sum % 11];
                if(parity[sum % 11] != code[17]){
                    tip = "校验位错误";
                    pass =false;
                }
            }
        }
        // if(!pass) alert(tip);
        return pass;
    }

CDN使用element字体图标失效

https://unpkg.com/[email protected]/lib/theme-chalk/fonts/ 
在你.css文件同级目录下新建一个fonts文件夹，
然后把刚才下载的两份文件放进去，即可。

web预览word、xls、ppt、pdf文件

<--  // word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提：资源必须是公共可访问的) -->
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=文件路径' frameborder='1'>iframe>

<-- // pdf预览 -->
<a href="文档地址">a>