console
const SMALL_LETTERS = 'abcdefghijklmnopqrstuvwxyz';
const DEFAULT_COUNT = 26;
const generateLetters = function (min = 'a', max = 'z') {
let maxIdx = SMALL_LETTERS.indexOf(max.toLowerCase());
let minIdx = SMALL_LETTERS.indexOf(min.toLowerCase());
let _small_letters = SMALL_LETTERS.substring(minIdx, maxIdx + 1);
return _small_letters.toUpperCase().concat(_small_letters);
};
const IS_BIGGER_LETTER = function (s) {
return SMALL_LETTERS.toUpperCase().includes(s);
}
const myContainer = new Vue({
el: "#my_container",
data: {
isBegin: false,
count: DEFAULT_COUNT,
minLetter: 'a',
maxLetter: 'z',
totalLetters: '',
letters: {}
},
methods: {
_getRandomLetter: function (charters = this.totalLetters) {
return charters.charAt(Math.floor(Math.random() * charters.length));
},
resetLetters: function () {
this.totalLetters = '';
this.isBegin = false;
this.count = DEFAULT_COUNT;
this.maxLetter = 'z';
this.minLetter = 'a';
this.letters = {};
},
nextLetter: function () {
if (!this.isBegin) {
this.totalLetters = generateLetters(this.minLetter, this.maxLetter);
this.isBegin = true;
}
if (Object.keys(this.letters).length == this.count) {
alert('已完成');
return;
}
if (this.totalLetters.length < 1) {
alert('没更多的字母了');
return;
}
let s = this._getRandomLetter();
if (!(s in this.letters)) {
this.letters[s] = IS_BIGGER_LETTER(s);
this.totalLetters = this.totalLetters.replace(s, '');
this.letters = Object.assign({}, this.letters);
}
}
}
})
<div id="my_container">
<div class="field">
<label for="letter_count">个数:</label><input id="letter_count" max="2" type="text"
:disabled="isBegin" v-model="count" />
</div>
<div class="field">
<label for="min_letter">最小字母:</label><input id="min_letter" max="1" type="text"
:disabled="isBegin" v-model="minLetter" />
</div>
<div class="field">
<label for="max_letter">最大字母:</label><input id="max_letter" max="1" type="text"
:disabled="isBegin" v-model="maxLetter" />
</div>
<div class="btn-container">
<input type="button" v-on:click="nextLetter" value="下一个" />
<input type="reset" value="重置" v-on:click="resetLetters" />
</div>
<article>
<div id="letters">
<ol>
<li v-for="k in Object.keys(letters)"
v-bind:class="letters[k]?'big_letter':'small_letter'">
{{ k }}
</li>
</ol>
</div>
</article>
</div>
body {
text-align: center;
font-size: 120%;
}
.btn-container {
margin: 0 auto;
}
.btn-container input {
margin: 1rem;
width: 6rem;
line-height: 3rem;
height: 3rem;
}
li {
line-height: 2rem;
}
li.big_letter {
color: red;
}
li.small_letter {
color: blue;
}
.field input {
padding: 3px 1rem;
font-size: 100%;
width: 3rem;
}
input#max_letter,
input#min_letter {
margin-top: 1rem;
}