1.JS操作数组过滤

    1. var arr=[
    2.   {value:1,item:'A},
    3.   {value:2,item:'B},
    4.   {value:3,item:'C},
    5.   {value:4,item:'D},
    6. ];
    7. var checkArr=['1','2','4'];
    8. let newArr=    arr.filter(item=>{
    9.   if(checkArr.map(Number).includes(item.value)!=-1){
    10.     return item
    11.   }
    12. });
    13. console.log(newArr,'筛选出来的新数组')

    2.JS生成随机颜色

    1.  (Math.floor(Math.random()*255+1),Math.floor(Math.random()*255+1),Math.floor(Math.random()*255+1))

    3.输入电话验证 空格 reg

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    6.     <meta charset="UTF-8">
    7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.     <title>微信支付</title>
    9.     <!-- <link rel="stylesheet" href="./css/reset.css"> -->
    10. </head>
    12. <body>
    13.     <div id="main">
    14.         <header>
    15.             众成鑫富
    16.         </header>
    17.         <main>
    18.             <div class="iptBox">
    19.                 <input type="text" placeholder="请输入您的充值账号!" id="ipt">
    20.                 <div class="info">
    21.                     <span class="errTip"></span>
    22.                 </div>
    23.             </div>
    24.         </main>
    25.         <footer>
    26.             <button id="payBtn">支付</button>
    27.         </footer>
    28.     </div>
    29.     <script>
    30.         const waitDuration=500;
    31.         //获取dom节点,为按钮绑定点击事件(加入节流功能函数)
    32.         var payBtn = document.querySelector('#payBtn');
    33.         var telPhoneVal=document.querySelector('#ipt');
    34.         var errTip=document.querySelector('.errTip');
    35.         //定义两个缓存值
    36.         var firstLen = 0;
    37.         var lastLen = 0;
    38.         var reg = /^1(3|4|5|7|8)\d{9}$/;
    39.         payBtn.addEventListener("click", clickFn(clickEvent, waitDuration));
    41.         // 节流功能函数,防止用户多次触发
    42.         function clickFn(fn, delay) {
    43.             let timer;
    44.             return function () { // 这里是标签的点击事件调用该匿名函数，所以该匿名函数指向<button id="clickEventDom">点击</button>
    45.                 if (timer) {
    46.                     return;
    47.                 }
    48.                 let that = this;
    49.                 let arg = arguments;
    50.                 timer = setTimeout(function () {
    51.                     fn.apply(that, arg);
    52.                     timer = null;
    53.                 }, delay)
    54.             }
    55.         };
    57.         // 支付函数,一下为支付业务功能代码
    58.         function clickEvent() {
    59.             console.log('支付功能');
    60.             window.location.href='./success.html';
    61.         };
    63.         // 手机号验证
    64.         telPhoneVal.oninput = function () {
    65.             telPhoneVal.value = telPhoneVal.value.substr(0, 13); //只允许输入11位+2个空格
    66.             //用户输入满11位开始验证
    67.             if (telPhoneVal.value.length == 13) {
    68.                 //将数据去掉空格后验证
    69.                 if (!reg.test(telPhoneVal.value.replace(/\s/g, ''))) {
    70.                     errTip.innerHTML = '*'+' '+'您输入的手机账号有误,请重新输入'
    71.                 } else {
    72.                     errTip.innerHTML = ''
    73.                 }
    74.             } else {
    75.                 errTip.innerHTML = ''
    76.             }
    77.         };
    78.         // 手机号四位分割
    79.         telPhoneVal.onfocus = function () {
    80.             timer = setInterval(function () {
    81.                 lastLen = telPhoneVal.value.length;
    82.                 if (lastLen > firstLen) {
    83.                     firstLen = telPhoneVal.value.length;
    84.                     if (lastLen === 4 || lastLen === 9) {
    85.                         var temp1 = telPhoneVal.value.substr(0, telPhoneVal.value.length - 1);
    86.                         var temp2 = telPhoneVal.value.substr(telPhoneVal.value.length - 1);
    87.                         telPhoneVal.value = temp1 + ' ' + temp2;
    88.                     }
    89.                 } else if (lastLen <= firstLen) {
    90.                     if (lastLen === 4 || lastLen === 9) {
    91.                         telPhoneVal.value = telPhoneVal.value.substr(0, telPhoneVal.value.length - 1);
    92.                     }
    93.                     firstLen = telPhoneVal.value.length;
    94.                 }
    95.             }, 10); //如果手机出现卡顿，可适当把定时器时间加大
    96.         }
    97.     </script>
    98.     <style>
    99.         * {
    100.             padding: 0;
    101.             margin: 0;
    102.         }
    104.         body,
    105.         html {
    106.             width: 100%;
    107.             height: 100%;
    108.         }
    110.         #main {
    111.             width: 100%;
    112.             height: 100%;
    113.             background-color: #f2f2f2;
    114.             display: flex;
    115.             justify-content: space-between;
    116.             flex-wrap: nowrap;
    117.             flex-direction: column;
    118.         }
    120.         header {
    121.             height: 26px;
    122.             width: 100%;
    123.             background-color: #f2f2f2;
    124.             display: flex;
    125.             justify-content: center;
    126.             align-items: center;
    127.             font-size: 16px;
    128.             font-family: 'Courier New', Courier, monospace;
    129.             color: #333;
    130.             font-weight: bolder;
    131.         }
    133.         main {
    134.             flex: 1;
    135.             width: 100%;
    136.             height: 100%;
    137.             overflow-y: scroll;
    138.             background: #fff;
    139.         }
    140.         .iptBox{
    141.             display: flex;
    142.             height: 22%;
    143.             width: 100%;
    144.             flex-direction: column;
    145.             justify-content: center;
    146.             align-items: center;
    147.         }
    148.         .iptBox input{
    149.             display: inline;
    150.             height: 50px;
    151.             width: 80%;
    152.             outline: none;
    153.             border: none;
    154.             border-bottom: 1px solid #a8a8a8;
    155.             font-size: 26px;
    156.             font-weight: bolder;
    157.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    158.         }
    159.         .info{
    160.             width: 80%;
    161.             margin: 0 auto;
    162.             height: 40px;
    163.             margin-top: 5px;
    164.             color: #f55c64;
    165.             font-size: 13px;
    166.         }
    168.         footer {
    169.             height: 50px;
    170.             width: 100%;
    171.             background-color: rgba(255, 255, 255, 0.4);
    172.             display: flex;
    173.             justify-content: center;
    174.             align-items: center;
    175.         }
    177.         button {
    178.             width: 140px;
    179.             line-height: 38px;
    180.             text-align: center;
    181.             font-weight: bold;
    182.             color: #fff;
    183.             text-shadow: 1px 1px 1px #333;
    184.             border-radius: 5px;
    185.             position: relative;
    186.             overflow: hidden;
    187.             border: 1px solid #64c878;
    188.             box-shadow: 0 1px 2px #b9ecc4 inset, 0 -1px 0 #6c9f76 inset, 0 -2px 3px #b9ecc4 inset;
    189.             background: -webkit-linear-gradient(top, #90dfa2, #84d494);
    190.             background: -moz-linear-gradient(top, #90dfa2, #84d494);
    191.             background: linear-gradient(top, #90dfa2, #84d494);
    192.         }
    194.         button:hover {
    195.             background: -webkit-linear-gradient(top, #aaebb9, #82d392);
    196.             background: -moz-linear-gradient(top, #aaebb9, #82d392);
    197.             background: linear-gradient(top, #aaebb9, #82d392);
    198.         }
    199.     </style>
    200. </body>
    202. </html>