仿聊天记录页面

不羁2018-11-23 16:19:01

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>重复你的话</title>
    <style type="text/css">
        li{list-style: none;color:blue;background: pink;margin: 10px auto;}
    </style>
</head>
<body>
    <input type="text" name="info">
    <button>发送</button>
    <ul style="width:480px;">
         
    </ul>
    <script type="text/javascript">
        //获取元素
        let input = document.getElementsByName('info')[0];
        let button = document.getElementsByTagName('button')[0];
        let ul = document.getElementsByTagName('ul')[0];
 
        button.onclick = function() {
         let li = document.createElement('li'); // 创建列表项li
         li.innerHTML = input.value;    // 填充内容
         ul.appendChild(li);    //将内容添加到列表中
         input.value = '';  //清空文本框
        };
    </script>
</body>
</html>

实现功能

复习 getElementsByName（）

getElementsByTagName()

createElement()

appendChild()

的使用

仿聊天记录页面

最新手记推荐

全部回复(0)我要回复