Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to use Ajax to achieve chat robot". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Function realization:

Click the send button event to render the content entered by the user to the page, click the enter key to render the contents of the form to the page to get the contents of the robot to render to the page to play the contents of the robot.

Let's first take a look at the overall structure of the project.

Introduce relevant documents:

The html framework is relatively simple

Classmate Xiao Si

Hey, have you missed me lately?

For the audio playback tag here, be sure to add the autoplay attribute and play it automatically, but without this attribute, the playback robot function cannot be realized.

Main.css

Body {font-family: 'Microsoft YaHei';}. Wrap {position: fixed; width: 450px; left: 50%; margin-left:-225px; top: 20px; bottom: 20px; border: 1px solid # ebebeb; background-color: # fff; border-radius: 10px; box-shadow: 0 30px rgba (0,0,0,0.1); overflow: hidden;}. Header {height: 55px Background: linear-gradient (90deg, rgba (246,60,47,0.6), rgba (128,58,242,0.6); overflow: hidden;}. Header h4 {color: # faf3fc; line-height: 55px; font-weight: normal; float: left; letter-spacing: 2px; margin-left: 25px; font-size: 18px; text-shadow: 0px 0px 5px # 944846;}. Header img {float: right Margin: 7px 25px 00; border-radius: 20px; box-shadow: 00 5px # f7f2fe;} .main {position: absolute; left:0; right: 0; top: 55px; bottom: 55px; background-color: # f4f3f3; box-sizing: border-box; padding: 10px 0; overflow:hidden;}. Talk_list {position: absolute; width:100%; left:0px; top:0px Talk_list li {overflow: hidden; margin: 20px 0px 30px;} .talk_list .left _ word img {float: left; margin-left: 20px;} .talk_list .left _ word span {float: left; background-color: # fe9697; padding: 10px 15px; max-width: 290px; border-radius: 12px; font-size: 16px; color: # fff; margin-left: 13px; position: relative Line-height: 24px;} .talk_list .left _ word span:before {content:'; position: absolute; left:-8px; top: 3px; width: 13px; height: 12px; background: url ('.. / img/corner01.png') no-repeat;} .talk_list .right _ word img {float: right; margin-right: 20px;} .talk_list .right _ word span {float: right Background-color: # fff; padding: 10px 15px; max-width: 290px; border-radius: 12px; font-size: 16px; color: # 000; margin-right: 13px; position: relative; line-height: 24px;} .talk_list .right _ word span:before {content:'; position: absolute; right:-8px; top: 3px; width: 13px; height: 12px Background: url ('.. / img/corner02.png') no-repeat;}. Drag_bar {position:absolute; right:0px; top:0px; background-color: # fff; height:100%; width:6px; box-sizing:border-box; border-bottom:1px solid # f4f3f3;} .drager {position:absolute; left:0px; top:0px; background-color: # cdcdcd; height:100px Width:6px; border-radius:3px; cursor: pointer;} .footer {width:100%; height: 55px; left:0px; bottom:0px; background-color:#fff; position: absolute;}. Footer img {float: left; margin:8px 00 20px;} .input_txt {float: left; width:270px; height:37px; border:0px; background-color:# f4f3f3 Margin:9px 0 020px; border-radius:8px; padding:0px; outline:none; text-indent:15px;}. Input_sub {float: left; width:70px; height:37px; border:0px; background-color: # fe9697; margin:9px 0015px; border-radius:8px; padding:0px; outline:none; color:#fff; cursor: pointer;}

Reset.css part

Body,ul,h2,h3,h4,h5,h6,h7 {margin: 0; padding: 0;} h2 font-size:100%; font-weight:normal;: 0; padding: 0;} h2 font-size:100%; font-weight:normal;} a {text-decoration:none;} ul {list-style:none;} img {border:0px;} / * clear float to solve margin-top collapse * / .clearfix: before,.clearfix:after {content:''; display:table } .clearfix: after {clear:both;} .clearfix {zoom:1;} .fl {float:left;} .fr {float:right;}

Next is the essence of the project.

First, to bind the click event to the send button, the trim () method removes the empty characters from the form and starts to determine whether the form content is empty or not.

If the user enters the content and renders the contents of the form to the page, I believe everyone is very skilled.

/ / bind the mouse click event $('# btnSend') .on ('click', function () {var text = $(' # ipt'). Val () .trim () if (text.length) to the send button

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.