js26个字母速记代码更新

Html

Css


     


    
    
        
            
            
        
        
        
    
    
         

        
    


    
    
        1. 请选出该音标对应的字母
    
    
        
                    I. 
                
        
                    II. 
                
        
                    II. 
                
        
                    VI.

* {
	margin:0;
}
#main {
	width:60%;
	position:relative;
	left:calc(50% - 30%);
	text-align:center;
	display:none;
}
.main_Car {
	width:200px;
	height:250px;
	border:1px solid rgba(225,0,255,0.295);
	margin:0 auto;
	margin-top:20px;
	overflow:hidden;
	z-index:1;
}
.mainLoad {
	width:140%;
	z-index:-1;
	height:122%;
	background-color:rgba(216,168,135,0.74);
	position:relative;
	transition:all 0.5s;
	top:-11%;
	left:-20%;
	transform:rotate(10deg)
}
.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%;
	transition:all 0.5s;
	background-color:rgb(36,38,143);
}
#mainSelect {
	width:60%;
	min-width:500px;
	position:relative;
	left:calc(50% - 30%);
	text-align:center;
	padding:20px;
	display:none;
}
#mainSelect .select {
	width:300px;
	margin:0 auto;
	display:block;
	text-align:left;
}
#mainSelect head {
	font-weight:bold;
}
#mainSelect .select label {
	display:block;
	text-align:left;
	padding:10px;
}

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: '/e:/',
    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 oneTopic() {

var mainLoad = document.querySelector('.mainLoad')
    var main = document.getElementById('main')
    var dirty = document.getElementById('dirty')
    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 next = document.querySelector('#next')
    var playAudio = document.querySelector('#playAudio')
    var main_Car = document.querySelector('.main_Car')
    var letterDan = ''
    var isNext = false
    var isRun = false
    var i = 3 // 每一个音标停留的时间

main.style.display = 'block'

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, j = 25; i < EnglishBiao.length; i++, j--) {
            letterDan = EnglishBiao[i]
            var exoive = (j / 26) * 122
            mainLoad.style.height = exoive + '%'
            text.innerText = EnglishKey[EnglishBiao[i]]
            isNext = await asyncCall(EnglishBiao[i])
            isNext = !isNext
        }
        letterDan = ''
        isRun = false
        text.innerText = ''
        startIs.innerText = '开始'
        start()
    }

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 < 0) {
                    playAudio.src = '../audio/' + dan.toLowerCase() + '.mp3'
                    playAudio.play()
                    load_time.style.width = 100 + '%'
                    zi.innerText = ''
                    window.clearInterval(inte)
                    resolve(true)
                }
                a--
            }, 1000);
        })
    }

startIs.onclick = start
    dirty.onclick = randomList
    next.onclick = () => isNext = true

main_Car.onclick = (() => {
        if (!letterDan) return
        playAudio.src = '../audio/' + letterDan.toLowerCase() + '.mp3'
        // console.log(playAudio.currentSrc)
        playAudio.play()
    })
}

function twoTopic() {
    var twoMain = document.getElementById('mainSelect')
    var twoStart = document.getElementById('twoStart')
    var twoNext = document.getElementById('twoNext')
    var radio = document.querySelectorAll('#mainSelect input[type=radio]')
    var titleTwo = document.querySelector('#titleTwo')
    isRun = false

twoMain.style.display = 'block'

function twoStarts() {

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)
        }

for (var i = 0; i < radio.length; i++) {
            radio[i].addEventListener('change', changeRadio, false)
        }

function changeRadio(e) {
            var cc = document.querySelector('#mainSelect input[type=radio]:checked')
        }

randomList()

async function startGame() {
            for (var i = 0; i < EnglishBiao.length; i++) {
                titleTwo.innerText = (i + 1) + '. 请选出该英标对应的字母；“' + EnglishKey[EnglishBiao[i]] + '”'
                var rand1 = Math.floor(Math.random() * 4)

var RightRes = document.createElement('p')
                RightRes.innerText = EnglishBiao[i]
                radio[rand1].append(RightRes)
                console.log(rand1)

for (var j = 0; j < 4; j++) {
                    if (rand1 != i) {
                        var rr = Math.floor(Math.random * 26)
                        // var rrText = document.createElement('p')
                        // rrText.innerText = EnglishBiao[rr]
                        // radio[i].attr(EnglishBiao[rr])
                    }
                }
                var resolve = await TwoloadTime()
            }
        }

function TwoloadTime() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(true)
                }, 2000)
            })
        }

startGame()

}

function twoNexts() {

}

twoStart.onclick = twoStarts
}

// 第一
oneTopic()
// twoTopic()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js26个字母速记代码更新



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

更新时间：2020-07-20 09:37:31
异步编程，纯js与css交互有语音

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

010

相关代码

js26个字母速记代码更新

最新