js 实现26个字母音标速记代码

代码描述：给26个字母数组随机打乱，然后通过javript异步编程将26个字母以时间段以此显示，可以选择下一题，有时间进度条

<div id="main">
    <button onclick="randomList()">打乱顺序</button> <br><br>
    <button id="startIs" onclick="start()">开始</button>
    <div class="main_Car">
        <div>
            <p id="text"></p>
            <p id="Zi"></p>
        </div>
        <div class="loadSty"></div>
    </div>
    <div>
        <span class="text_time"></span> <br>
        <button onclick="isNext=true">下一题</button>
    </div>
</div>

* {
	margin:0;
}
#main {
	width:60%;
	min-width:500px;
	position:relative;
	left:calc(50% - 30%);
	text-align:center;
}
.main_Car {
	width:200px;
	height:250px;
	border:1px solid rgba(225,0,255,0.082);
	margin:0 auto;
	margin-top:20px;
}
.main_Car>div:first-child {
	position:absolute;
	width:200px;
	top:calc(50% - 46px);
}
#text {
	font-size:40px;
	font-weight:bold;
}
.loadSty {
	position:relative;
	top:calc(100% - 2px);
	height:2px;
	width:100%;
	background-color:chartreuse;
}

var main = document.getElementById('main')
var text = document.getElementById('text')
var text_time = document.querySelector('.text_time')
var load_time = document.querySelector('.loadSty')
var zi = document.querySelector('#Zi')
var startIs = document.querySelector('#startIs')
var isNext = false
var isRun = false
var i = 10

var EnglishBiao = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

var orderArray = []

var EnglishKey = {
    A: '/ei/',
    B: '/bi:/',
    C: '/si:/',
    D: '/di:/',
    E: '/i:/',
    F: '/ef/',
    G: '/d:i:/',
    H: '/eit∫/',
    I: '/a:/',
    J: '/d:e:/',
    K: '/ke:/',
    L: '/el/',
    M: '/em/',
    N: '/en/',
    O: '/::/',
    P: '/pi:/',
    Q: '/kju:/',
    R: '/::/',
    S: '/es/',
    T: '/ti:/',
    U: '/ju:/',
    V: '/vi:/',
    W: '/′d∧blju:/',
    X: '/eks/',
    Y: '/wa:/',
    Z: '/zi://zed/'
}


function randomList() {
    if (isRun) return
    orderArray = EnglishBiao
    for (var i = 0, j = EnglishBiao.length; i < EnglishBiao.length; i++, j--) {
        var random = Math.floor(Math.random() * j) + i
        var temp = EnglishBiao[random]
        EnglishBiao[random] = EnglishBiao[i]
        EnglishBiao[i] = temp
    }
    console.log(EnglishBiao)
}

async function start() {
    if (isRun) return
    startIs.innerText = '执行中'
    isNext = false
    isRun = true
    for (var i = 0; i < EnglishBiao.length; i++) {
        text.innerText = EnglishKey[EnglishBiao[i]]
        isNext = await asyncCall(EnglishBiao[i])
        isNext = !isNext
    }
    isRun = false
    text.innerText = ''
    startIs.innerText = '开始'
}

function asyncCall(dan) {
    return new Promise(resolve => {
        var a = i
        if (isNext) resolve(true)
        var inte = setInterval(() => {
            var zhi = (a / i) * 100
            load_time.style.width = zhi + '%'
            if ((i / 3) >= a) {
                zi.innerText = dan
            }
            if (isNext || a < 1) {
                load_time.style.width = 100 + '%'
                zi.innerText = ''
                window.clearInterval(inte)
                resolve(true)
            }
            a--
        }, 1000);
    })
}