欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端實(shí)現(xiàn)滑動按鈕AJAX與后端交互的示例代碼

 更新時間：2022年02月23日 11:38:50   作者：春告鳥  
這篇文章主要介紹了前端實(shí)現(xiàn)滑動按鈕AJAX與后端交互的示例代碼，前端代碼分為html代碼和css代碼，通過js事件觸發(fā),代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧

html代碼

<div class="switch-box">
    <input id="switchButton" type="checkbox" class="switch" />
    <label for="switchButton"></label>
</div>

css代碼

.switch-box {
    width: 48px;
}
.switch-box .switch {
    /* 隱藏checkbox默認(rèn)樣式 */
    display: none;
}
.switch-box label {
    /* 通過label擴(kuò)大點(diǎn)擊熱區(qū) */
    position: relative;
    display: block;
    margin: 1px;
    height: 28px;
    cursor: pointer;
}
.switch-box label::before {
    /* before設(shè)置前滾動小圓球 */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -14px;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.06);
    /* 通過transform、transition屬性控制元素過渡進(jìn)而形成css3動畫 */
    -webkit-transform: translateX(-9px);
    -moz-transform: translateX(-9px);
    transform: translateX(-9px);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch-box .switch:checked~label::before {
    /* 語義：被選中的類名為"switch"元素后面的label元素里的偽類元素，進(jìn)行更改css樣式 */
    /* 形成偽類結(jié)構(gòu)選擇器：":"冒號加布爾值"checked" */
    /* " Ele1 ~ Ele2 "波浪號在css的作用：連接的元素必須有相同的父元素，選擇出現(xiàn)在Ele1后的Ele2（但不必跟在Ele1，也就是說可以并列）  */
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    transform: translateX(10px);
}
.switch-box label::after {
    /* after設(shè)置滾動前背景色 */
    content: "";
    display: block;
    border-radius: 30px;
    height: 28px;
    background-color: #dcdfe6;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch-box .switch:checked~label::after {
    background-color: #13ce66;
}

效果圖

效果如圖：

JS事件觸發(fā)

<input id="switchButton" type="checkbox" class="switch" onclick="reverseStatus('1')" />

input添加onclick事件，點(diǎn)擊觸發(fā)reverseStatus()函數(shù)

<script>
	function reverseStatus(id){
		$.get("/pocs/reverse/"+id);
	}
</script>

flask后端接口

@poc.route('/pocs/reverse/<int:id>', methods=['GET'])
def reverse(id=None):
    print(id)
    return 'success'

在后端編寫我們需要的邏輯

參考鏈接

https://article.itxueyuan.com/rx83a2

到此這篇關(guān)于前端實(shí)現(xiàn)滑動按鈕AJAX與后端交互的文章就介紹到這了,更多相關(guān)滑動按鈕AJAX與后端交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論