选项卡及客服自动回复 - 前端作业

首页 > 博客列表 > 选项卡及客服自动回复

博主信息

博文 42

粉丝 3

访问量 47643

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        ul{
            list-style: none;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #tab{
            border: 1px solid #ccc;
            margin: 20px auto;
            width: 403px;
            border-top: none;
        }
        .list ul{
            overflow: hidden;
        }
        .list li{
            float: left;
        }
        .list li{
            padding-left: 28px;
            padding-right: 28px;
            padding-top: 6px;
            padding-bottom: 6px;
            border: 1px solid #ccc;
            background: -moz-linear-gradient(top, #FEFEFE, #EDEDED);
            background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
            border-right: none;
            cursor: pointer;
        }
        #listCon{
            height: 100px;
        }
        #listCon div{
            padding:10px;
            position:absolute;
            opacity:0;
            filter:alpha(opacity=0);
        }
        .list li:first-child{
            border-left: none;
        }
        .list li:hover{
            background: #fff;
            border-bottom: none;
        }
        .list li.cur{
            background: #fff;
            border-bottom: none;
        }
        #listCon div.cur{
            opacity:1;
            filter:alpha(opacity=100);
        }
    </style>
</head>
<body>
    <div id="tab">
        <div class="list">
            <ul>
                <li class="cur">李白</li>
                <li>白居易</li>
                <li>李商隐</li>
                <li>孟浩然</li>
            </ul>
        </div>
        <div id="listCon">
            <div class="cur">
            <p>静夜思</p>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p></div>
            <div><p>暮江吟</p>
<p>一道残阳铺水中，半江瑟瑟半江红。</p>
<p>可怜九月初三夜，露似珍珠月似弓。</p></div>
            <div><p>夜雨寄北</p>
<p>君问归期未有期，巴山夜雨涨秋池。</p>
<p>何当共剪西窗烛，却话巴山夜雨时。</p></div>
            <div><p>春晓</p>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p></div>
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById("tab");
            var lis = oDiv.getElementsByTagName("li");
            var oDivCon = document.getElementById("listCon");
            var lisDiv = oDivCon.getElementsByTagName("div");
            for(var i=0;i<lis.length;i++){
                lis[i].index = i;
                lis[i].onmouseover = function(){
                    show(this.index);
                }
            }
            function show(a){
                for(var j=0;j<lis.length;j++){
                    lis[j].className = "";
                    lisDiv[j].className = "";
                }
                lis[a].className = "cur";
                lisDiv[a].className = "cur";
            }
        }
    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

客服自动回复代码

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>自动应答系统</title>
    <style type="text/css">
        body {
            background:url('https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/bg.gif');
            font-family:微软雅黑;
            font-size:14px;
            
        }
       body, div, ul, ol, li, h3, p {
            margin:0;
            padding: 0;
        }

        .top {
            margin:30px 0 10px 60px;
        }
        .top p {
            font-size:50px;
            color:#ffea00;
        }
        .top p span {
            color:#fff;
            font-size:30px;
        }
        .main {
            width:1300px;
            margin:30px auto;
            overflow:hidden;
        }
        .right {
            width:330px;
            height:600px;
            float:right;
            background-color:#c3d5ea;
            border-radius:2%;
            box-shadow:0 0 5px 2px #2c69a0;
            /* margin-right:30px; */
        }
        .left {
            width:900px;
            height:600px;
            float:left;
            /* background-color:#c3d5ea; */
            /* border-radius:2%;
            box-shadow:0 0 15px 5px #2c69a0; */
        }
        .left .content {
            width:900px;
            height:400px;
            background-color:#c3d5ea;
            border-radius:1%;
            box-shadow:0 0 5px 2px #2c69a0;
        }
        .left .content ul {
            list-style: none;
            line-height: 2em;
            overflow: hidden;
        }
        .left .content ul li {
            margin:5px 0 0 20px;
        }
        .left .content ul li img {
            margin-right:5px;
        }
        .left textarea{
            border: none;
            resize: none; /* 禁止调整元素的尺寸 */
            width:897px;
            height:113px;
            margin-top:20px;
            background-color:#c3d5ea;
            border-radius:1%;
            box-shadow:0 0 5px 2px #2c69a0;
        }
        /* .left .bj {
             width:900px;
            height:120px;
            margin-top:20px;
            background-color:#c3d5ea;
            border-radius:1%;
            box-shadow:0 0 5px 2px #2c69a0;
        } */

        .left .enter {
              width:900px;
              height:40px;
        }
        .left .enter p {
            float:right;
            line-height:40px;
            color:#fff;
            margin:30px 20px 0 0 ;
            /* font-size:14px; */
        }
         .left .enter button {
            width:100px;
            height:40px;
            float:right;
            margin-top:20px;
            border-radius:5%;
            background-color:#5daae9;
            border:none;
            color:#fff;
            font-size:14px;
            font-family:微软雅黑;
        }
        .left .enter button:hover {
        background-color:#e38d04;
            /* border:none; */
            color:#fff;
            font-size:16px;
        }
        .foot {
            width:100%;
            margin: 40px 0 0 60px;
        }
        .foot p {
            color:#fff;
            font-size:12px;
        }

        .right .welcone {
            width:330px;
            height:50px;
            line-height:50px;
            text-align:center;
            color:#fc424b;
            border-bottom:1px solid #cbddf2;
        }
        .right .r1 h3 {
            color:#498ac4;
            text-align:center;
            line-height:2em;
            border-bottom:1px solid #cbddf2;
        }
        .right .r1 ul li {
            list-style-type:none;
            line-height:2.2em;
            text-align:center;
            margin-top:5px;
        }
        .right .r1 ul li a {

            color:#498ac4;
            font-size:13px;
            text-decoration: none;
        }
        .right .r1 ul li a:hover{
            color:#fc424b;
            font-size:14px;
        }

    </style>
