博客列表 >0510-一个聊天对话框

0510-一个聊天对话框

我的博客
我的博客原创
2019年05月11日 18:26:53792浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业:一个小型聊天窗口</title>
    <style type="text/css">
        div:nth-child(1) {
            width: 500px;
            height: 650px;
            background-color: lightskyblue;
            margin: 30px auto;
            color: #333;
            box-shadow: 2px 2px 2px #808080

        }

        h2 {
            text-align: center;
            margin-bottom: -10px;
        }
        div:nth-child(2) {
            width: 400px;
            height: 500px;
            border: 4px double green;
            background-color: #efefef;
            margin: 20px auto 15px;
        }

        ul {
            list-style: none;
            line-height: 2em;
            /*border: 1px solid red;*/
            overflow: hidden;
            padding: 15px;
        }

        table {
            width: 90%;
            height:80px;
            margin: auto;
        }

        textarea{
            /*width: 300px;*/
            border: none;
            resize: none;
            background-color: lightyellow;



        }
        button {
            width: 60px;
            height: 40px;
            background-color: seagreen;
            color: white;
            border: none;
            /*text-align: left;*/

        }
        button:hover {
            cursor: pointer;
            background-color: orange;
        }
    </style>
</head>
<body>
<div>
    <h2>萌妹子聊天室</h2>
    <div contenteditable="true" style="overflow-y:auto; overflow-x:auto; width:400px; height:500px;">

        <ul>
            <li></li>
        </ul>
    </div>
    <table>
        <tr>
            <td align="left"><textarea cols="50" rows="4" name="text" autofocus></textarea></td>
            <td align="left"><button type=button>发送</button></td>
        </tr>
    </table>
        </div>
        <script type="text/javascript">
    //1、获取需要的元素数组。
    var new_ul= document.getElementsByTagName('ul')[0];
    var new_but= document.getElementsByTagName('button')[0];
    var new_text=document.getElementsByName('text')[0];

    new_but.onclick=function () {
            //把获取到的new_text值赋给text
        var text=new_text.value;
            //然后让new_text的值为空,方便下次输入。不影响text的值。
            new_text.value='';
           if(text===''){
               alert('您不想说任何话吗?')
           }

             //创建一个li标签
        var  li = document.createElement('li');

             //给li写入text/new_text.value的值,结果= <li> + text + </li>。
             li.innerHTML='<img src="images/me.jpg" style="width:40px; height: 40px;border-radius: 50%;">说:   '+text;     //不能反过来写。
             //在new_ul标签下追加 li标签和他里边的字符
             new_ul.appendChild(li);


        setTimeout(function () {
            var mm=['我在呢,你有什么事?','你喜欢我吗?','你来找我呀!','我非常喜欢你啊。'];
             //获取随机数,然后取随机数里面的整数部分。 随机数*4表示范围在0-4之间,不包含4,以为数组是0-3范围。
            var temp=Math.floor(Math.random()*4);

            var li_mm = document.createElement('li');
            li_mm.innerHTML='<img src="images/kf.jpg" style="width:40px; height: 40px; border-radius: 50%;">说:   '+mm[temp];
            new_ul.appendChild(li_mm);
        },1000);

    }




</script>

</body>
</html>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议