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

Editor to share with you how to achieve jQuery Ajax chat robot, I hope you will learn something after reading this article, let's discuss it together!

The details are as follows:

'

Implementation steps:

1. Sort out the code structure of the case

a. Comb the UI layout of the page

b. Extract the business code into the chat.js

c. Understand the purpose of the resetui () function: reset the position of the scroll bar

Xiao Xiang, classmate.

Hey, have you missed me lately?

Index.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 ('.. / images/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 ('.. / images/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 0020px; 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;}

The effect is as follows:

two。 Render what the user entered to the chat window

Chat.js

/ / reset the scroll bar position resetui (); / / bind the mouse click event $("# btnSend"). On ('click', function () {let text = $("# ipt"). Val (). Trim (); / / the content to be sent / / determine whether the content to be sent is empty if (text.length)

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.