1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
7+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
8+ < link rel ="stylesheet " href ="./assets/global.css ">
9+
10+
11+ < style >
12+ .union-lotto {
13+ display : flex;
14+ flex-direction : column;
15+ row-gap : 5px ;
16+ }
17+
18+ .group-item {
19+ display : flex;
20+ column-gap : 5px ;
21+ }
22+
23+ .red-ball {
24+ border-radius : 50% ;
25+ width : 50px ;
26+ height : 50px ;
27+ background-color : # ff4141 ;
28+ display : flex;
29+ align-items : center;
30+ justify-content : center;
31+ font-size : 20px ;
32+ font-weight : bold;
33+ }
34+
35+ .blue-ball {
36+ border-radius : 50% ;
37+ width : 50px ;
38+ height : 50px ;
39+ background-color : # 416dff ;
40+ display : flex;
41+ align-items : center;
42+ justify-content : center;
43+ font-size : 20px ;
44+ font-weight : bold;
45+ }
46+ </ style >
47+ </ head >
48+
49+ < body >
50+ < div class ="union-lotto ">
51+ </ div >
52+
53+
54+
55+ < script type ="module ">
56+ let unionLottoDOM = document . querySelector ( '.union-lotto' )
57+
58+ import { Randoms } from "https://gcore.jsdelivr.net/npm/@3r/tool/lib/randoms.js" ;
59+
60+ for ( let i = 0 ; i < 5 ; i ++ ) {
61+ const groupItemDOM = document . createElement ( 'div' )
62+ groupItemDOM . classList . add ( 'group-item' )
63+ let redDict = { }
64+ let redList = [ ]
65+
66+ for ( let j = 0 ; j < 6 ; j ++ ) {
67+ let redNum = Randoms . int ( 1 , 34 )
68+ if ( redDict [ redNum ] ) {
69+ j -- ;
70+ continue ;
71+ }
72+ redDict [ redNum ] = true ;
73+ redList . push ( redNum )
74+ }
75+
76+ let blueNum = Randoms . int ( 1 , 17 )
77+ redList . sort ( ( a , b ) => a - b )
78+ redList . forEach ( red => {
79+ const redBallDOM = document . createElement ( 'div' )
80+ redBallDOM . classList . add ( 'red-ball' )
81+ redBallDOM . textContent = red
82+ groupItemDOM . appendChild ( redBallDOM )
83+ } )
84+
85+ const blueBallDOM = document . createElement ( 'div' )
86+ blueBallDOM . classList . add ( 'blue-ball' )
87+ blueBallDOM . textContent = blueNum
88+ groupItemDOM . appendChild ( blueBallDOM )
89+ unionLottoDOM . appendChild ( groupItemDOM )
90+ }
91+
92+ </ script >
93+
94+
95+ </ body >
96+
97+ </ html >
0 commit comments