簡單的響應式html按鈕客服

直接上代碼了，基本註釋都有，不懂留言問吧。

CSS樣式（這裏參考菜鳥教程的樣式）:

@CHARSET "UTF-8";
/* bubble style */
span{
	font-size: 20px;
}
.sender{
  clear:both;
  padding-left: 15px;

}
.sender div:nth-of-type(1){
  float: left;
}
.sender div:nth-of-type(2){
  background-color: aquamarine;
  float: left;
  margin: 0 20px 10px 15px;
  padding: 10px 10px 10px 0px;
  border-radius:7px;
}

.receiver div:first-child img,
.sender div:first-child img{
  width:50px;
  height: 50px;
}

.receiver{
  clear:both;
  padding-right: 15px;
}
.receiver div:nth-child(1){
  float: right;
}
.receiver div:nth-of-type(2){
  float:right;
  background-color: gold;
  margin: 0 10px 10px 20px;
  padding: 10px 0px 10px 10px;
  border-radius:7px;
}

.left_triangle{
  height:0px;
  width:0px;
  border-width:8px;
  border-style:solid;
  border-color:transparent aquamarine transparent transparent;
  position: relative;
  left:-16px;
  top:3px;
}

.right_triangle{
  height:0px;
  width:0px;
  border-width:8px;
  border-style:solid;
  border-color:transparent transparent transparent gold;
  position: relative;
  right:-16px;
  top:3px;
}
.raaaa{
position:fixed;
bottom:0;
}

JQ代碼：

/**
 *
 */
$(function(){
var index=0

	$('#start').click(function(){
	//異步傳輸獲得按鈕以及服務器相應的內容

 	  $.ajax({
		type:"POST",
        url:"Do.php",
        dataType:'JSON',
        data:"val="+$(this).val()+"&index="+index,
        async:true,
        success:function(msg){
        	$('#start').hide();//隱藏等待
        	$('#content').html(msg.button);//更新button
        	$('#chat').append(msg.left);//追加聊天信息
        	$('input[type="button"]').click(function(){
                  a(index,$(this).val())
        	})
        }
	})
	$(this).val("準備中...請稍後");//顯示等待
   //用戶回覆
    $('#chat').append('<div class="receiver"> <div> <img src="1.jpg"></div><div><div class="right_triangle"></div><span>'+$(this).val()+'</span></div></div>')
})
//複用函數
function a(index,val){
	++index;
	if(index>3){
		$('#content').hide();//到底就隱藏button
	}
		 $('#chat').append('<div class="receiver"> <div> <img src="1.jpg"></div><div><div class="right_triangle"></div><span>'+val+'</span></div></div>')

	 	  $.ajax({
	 			type:"POST",
	 	        url:"Do.php",
	 	        dataType:'JSON',
	 	        data:"val="+val+"&index="+index,
	 	        async:true,
	 	        success:function(msg){
	 	        	$('#start').hide();
	 	        	$('#content').html(msg.button);
	 	        	$('#chat').append(msg.left);
	 	        	$('input[type="button"]').click(function(){
	 	                  a(index,$(this).val())
	 	        	})
	 	        }
	 		})
	 		//顯示等待
	 		$('#start').show();
	}




})

前端代碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<link href="chat.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 消息框開始 -->
<!-- Left -->
<div class="container">
<div class="row">
<div id="chat">
<div class="sender col-xs-8 col-sm-8 col-md-8 col-lg-8">
  <div>
    <img src="2.jpg">
  </div>
  <div  class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="left_triangle"></div>
    <span>
    你有任何色斑的問題,你都可以直接諮詢我,我會根據你的臉部的色斑形狀
    以及顏色判斷出長斑的原因。並且提供合適的祛斑方法給你, 給你定製一系列的祛斑步驟幫助你解決色斑問題。
    </span>
  </div>
</div>

<!-- Left -->
<div class="sender col-xs-8 col-sm-8 col-md-8 col-lg-8">
  <div>
    <img src="2.jpg">
  </div>
  <div  class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="left_triangle"></div>
    <span> 點擊下方【開始】之後,
    根據自身情況選擇相應在答案,點擊開始,進行自測。 </span>
  </div>
</div>

</div>
<!-- 消息框結束 -->
<!-- 按鈕腳本開始 -->
    <div class="raaaa col-xs-12 col-sm-12  col-md-12 col-lg-12">
     <input type="button"  value="開始" class="btn btn-primary col-xs-10 col-sm-9 col-md-8 col-lg-7" id="start"/>
<div id="content">
</div>
</div>
<!-- 按鈕腳本結束 -->
</div>
</div>
<script type="text/javascript" src="chat.js"></script>
</body>
</html>

後端代碼:

