hutao/reference/P01CentralControl/test/homePage.js

// | ------------------------------------------------------------
// | @版本: version 0.1
// | @创建人: 【Nie-x7129】
// | @E-mail: x71291@outlook.com
// | @所在项目: 2160
// | @文件描述: homePage.js -
// | @创建时间: 2024-01-13 20:57
// | @更新时间: 2024-01-13 20:57
// | @修改记录:
// | -*-*-*-  (时间--修改人--修改说明)  -*-*-*-
// | =
// | ------------------------------------------------------------
window.onload = () => {
    const body = document.body;
    let username, password

    // 开局提示
    const welcomeElement = document.createElement('div');
    body.append(welcomeElement);
    const welcomeText = `Welcome To XY.\nYou Are About To Enter The Top Management Interface.`;
    renderText(welcomeText, welcomeElement, () => {
        // 询问是否继续
        const askElement = document.createElement('div');
        body.append(askElement);
        const askText = 'Can Verify Your Identity Now? (Yes / No):'
        renderText(askText, askElement, () => {
            // 确认输入
            const answerElement = document.createElement('div');
            body.append(answerElement);
            inputText(answerElement, text => {
                const answer = text.toLowerCase()
                if(answer == 'y' || answer == 'yes'){
                    // 用户名提示
                    const userText = 'USERNAME: '
                    const usernameElement = document.createElement('div');
                    const userHeaderElement = document.createElement('span');
                    const userBodyElement = document.createElement('span');
                    body.append(usernameElement)
                    usernameElement.append(userHeaderElement)
                    usernameElement.append(userBodyElement)
                    renderText(userText, userHeaderElement, () => {
                        inputText(userBodyElement, usernameText => {
                            username = usernameText
                            // 密码提示
                            const passwdText = 'PASSWORD: '
                            const passwdElement = document.createElement('div');
                            const passwdHeaderElement = document.createElement('span');
                            const passwdBodyElement = document.createElement('span');
                            body.append(passwdElement)
                            passwdElement.append(passwdHeaderElement)
                            passwdElement.append(passwdBodyElement)
                            renderText(passwdText, passwdHeaderElement, () => {
                                inputText(passwdBodyElement, passwdText => {
                                    password = passwdText
                                    Entry()
                                }, null, true)
                            }, 0, 0)
                        }, null)
                    }, 0, 0)
                }else{
                    setTimeout(() => {
                        window.close()
                    }, 3000)
                    console.log('Window On Close in 3000ms!')
                    return;
                }
            }, true)
        }, 0, 0)
    })
}

function renderText(text, element, callback, startWait = 2000, endWait= 1000){
    const textElement = document.createElement('span');
    const cursorElement = document.createElement('span');
    cursorElement.classList.add('welecomeTextCursor');
    cursorElement.innerHTML = ' '

    element.append(textElement, cursorElement)
    const max = text.length
    let nowLetter = 1
    setTimeout(() => {
        const setTextInterval = setInterval(() => {
            const spanElement = document.createElement('span');
            const nowText = text[nowLetter - 1]
            if(nowText == ' '){
                spanElement.innerHTML = ' '
            }else{
                spanElement.innerText = nowText
            }

            spanElement.classList.add('welecomeText');
            textElement.append(spanElement)
            if(nowLetter == max){
                clearInterval(setTextInterval)
                setTimeout(() => {
                    cursorElement.remove()
                    callback()
                }, endWait)
            }else{
                nowLetter++
            }
        }, 30)
    }, startWait)

}

function inputText(element, callback, letter, passwd){
    const textElement = document.createElement('span');
    const cursorElement = document.createElement('span');
    cursorElement.classList.add('inputTextCursor');
    cursorElement.innerHTML = ' ';

    element.append(textElement, cursorElement)

    const store = {
        key: '',
        string: ''
    }

    document.body.addEventListener('keyup', getKeyWord)
    if(!letter){
        letter = 'QWERTYUIOPASDFGHJKLZXCVBNM1234567890*@#&' + 'QWERTYUIOPASDFGHJKLZXCVBNM'.toLowerCase().split('')
    }else{
        letter = ['Y','y','E','e','S','s','N','n','O','o']
    }
    function getKeyWord(){
        if(letter && letter.includes(event.key)){
            store.key = event.key;
            store.string = store.string + event.key
        }
        if(event.key == 'Backspace'){
            store.string = store.string.slice(0, store.string.length - 1)
        }
        if(event.key == 'Enter'){
            if(store.string.length==0){

            }else{
                cursorElement.remove()
                callback(store.string)
                document.body.removeEventListener('keyup', getKeyWord)
            }
        }
        if(passwd){
            textElement.innerText = new Array(store.string.length).fill('*').join('')
        }else{
            textElement.innerText = store.string
        }
    }
}


function Entry(){
    if(true){
        const entryMessageElement = document.createElement('div')
        document.body.append(entryMessageElement)
        renderText('About To Enter The System!', entryMessageElement, () => {
            const loadingElement = document.createElement('div')
            loadingElement.classList.add('loading')
            document.body.append(loadingElement)
        }, 0, 0)

    }
}