目錄

• html代碼
• css代碼
• 效果圖
• JS事件觸發(fā)
• flask后端接口
• 參考鏈接

html代碼

<div>    <input id="switchButton" type="checkbox" />    <label for="switchButton"></label></div>

css代碼

.switch-box {    width: 48px;}.switch-box .switch {    /* 隱藏checkbox默認樣式 */    display: none;}.switch-box label {    /* 通過label擴大點擊熱區(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屬性控制元素過渡進而形成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元素里的偽類元素，進行更改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" onclick="reverseStatus("1")" />

input添加onclick事件，點擊觸發(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"

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

參考鏈接

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