写一个简单的个人中心的实例

 今天主要介绍背景和头像图片的修改，还有个人信息的修改

首先写一个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实现，功能比较简单。希望能为初学者起到帮助的作用。