youdao quikly control

js

Element.prototype.trigger = function(event_name){
    var event = document.createEvent('event')
    event.initEvent(event_name,true,true)
    this.dispatchEvent(event)
}
var elements = document.getElementsByClassName('controlBtn')
var current_btn = 0
var panel_container = document.createElement('div')
function optionFactor(el,index){

    var container = document.createElement('div')
    
    var input = document.createElement('input')
    input.name = 'audio'
    input.type  = 'radio'
    value = index
    input.onclick = function(){
        console.log(index);
        window.current_btn = index
        
    }
    var label = document.createElement("label")
    
    label.innerHTML = index
    container.appendChild(input)
    container.appendChild(label)
    
    return container
}
Array.prototype.forEach.call(elements,(element,index)=>{
    panel_container.appendChild(optionFactor(element,index))
})

panel_container.style.position = 'fixed'
panel_container.style.right = '0'
panel_container.style.top = '0'
panel_container.style.background = '#000000'
panel_container.style.color = '#ffffff'
panel_container.style.width = '150px'
panel_container.style.height = '200px'
panel_container.style.display = 'flex'
panel_container.style.flexDirection = 'column'
document.body.appendChild(panel_container)
document.documentElement.onkeydown = function(event){
    console.log('event',event.keyCode)
    if(event.keyCode === 32){
    event.preventDefault()

        elements[Math.abs(current_btn) || 0].trigger('click')
    }
    if(event.keyCode === 38){
        event.preventDefault()

        current_btn = (current_btn + 1) % elements.length
    }
    if(event.keyCode === 40){
        event.preventDefault()
        current_btn = (current_btn - 1) % elements.length
    }
    console.log(current_btn);
    
}