简单的响应式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按钮客服

前端使用 Konva 实现可视化设计器（13）- 折线 - 最优路径应用【思路篇】

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

新手git入門總結

Linux更改遠程默認SSL端口

git個人使用總結

Redis操作入門個人總結

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結