返回实战热身:聊天......登陆

实战热身:聊天信息的生成原理

阿涛2019-06-30 15:42:2150

课程中的案例代码:增加了输入为空时的弹窗和提交后输入框获取焦点

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实战热身</title>
</head>
<body>
<input type="text" name="info">
<button>提交</button>
<ul></ul>

<script>
    //1、获取元素
    let input = document.getElementsByTagName('input')[0];
    console.log(input);

    let btn = document.getElementsByTagName('button')[0];
    console.log(btn);

    let ul = document.getElementsByTagName('ul')[0];
    console.log(ul);

    btn.onclick = function () {

        let text = input.value;
        if (text === ''){
            alert('请输入内容')
            input.focus();

        }else {

          let li = document.createElement('li');
          li.innerText = text;
          ul.appendChild(li);
          input.value = '';
          input.focus();
        }
    }

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

运行截图:

QQ截图20190630153950.png

总结:

在案例的基础上增加了输入自动获取焦点,同时把输入为空时,进行了判断;

通过小案例熟悉了DOM操作。

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网