Skip to content

Commit 386233d

Browse files
author
luo
committed
代码格式调整
1 parent 1697d91 commit 386233d

File tree

1 file changed

+53
-73
lines changed

1 file changed

+53
-73
lines changed

‎src/index.js‎

Lines changed: 53 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -34,27 +34,14 @@ class Vcode extends React.Component {
3434
fontSizeMin: 22, // 字体尺寸最小值
3535
fontSizeMax: 26, // 字体尺寸最大值
3636
colors: [ // 字可能的颜色
37-
'#117cb3',
38-
'#f47b06',
39-
'#202890',
40-
'#db1821',
41-
'#b812c2',
37+
'#117cb3', '#f47b06', '#202890', '#db1821', '#b812c2',
4238
],
4339
fonts: [ // 可能的字体
44-
'Times New Roman',
45-
'Georgia',
46-
'Serif',
47-
'sans-serif',
48-
'arial',
49-
'tahoma',
50-
'Hiragino Sans GB',
40+
'Times New Roman', 'Georgia', 'Serif', 'sans-serif', 'arial', 'tahoma', 'Hiragino Sans GB',
5141
],
5242
lines: 8, // 生成多少根线
5343
lineColors: [ // 线可能的颜色
54-
'#7999e1',
55-
'#383838',
56-
'#ec856d',
57-
'#008888',
44+
'#7999e1', '#383838', '#ec856d', '#008888',
5845
],
5946
lineHeightMin: 1, // 线的粗细最小值
6047
lineHeightMax: 1, // 线的粗细最大值
@@ -94,36 +81,64 @@ class Vcode extends React.Component {
9481
this.onDraw(this.props.value);
9582
}
9683

97-
/** 随机生成验证码 **/
84+
/** 随机生成一个Code的CSS样式 **/
85+
codeCss() {
86+
return [
87+
`font-size:${this.randint(this.state.options.fontSizeMin,
88+
this.state.options.fontSizeMax)}px`,
89+
`color:${this.state.options.colors[this.randint(0,
90+
this.state.options.colors.length - 1)]}`,
91+
'position: absolute',
92+
`left:${this.randint(uW * i, ((uW * i) + uW) - (uW / 2))}px`,
93+
'top:50%',
94+
`transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
95+
`-o-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
96+
`-ms-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
97+
`-moz-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
98+
`-webkit-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
99+
`font-family:${this.state.options.fonts[this.randint(0,
100+
this.state.options.fonts.length - 1)]}`,
101+
'font-weight:bold',
102+
'z-index:2',
103+
].join(';');
104+
}
105+
106+
/** 随机生成一条线的CSS样式 **/
107+
lineCss() {
108+
return [
109+
'position: absolute',
110+
`opacity:${this.randint(3, 8) / 10}`,
111+
`width:${this.randint(this.state.options.lineWidthMin, this.state.options.lineWidthMax)}px`,
112+
`height:${this.randint(this.state.options.lineHeightMin,
113+
this.state.options.lineHeightMax)}px`,
114+
`background:${this.state.options.lineColors[this.randint(0,
115+
this.state.options.lineColors.length - 1)]}`,
116+
`left:${this.randint(-this.state.options.lineWidthMin/2, this.state.width)}px`,
117+
`top:${this.randint(0, this.state.height)}px`,
118+
`transform:rotate(${this.randint(-30, 30)}deg)`,
119+
`-o-transform:rotate(${this.randint(-30, 30)}deg)`,
120+
`-ms-transform:rotate(${this.randint(-30, 30)}deg)`,
121+
`-moz-transform:rotate(${this.randint(-30, 30)}deg)`,
122+
`-webkit-transform:rotate(${this.randint(-30, 30)}deg)`,
123+
`font-family:${this.state.options.fonts[this.randint(0,
124+
this.state.options.fonts.length - 1)]}`,
125+
`font-weight:${this.randint(400, 900)}`,
126+
].join(';');
127+
}
128+
98129
onDraw(value) {
99130
let c = ''; // 存储生成的code
100131
const div = document.getElementById(this.state.id);
101132
div.innerHTML = '';
133+
102134
/** 生成好看的code **/
103-
console.log(this.props.value);
135+
const codeCss = this.codeCss();
104136

105137
if(value !== undefined) { // 如果父级指定了要生成的code
106138
const uW = this.state.width / value.length; // 每个字符占的宽度
107139
for (let i = 0; i < value.length; i++) {
108140
const dom = document.createElement('span');
109-
dom.style.cssText = [
110-
`font-size:${this.randint(this.state.options.fontSizeMin,
111-
this.state.options.fontSizeMax)}px`,
112-
`color:${this.state.options.colors[this.randint(0,
113-
this.state.options.colors.length - 1)]}`,
114-
'position: absolute',
115-
`left:${this.randint(uW * i, ((uW * i) + uW) - (uW / 2))}px`,
116-
'top:50%',
117-
`transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
118-
`-o-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
119-
`-ms-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
120-
`-moz-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
121-
`-webkit-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
122-
`font-family:${this.state.options.fonts[this.randint(0,
123-
this.state.options.fonts.length - 1)]}`,
124-
'font-weight:bold',
125-
'z-index:2',
126-
].join(';');
141+
dom.style.cssText = codeCss;
127142
const temp = value[i];
128143
dom.innerHTML = temp;
129144
c = `${c}${temp}`;
@@ -133,24 +148,7 @@ class Vcode extends React.Component {
133148
const uW = this.state.width / this.state.len; // 每个字符占的宽度
134149
for (let i = 0; i < this.state.len; i++) {
135150
const dom = document.createElement('span');
136-
dom.style.cssText = [
137-
`font-size:${this.randint(this.state.options.fontSizeMin,
138-
this.state.options.fontSizeMax)}px`,
139-
`color:${this.state.options.colors[this.randint(0,
140-
this.state.options.colors.length - 1)]}`,
141-
'position: absolute',
142-
`left:${this.randint(uW * i, ((uW * i) + uW) - (uW / 2))}px`,
143-
'top:50%',
144-
`transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
145-
`-o-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
146-
`-ms-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
147-
`-moz-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
148-
`-webkit-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
149-
`font-family:${this.state.options.fonts[this.randint(0,
150-
this.state.options.fonts.length - 1)]}`,
151-
'font-weight:bold',
152-
'z-index:2',
153-
].join(';');
151+
dom.style.cssText = codeCss;
154152
const temp = this.state.options.codes[(Math.round(Math.random() * (this.state.options.codes.length - 1)))];
155153
dom.innerHTML = temp;
156154
c = `${c}${temp}`;
@@ -161,25 +159,7 @@ class Vcode extends React.Component {
161159
// 生成好看的线条
162160
for (let i = 0; i < this.state.options.lines; i++) {
163161
const dom = document.createElement('div');
164-
dom.style.cssText = [
165-
'position: absolute',
166-
`opacity:${this.randint(3, 8) / 10}`,
167-
`width:${this.randint(this.state.options.lineWidthMin, this.state.options.lineWidthMax)}px`,
168-
`height:${this.randint(this.state.options.lineHeightMin,
169-
this.state.options.lineHeightMax)}px`,
170-
`background:${this.state.options.lineColors[this.randint(0,
171-
this.state.options.lineColors.length - 1)]}`,
172-
`left:${this.randint(-this.state.options.lineWidthMin/2, this.state.width)}px`,
173-
`top:${this.randint(0, this.state.height)}px`,
174-
`transform:rotate(${this.randint(-30, 30)}deg)`,
175-
`-o-transform:rotate(${this.randint(-30, 30)}deg)`,
176-
`-ms-transform:rotate(${this.randint(-30, 30)}deg)`,
177-
`-moz-transform:rotate(${this.randint(-30, 30)}deg)`,
178-
`-webkit-transform:rotate(${this.randint(-30, 30)}deg)`,
179-
`font-family:${this.state.options.fonts[this.randint(0,
180-
this.state.options.fonts.length - 1)]}`,
181-
`font-weight:${this.randint(400, 900)}`,
182-
].join(';');
162+
dom.style.cssText = this.lineCss();
183163
div.appendChild(dom);
184164
}
185165
if (this.props.onChange) {

0 commit comments

Comments
 (0)