寫一個簡單的個人中心的例項

 今天主要介紹背景和頭像圖片的修改，還有個人資訊的修改

首先寫一個input

            <input id="banner_bg_file" type="file" onchange="chooseImg(this)" hidden>

然後配合點選事件與圖片函式將本體圖片上傳達到修改的效果

banner_bg_change.addEventListener('click', function () {
    var banner_bg_file = document.getElementById('banner_bg_file')
    banner_bg_file.click()
})

function chooseImg(file) {
    var file = file.files[0]
    var reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function () {
        console.log(this.result)
        banner_bg.style.background = 'url(' + this.result + ')'
        banner_bg.style.backgroundSize = '100%'
        banner_bg.style.backgroundPosition = 'center center'
    }
}
 

然後就是個人資訊的修改，點選資訊修改按鈕就會變化為取消和儲存按鈕

同時資訊顯示變為placeholder狀態，並且第一個資訊獲得焦點，賬號無法修改

點選取消回到原來狀態，儲存及儲存當時的資訊

資訊顯示為readonly狀態，

程式碼為：

change_user_msg.addEventListener('click', function () {
    console.log('fn tset begin')
    change_user_msg_cancel_btn.style.display = 'inline'
    // change_user_msg_cancel_btn.removeAttribute('hidden')
    change_user_msg_submit_btn.style.display = 'inline'
    changeMsgInput(oInput)
    change_user_msg.style.display = 'none'
})
//提交
change_user_msg_submit_btn.addEventListener('click', function () {
    // console.log(old_msg)//舊的資訊
    // console.log(old_msg[1])//賬號
    // 切換為新的資訊
    var new_msg = new Array()
    var nInput = document.getElementById('user_msgs').getElementsByTagName('input')
    for (let i = 0; i < nInput.length; i++) {
        if (nInput[i].value == '') {
            new_msg[i] = old_msg[i]
        } else {
            new_msg[i] = nInput[i].value
        }
    }
    cancelMsgChange(oInput, new_msg)
    //向後發起請求將資料修改
    change_user_msg_cancel_btn.style.display = 'none'
    // change_user_msg_cancel_btn.removeAttribute('hidden')
    change_user_msg_submit_btn.style.display = 'none'
    change_user_msg.style.display = 'inline'

})
// 取消
change_user_msg_cancel_btn.addEventListener('click', function () {
    // console.log(old_msg)
    cancelMsgChange(oInput, old_msg)
    change_user_msg_cancel_btn.style.display = 'none'
    // change_user_msg_cancel_btn.removeAttribute('hidden')
    change_user_msg_submit_btn.style.display = 'none'
    change_user_msg.style.display = 'inline'

})
//獲得修改
function changeMsgInput(arg) {
    var index = arg.length
    for (let i = 0; i < index; i++) {
        old_msg[i] = arg[i].value
        if (i !== 1) {
            arg[i].placeholder = arg[i].value
            arg[i].value = ''
            arg[i].removeAttribute('readonly')
        }
    }
    arg[0].focus()
}
//還原
function cancelMsgChange(arg, old) {
    var index = arg.length
    for (let i = 0; i < index; i++) {
        if (i !== 1) {
            arg[i].value = old[i]
            arg[i].setAttribute('readonly', 'readonly')
        }
    }
    // arg[0].focus()
}
 

 所有的程式碼均使用原生js實現，功能比較簡單。希望能為初學者起到幫助的作用。