</head>
<body>
   <div class="top">
    <p><strong>XXXXXX公司</strong>  <span>网上咨询自动应答系统</span></p>
   </div>
   <div class="main">
       <div class="left">
           <div class="content">
               <ul>
                <li></li>
            </ul>
           </div>
           <textarea  name="text"></textarea>
           <div class="enter">
           <button type="button">发 送</button>
               <!-- <p>按Enter可快速发送！</p> -->

           </div>

       </div>
       <div class="right">
       <div class="welcone">欢迎进入网上咨询系统！</div>
           <div class="r1"><h3>服务人员</h3>
            <ul>
                <li><a href="">网上咨询自动应答系统（智能机器人）</a></li>
                <li><a href="">网上咨询自动应答系统（智能机器人）</a></li>
                <li><a href="">网上咨询自动应答系统（智能机器人）</a></li>
                <li><a href="">网上咨询自动应答系统（智能机器人）</a></li>
                <li><a href="">网上咨询自动应答系统（智能机器人）</a></li>

            </ul>
           </div>
           <div class="r1"><h3>常见问题</h3>
            <ul>
                <li><a href="">常见问题常见问题常见问题常见问题</a></li>
                <li><a href="">常见问题常见问题常见问题常见问题</a></li>
                <li><a href="">常见问题常见问题常见问题常见问题</a></li>
                <li><a href="">常见问题常见问题常见问题常见问题</a></li>
                <li><a href="">常见问题常见问题常见问题常见问题</a></li>
                <li><a href="">常见问题常见问题常见问题常见问题</a></li>
                <li><a href="">常见问题常见问题常见问题常见问题</a></li>
                <li><a href="">常见问题常见问题常见问题常见问题</a></li>


            </ul>
           </div>
       </div>
       </div>
       <div class="foot"><p>XXXXXX公司网上咨询自动应答系统 版权所有</p></div>
<script type="text/javascript">
        //获取到页面中的按钮,文本域,对话内容区
        var btn = document.getElementsByTagName('button')[0]
        var text = document.getElementsByName('text')[0]
        var list = document.getElementsByTagName('ul')[0]
        var sum = 0

        //添加按钮点击事件,获取用户数据并推送到对话窗口中
        btn.onclick = function () {
            // alert(text.value)
            //获取用户提交的内容
            if (text.value.length == 0) {
                alert('老板，您还没有输入任何内容哦~~')
                return false
            }
            var userComment = text.value

            //立即清空用户信息区
            text.value = ''

            //创建一个新节点li
            var li = document.createElement('li')


            li.innerHTML = userComment

            var userPic = '<img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/yk.jpg" width="30" style="border-radius:50%">'
            li.innerHTML = userPic+userComment

            //将新节点插入到对话列表中
            list.appendChild(li)
            sum += 1


                setTimeout(function(){
                var info = ['您好！我是网上咨询自动应答系统（智能机器人）, 很高兴为您服务。','对不起,没有为您找到合适的答案,请换句话试试!或者进入 <a style="color:#12c6b3" href="http://www.baidu.com" target="_blank" >人工咨询页面</a>','我是谁？我在哪？我在做什么？']
                var temp = info[Math.floor(Math.random()*3)]
                //取1-5之间的一个整数:Math.floor(Math.random()*6 + 1)
                var reply = document.createElement('li')
                var kefuPic = '<img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/jqr.jpg" width="30" style="border-radius:50%;">'
                // reply.innerHTML = '你有啥事呀,我的帅哥哥' +kefuPic
                reply.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>'
                // reply.style.float = 'right'

                list.appendChild(reply)
                sum += 1

            },2000)


            if (sum > 8) {
                list.innerHTML = ''
                sum = 0
            }

        }


    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写代码

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

纯css丝带导航

2018-05-06 22:38:20