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

最新推荐文章于 2023-04-09 13:59:00 发布

Yuan_KL

最新推荐文章于 2023-04-09 13:59:00 发布

阅读量752

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/Sailing_Yuan/article/details/103630020

版权

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

禁止屏幕滚动:

    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>

生成二维码

	<!-- 1.二维码的容器 -->
	<div class="ewm">
        <div id="qrcode"></div>
    </div>
    
    <!-- 2.引入相关资源 -->
    <script src="js/jquery.min.js"></script>
	<script src="js/qrcode.js"></script>
	
	<!-- 3.生成二维码 -->
	<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 加密算法使用

   <!-- 最新连接地址 https://www.bootcdn.cn/crypto-js/ -->
   链接: [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/element-ui@2.10.1/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>

Yuan_KL

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
h5弹窗、生成二维码、身份证效验

前端常用禁止屏幕滚动: var mo=function(e){e.preventDefault();}; // 禁止滚动 function stop(){ document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,{passi...
复制链接

扫一扫