收藏
批改状态：合格
老师批语：
编程:实例演示 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>点击 "运行实例" 按钮查看在线实例
<!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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
