0914作业：DOM实例

编程:实例演示 id,class,标签和css选择器获取元素的方法

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用CSS选择器获取元素</title>
</head>
<body>
<h3 >登鹳雀楼</h3>
<p id="first">白日依山尽，</p>
<p class="mid">黄河入海流。</p>
<p class="mid">欲穷千里目，</p>
<p id="end">更上一层楼。</p>
</body>
<script>
    let h3 = document.getElementsByTagName('h3')[0];
    h3.style.backgroundColor = 'red';
    let first = document.getElementById('first');
    first.style.fontSize = 18 +'px';
    let mid = document.getElementsByClassName('mid')[1];
    mid.style.fontWeight ='bolder';
     let titles = document.querySelectorAll('h3');
     titles[0].style.textAlign ='center';
     let end = document.querySelector('#end'); // 通过CSS id选择器来获得元素
     end.innerHTML ='更上二层楼。';
     let mids = document.querySelectorAll('.mid'); // 通过css 类名获得元素
     mids[0].innerHTML = '你妹的！';
</script>
</html>

运行实例 »

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

2. 实战: 在线聊天机器人

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能聊天机器人</title>
    <style>
        div:nth-child(1){
            width: 500px;
            height: 900px;
            background-color: #efefef;
            margin:50px auto; /*上下50 左右自动*/
            box-shadow: 3px 3px 3px #333333;
        }
        h2 {
            text-align: center;
             margin-bottom: 20px;
        }
        div:nth-child(2){
            width: 450px;
            height: 700px;
            border:3px double #777777;
            background-color: lightblue;
            margin:20px auto 10px;/*上20 下10 左右居中*/
        }
        ul {
            list-style: none;
            line-height: 1rem;
           /* border: 1px solid grey;*/
            overflow: hidden;
            padding: 1rem;
        }
        table {
            width:90%;
            height: 100px;
            margin: auto;
        }
        textarea {
            border: none;
            resize: none;
            background-color: lightgray;
        }
        button {
            width: 60px;
            height: 40px;
            border: none;
        }
        button:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div>
    <h2>智能客2服</h2>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <table>
        <tr>
            <td align="right"> <textarea cols="50" rows="4" name="text"> </textarea> </td>
            <td align="left"><button type="button">发送</button></td>
        </tr>
    </table>
</div>
<script>
    //1.获取HTML中元素对象
     let btn = document.getElementsByTagName('button')[0]; //获得button对象
     let txt = document.getElementsByName('text')[0];
     let list = document.getElementsByTagName('ul')[0]; //ul中的li 是用来保存对话的
     let sum = 0 ; //计数器
    //2 给button 添加点击事件，获取文本框的数据，并显示到对话区域内
    btn.onclick = function () {
        if (txt.value.length ===0){ //如果文本域为空
            alert('不允许发送空内容！');
            return false;
        }
        let talkbox = txt.value; // 把发送的内容保存到talkbox

        txt.value = ''; //清空文本域

        //3创建一个新的li 用来保存talkbox，并插入ul中
        let li = document.createElement('li');
        li.innerHTML = talkbox;
        let userPic = '<img src="imgs/core.jpg" width="30" style="border-radius:50%">'; //添加个头像
        li.innerHTML= userPic +' '+ talkbox; //把头像和聊天语句搞在一起
        list.appendChild(li); //追加一个li ：新增一个聊天语句
        sum +=1; //计算器+1

        //4 设置机器人应答
        setTimeout(function () {
            let info = [
                '今晚吃什么啊？',
                '路边看到一个美女！',
                '晚上去钓鱼！',
                '山竹来了，吃了不少风',
                '1608房间等你哦！'
                '奥特曼打怪兽',
                '魔道祖师',
                '西门吹雪',
                '最喜欢灭绝师太了',
                '你是最棒的'
            ];
            let temp = info[Math.floor(Math.random()*8)]; //向下取整,随机3条
            //alert(temp);
            let reply = document.createElement('li');// 创建一个回复的li

            let robotPic = '<img src="imgs/Peter.jpg" width="30" style="border-radius:50%">';
            reply.innerHTML = robotPic +' '+ temp;
            list.appendChild(reply);
            sum +=1;
        },2000); //2秒延时
        alert(sum);
        if(sum>10){ //10条聊天记录后，清空
            list.innerHTML='';
            sum = 0;
        }
    }
</script>
</body>
</html>

运行实例 »

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

实例

实例

相关文章