<?php
if(isset($_POST['index'])){
    $index=$_POST['index'];
    switch ($index){
        case 0:
    $arr['button']= '<div class="col-xs-10 col-sm-9 col-md-8 col-lg-7">
     <input type="button" value="25歲之前" class="btn btn-primary col-xs-4 col-sm-4 col-md-4 col-lg-4"/>
     <input type="button" value="25歲到35歲" class="btn btn-primary col-xs-4 col-sm-4 col-md-4 col-lg-4"/>
     <input type="button" value="35歲以上" class="btn btn-primary col-xs-4 col-sm-4 col-md-4 col-lg-4"/>
     </div>';
            $arr['left']='<div class="sender col-xs-8 col-sm-8 col-md-8 col-lg-8">
    <div>
    <img src="2.jpg">
    </div>
    <div  class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="left_triangle"></div>
    <span>
色斑是在多少歲開始長出的？
    </span>
  </div>
</div>' ;
            print_r(json_encode($arr));
            break;
        case 1:
            $arr['button']= '<div class="col-xs-10 col-sm-9 col-md-8 col-lg-7">
     <input type="button" value="缺水無油" class="btn btn-primary col-xs-6 col-sm-6 col-md-6 col-lg-6"/>
     <input type="button" value="缺水多油" class="btn btn-primary col-xs-6 col-sm-6 col-md-6 col-lg-6"/>
     <input type="button" value="僅多油" class="btn btn-primary col-xs-6 col-sm-6 col-md-6 col-lg-6"/>
     <input type="button" value="正常" class="btn btn-primary col-xs-6 col-sm-6 col-md-6 col-lg-6"/>
     </div>';
            $arr['left']='<div class="sender col-xs-8 col-sm-8 col-md-8 col-lg-8">
    <div>
    <img src="2.jpg">
    </div>
    <div  class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="left_triangle"></div>
    <span>
目前的長斑的位置,是否乾燥缺水,或者容易出油？
    </span>
  </div>
</div>' ;
            print_r(json_encode($arr));
            break;
        case 2:
            $arr['button']= '<div class="col-xs-10 col-sm-9 col-md-8 col-lg-7">
     <input type="button" value="高壓睡眠欠缺" class="btn btn-primary col-xs-6 col-sm-6 col-md-6 col-lg-6"/>
     <input type="button" value="低壓睡眠充足" class="btn btn-primary col-xs-6 col-sm-6 col-md-6 col-lg-6"/>
     <input type="button" value="家庭壓力大工作壓力小" class="btn btn-primary col-xs-6 col-sm-6 col-md-6 col-lg-6"/>
     <input type="button" value="較爲輕鬆無壓力" class="btn btn-primary col-xs-6 col-sm-6 col-md-6 col-lg-6"/>
     </div>';
            $arr['left']='<div class="sender col-xs-8 col-sm-8 col-md-8 col-lg-8">
    <div>
    <img src="2.jpg">
    </div>
    <div  class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="left_triangle"></div>
    <span>
作用家庭屬於以下那類型？
    </span>
  </div>
</div>' ;
            print_r(json_encode($arr));
            break;
            case 3:
                $arr['button']= '<div class="col-xs-10 col-sm-9 col-md-8 col-lg-7">
     <input type="button" value="是" class="btn btn-primary col-xs-6 col-sm-6 col-md-6 col-lg-6"/>
     <input type="button" value="否" class="btn btn-primary col-xs-6 col-sm-6 col-md-6 col-lg-6"/>
     </div>';
                $arr['left']='<div class="sender col-xs-8 col-sm-8 col-md-8 col-lg-8">
    <div>
    <img src="2.jpg">
    </div>
    <div  class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="left_triangle"></div>
    <span>
是否嘗試過祛斑？
    </span>
  </div>
</div>' ;
                print_r(json_encode($arr));
                break;
                case 4:
     $arr['left']='<div class="sender col-xs-8 col-sm-8 col-md-8 col-lg-8">
    <div>
    <img src="2.jpg">
    </div>
    <div  class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="left_triangle"></div>
    <span>
您已完成全部自測答題，請及時添加老師微信:123456789，領取對應的祛斑方案！
    </span>
  </div>
</div>' ;
                    print_r(json_encode($arr));
                    break;

}

}


?>

簡單的響應式html按鈕客服

linux安裝cuda和cudnn

模擬手機設備：使用 Playwright 實現移動端自動化測試

Mellanox網卡開啓SR-IOV

全面系統的AI學習路徑，幫助普通人也能玩轉AI

HTML 00 Tutorial

uni-app實現上拉加載

vue3編譯優化之“靜態提升”

又是一個月-20240513

flask 如何保證返回json有序

linux服務器設置ssh免密

Nosql中Memcached與Redis區別與應用場景

新手git入門總結

Linux更改遠程默認SSL端口

git個人使用總結

Redis操作入門個人總結

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結