<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .select-box-wrapper { width: 550px; margin: 0 auto; } .select-box { width: 100%; border-bottom: 1px solid #ddd; } .select-title { position: relative; bottom: 10px; } .select-box-inner { display: inline-block; width: 67%; } .select-control { display: inline-block; width: 22%; } .select-control-button { float: left; width: 50px; height: 25px; border-radius: 3px; background: #ffa0f5; color: #fff; text-align: center; line-height: 25px; margin: 5px; font-size: 12px; cursor: pointer; } .select-box-inner ul { width: 90%; padding: 0; margin: 0; display: inline-block; overflow: hidden; } .select-box-inner ul li { list-style: none; float: left; width: 23px; height: 23px; border-radius: 23px; background: #ffa07a; color: #fff; text-align: center; line-height: 23px; margin: 5px; font-size: 12px; cursor: pointer; } #vue_main .select-balls-active { background: #f00; } .control-box { margin: 20px 0; width: 100%; } .control-button { width: 95px; height: 30px; background: #ffa0b7; border-radius: 5px; line-height: 30px; text-align: center; display: inline-block; margin: 0 20px; color: #fff; cursor: pointer; } .control-button-highlight { background: #ffa09c; } .extend-button { background: #105; } .data-show { width: 752px; margin: 0 auto; padding: 10px; min-height: 200px; border: 1px solid #ddd; } .data-stat { width: 752px; margin: 0 auto; padding: 10px; min-height: 20px; } </style> </head> <body> <div id="vue_main" v-cloak> <div class="select-box-wrapper"> <div class="select-box"> <label class="select-title">胆码</label> <div class="select-box-inner"> <ul> <li v-for="n in balls_num[0]" :class="{ 'select-balls-active': select_balls_active[0][n-1] == 1 }" v-on:click="select_balls_click(0,n-1)">{{ n-1 }}</li> </ul> </div> <div class="select-control"> <div class="select-control-button" v-on:click="select_balls_click_multi(0,0)">全选</div> <div class="select-control-button" v-on:click="select_balls_click_multi(1,0)">反选</div> </div> </div> <div class="select-box"> <label class="select-title">和值</label> <div class="select-box-inner"> <ul> <li v-for="n in balls_num[1]" :class="{ 'select-balls-active': select_balls_active[1][n-1] == 1 }" v-on:click="select_balls_click(1,n-1)">{{ n-1 }}</li> </ul> </div> <div class="select-control"> <div class="select-control-button" v-on:click="select_balls_click_multi(0,1)">全选</div> <div class="select-control-button" v-on:click="select_balls_click_multi(1,1)">反选</div> </div> </div> <div class="select-box"> <label class="select-title">跨度</label> <div class="select-box-inner"> <ul> <li v-for="n in balls_num[2]" :class="{ 'select-balls-active': select_balls_active[2][n-1] == 1 }" v-on:click="select_balls_click(2,n-1)">{{ n-1 }}</li> </ul> </div> <div class="select-control"> <div class="select-control-button" v-on:click="select_balls_click_multi(0,2)">全选</div> <div class="select-control-button" v-on:click="select_balls_click_multi(1,2)">反选</div> </div> </div> <div class="select-box"> <label class="select-title">百位</label> <div class="select-box-inner"> <ul> <li v-for="n in balls_num[3]" :class="{ 'select-balls-active': select_balls_active[3][n-1] == 1 }" v-on:click="select_balls_click(3,n-1)">{{ n-1 }}</li> </ul> </div> <div class="select-control"> <div class="select-control-button" v-on:click="select_balls_click_multi(0,3)">全选</div> <div class="select-control-button" v-on:click="select_balls_click_multi(1,3)">反选</div> </div> </div> <div class="select-box"> <label class="select-title">十位</label> <div class="select-box-inner"> <ul> <li v-for="n in balls_num[4]" :class="{ 'select-balls-active': select_balls_active[4][n-1] == 1 }" v-on:click="select_balls_click(4,n-1)">{{ n-1 }}</li> </ul> </div> <div class="select-control"> <div class="select-control-button" v-on:click="select_balls_click_multi(0,4)">全选</div> <div class="select-control-button" v-on:click="select_balls_click_multi(1,4)">反选</div> </div> </div> <div class="select-box"> <label class="select-title">个位</label> <div class="select-box-inner"> <ul> <li v-for="n in balls_num[5]" :class="{ 'select-balls-active': select_balls_active[5][n-1] == 1 }" v-on:click="select_balls_click(5,n-1)">{{ n-1 }}</li> </ul> </div> <div class="select-control"> <div class="select-control-button" v-on:click="select_balls_click_multi(0,5)">全选</div> <div class="select-control-button" v-on:click="select_balls_click_multi(1,5)">反选</div> </div> </div> <div class="control-box"> <div class="control-button" v-on:mouseenter="control_button_mouseenter(i)" v-on:mouseleave="control_button_mouseleave()" v-on:click="control_button_click(i)" :class="{ 'control-button-highlight': control_button_highlight == i }" v-for="(v,k,i) in control_button_text" >{{ v }}</div> <div class="control-button extend-button" v-on:click="clear_button_click()">清空条件</div> </div> </div> <div class="data-show" id="data_show"> {{ ajax_data }} </div> <div class="data-stat"> <span v-if="ajax_data" >共{{ data_stat }}注</span> <div id="data_copy" data-clipboard-target="#data_show" class="control-button extend-button" v-on:click="copy_button_click()">复制号码</div> </div> </div> <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.5/vue.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/clipboard.js/1.2.0/clipboard.min.js"></script> <script type="text/javascript"> var vue_main = new Vue({ el:'#vue_main', data:{ ajax_data:null, data_stat:0, compare_arrs:{ 0:[], 1:[], 2:[], 3:[], 4:[], 5:[] }, balls_num:{ 0:10, 1:28, 2:10, 3:10, 4:10, 5:10 }, control_button_text:{ 0:'初级', 1:'中级', 2:'高级' }, select_balls_active:{ 0:[], 1:[], 2:[], 3:[], 4:[], 5:[] }, control_button_highlight: null, control_button_active: null }, created(){ // 给样式控制数组中的每一项赋初始值 this.select_balls_active_maker(); this.compare_arrs_maker(); }, methods:{ select_balls_active_maker(){ for(var i in this.select_balls_active){ for(var j = 0;j < this.balls_num[i];j++){ this.select_balls_active[i].push(1); } } }, // 获取用于比对过滤的数组 compare_arrs_maker:function(){ var _that = this; for(var i = 0;i < 6;i++){ this.compare_arrs[i] = []; $.each(this.select_balls_active[i],function(index, el) { if(el){ _that.compare_arrs[i].push(index); } }); } }, // 使用数组对获取数据进行过滤 data_filter:function(data){ var _that = this; // 多层过滤后获得的数组转字符串定义 var data_text = ''; // 过滤后获得的数组定义 var data_filter = []; // 单个数组元素分解为字符数组 var el_arr = []; // 将数据字符串转换为数组 var data_arr = data.split(' '); $.each(data_arr,function(index, el) { // 过滤判定数组 var filter_arr = []; el_arr = el.split(''); // 对el_arr进行过滤 for(let i = 0;i < 6;i++){ var filter = []; // 只有存在选定的比对数组才参与过滤 if(_that.compare_arrs[i].length){ // 对每一种进行遍历 如果有一个满足条件 则该数据通过该层判定 $.each(_that.compare_arrs[i],function(_index, _el) { filter.push(_that.filter_maker(i,el_arr,_el)); }); // 需要将该部分写在外层if条件判断语句之内 获得理想判定数组 if(filter.indexOf(1) != -1){ filter_arr.push(1); }else{ filter_arr.push(0); } } } if(filter_arr.indexOf(0) == -1){ data_filter.push(el); } }); function uniq(array){ var temp = []; for(var i = 0; i < array.length; i++) { // 如果当前数组的第i项在当前数组中第一次出现的位置是i 才存入数组 否则代表是重复的 if(array.indexOf(array[i]) == i){ temp.push(array[i]) } } return temp; } data_text = uniq(data_filter).join(' '); this.data_stat = uniq(data_filter).length; return data_text; }, filter_maker:function(i,arr,el){ var _that = this; // 其中i是不同的过滤方式 arr需要过滤的数组的单个元素 el是用于比对的过滤数组元素 // i的值从0到5分别对应不同的过滤方式 switch (i) { // 胆码 case 0: if(arr.indexOf(''+el) != -1){ return 1; }else{ return 0; } break; // 和值 case 1: if(parseInt(arr[0]) + parseInt(arr[1]) + parseInt(arr[2]) == el){ return 1; }else{ return 0; } break; // 跨度 case 2: function sortNumber(a,b){ return a - b; } var arr_sort = arr.sort(sortNumber); if(arr_sort[2] - arr_sort[0] == el){ return 1; }else{ return 0; } break; // 百位 case 3: if(arr[0] == el){ return 1; }else{ return 0; } break; // 十位 case 4: if(arr[1] == el){ return 1; }else{ return 0; } break; // 个位 case 5: if(arr[2] == el){ return 1; }else{ return 0; } break; } }, // 点击球事件 select_balls_click:function(i,n){ if(this.select_balls_active[i][n]){ this.$set(this.select_balls_active[i],n,0); }else{ this.$set(this.select_balls_active[i],n,1); } this.compare_arrs_maker(); }, // 全选和反选点击 select_balls_click_multi:function(type,i){ if(type){ for(var j = 0;j < this.select_balls_active[i].length;j++){ this.$set(this.select_balls_active[i],j,0) } }else{ for(var j = 0;j < this.select_balls_active[i].length;j++){ this.$set(this.select_balls_active[i],j,1) } } this.compare_arrs_maker(); }, control_button_mouseenter:function(i){ this.control_button_highlight = i; }, control_button_mouseleave:function(){ this.control_button_highlight = null; }, control_button_click:function(i){ var _that = this; this.control_button_active = i; var n = i + 1; // ajax获取所需数据 这里用固定数组模拟三种级别数据 var list = { 1:'002 003 012 013 015 016 017 021 022 023 024 025 031 032 033 034 035 036 037 042 045 051 053 054 056 057 058 061 062 063 064 065 067 071 073 074 075 076 078 079 083 085 086 087 093 096 097 102 103 105 106 107 112 113 121 122 124 125 131 132 133 134 135 137 142 145 150 152 153 154 156 157 158 162 163 164 165 170 173 174 175 176 178 179 183 185 186 187 193 196 197 200 201 203 204 205 206 207 208 209 210 211 213 214 215 216 217 218 219 220 221 223 224 225 230 231 233 234 235 236 237 238 239 240 241 243 244 245 246 247 248 249 250 251 253 255 256 257 258 259 260 261 263 264 265 267 268 269 270 271 273 276 278 279 280 283 286 287 289 290 291 293 295 296 297 298 300 301 303 304 305 306 307 308 309 310 311 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 334 335 336 340 341 342 343 344 345 346 347 348 349 350 351 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 374 375 376 378 379 380 381 384 385 386 387 389 390 391 394 395 396 397 398 403 405 406 407 413 415 416 417 420 421 423 424 425 426 427 428 429 430 431 433 434 435 436 437 438 439 443 445 446 447 450 451 453 454 455 456 457 458 459 460 461 463 464 465 466 467 468 469 470 471 473 474 475 476 477 478 479 483 485 486 487 493 495 496 497 501 503 504 506 507 508 510 513 514 516 517 518 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 541 542 543 544 545 546 547 548 549 553 554 556 557 558 561 562 563 564 565 566 567 568 569 570 571 573 574 575 576 577 578 579 580 581 583 584 585 586 587 588 589 593 594 596 597 598 601 602 603 604 605 607 608 609 610 612 613 614 615 617 618 619 621 623 624 625 627 631 632 633 634 635 636 637 638 641 642 643 644 645 647 650 651 653 654 655 656 657 658 659 663 664 665 667 670 671 673 674 675 676 677 678 679 680 681 683 684 685 686 687 688 689 690 691 693 694 695 696 697 698 699 701 702 703 704 705 706 708 709 710 712 713 714 715 716 718 719 721 723 724 725 731 732 734 735 736 741 742 743 744 745 750 751 753 754 755 756 757 758 759 761 762 763 764 765 766 767 774 775 776 778 779 780 781 783 784 785 786 787 788 789 790 791 793 794 795 796 797 798 799 803 805 806 807 812 813 815 816 817 821 823 824 825 826 827 831 832 834 835 836 837 839 842 843 845 846 847 850 851 853 854 855 856 857 858 859 861 862 863 864 865 866 867 868 869 870 871 873 874 875 876 877 878 879 885 886 887 893 895 896 897 903 906 907 913 916 917 920 921 923 924 925 926 927 928 930 931 932 934 935 936 937 938 942 943 945 946 947 953 954 956 957 958 960 961 962 963 964 965 966 967 968 969 970 971 973 974 975 976 977 978 979 983 985 986 987 996 997', 2:'015 016 017 024 025 033 034 035 036 037 045 053 054 056 057 058 062 063 064 065 067 071 073 074 075 076 078 079 083 085 086 087 093 096 097 105 106 107 124 125 134 135 137 145 154 156 157 158 163 164 165 173 174 175 176 178 179 183 185 186 187 193 196 197 204 205 206 207 208 209 213 214 215 216 217 218 219 223 224 225 233 234 235 236 237 238 239 244 245 246 247 248 249 253 255 256 257 258 259 263 264 265 267 268 269 271 273 276 278 279 283 286 287 289 291 293 295 296 297 298 303 304 305 306 307 308 309 313 314 315 316 317 318 319 321 322 323 324 325 326 327 328 329 332 334 335 336 343 344 345 346 347 348 349 353 354 355 356 357 358 359 361 362 363 364 365 366 367 368 369 371 374 375 376 378 379 381 384 385 386 387 389 391 394 395 396 397 398 403 405 406 407 413 415 416 417 421 423 424 425 426 427 428 429 431 433 434 435 436 437 438 439 443 445 446 447 451 453 454 455 456 457 458 459 461 463 464 465 466 467 468 469 471 473 474 475 476 477 478 479 483 485 486 487 493 495 496 497 501 503 504 506 507 513 514 516 517 518 521 522 523 524 525 526 527 528 529 531 532 533 534 535 536 537 538 539 541 542 543 544 545 546 547 548 549 553 554 556 557 558 561 562 563 564 565 566 567 568 569 571 573 574 575 576 577 578 581 583 584 585 586 587 593 594 596 601 602 603 604 605 612 613 614 615 617 621 623 624 625 627 631 632 633 634 635 636 637 638 641 642 643 644 645 647 651 653 654 655 656 657 658 659 663 664 665 667 671 673 674 675 676 677 681 683 684 685 686 691 693 694 695 701 702 703 704 705 712 713 714 715 716 721 723 724 725 731 732 734 735 736 741 742 743 744 745 751 753 754 755 756 757 758 761 762 763 764 765 766 767 774 775 776 781 783 784 785 791 793 794 803 812 813 815 821 823 824 825 826 831 832 834 835 836 837 842 843 845 846 847 851 853 854 855 856 857 861 862 863 864 865 866 871 873 874 875 893 903 913 921 923 924 925 931 932 934 935 936 942 943 945 946 947 953 954 956 961 962 963 964 965 971 973 974 983', 3:'015 016 025 033 035 036 037 045 053 054 056 057 062 063 064 065 067 073 075 076 105 106 124 134 137 156 157 158 163 164 165 173 175 176 183 185 186 205 206 207 214 216 217 218 225 235 237 238 239 245 247 248 249 253 255 257 258 259 267 268 269 271 273 276 278 279 283 286 287 289 293 295 296 297 298 303 305 306 307 314 316 317 318 325 327 328 329 336 346 348 349 356 358 359 361 363 364 365 366 368 369 371 378 379 381 384 385 386 387 389 394 395 396 397 398 405 406 413 416 421 425 427 428 429 431 436 438 439 457 459 461 463 467 469 475 476 483 493 495 496 501 503 504 506 507 516 517 518 522 523 524 525 527 528 529 532 536 538 539 542 547 549 558 561 563 568 571 574 578 581 583 585 586 587 593 594 601 602 603 604 605 612 613 614 615 617 621 627 631 633 634 635 636 638 641 643 647 651 653 658 663 671 674 681 683 685 693 694 702 703 705 712 713 715 716 721 723 724 725 731 732 742 745 751 754 758 761 762 764 783 785 793 812 813 815 821 823 824 825 826 831 832 834 835 836 837 842 843 851 853 855 856 857 861 862 863 865 873 875 893 923 924 925 932 934 935 936 942 943 945 946 953 954 962 963 964 973 983' }; _that.ajax_data = _that.data_filter(list[n]); }, clear_button_click:function(){ for(var k = 0;k < 6;k++){ for(var j = 0;j < this.select_balls_active[k].length;j++){ this.$set(this.select_balls_active[k],j,0) } } }, copy_button_click:function(){ var clipboard = new Clipboard('#data_copy'); clipboard.on('success', function(e) { }); clipboard.on('error', function(e) { }); } } }) </script> </body> </html>
页面效果如下图，可以通过条件的不同组合从数据来源中筛选出想要的3d号码
