DOM获取元素:
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素选择器</title>
</head>
<body>
<h1 class="box">哈哈</h1>
<h2 id="h2">你好啊</h2>
<h3 class="box1">嘎嘎</h2>
<script>
// 通过id来获取元素
var H2 = document.getElementById('h2');
H2.style.color = "red";
// 通过class来获取元素
var H1 = document.getElementsByClassName('box');
console.log(H1);
// 通过css来获取元素
var H3 = document.querySelector('.box1');
H3.style.color = "blue";
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
智能在线：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线聊天</title>
<style>
*{
margin: 0;
padding: 0;
}
.header{
width:600px;
height: 600px;
background:#eee;
margin:50px auto;
box-shadow:0 0 10px 10px #999;
border-radius:10px;
padding-top:50px;
}
.box{
width:500px;
height:330px;
box-shadow:0 0 5px lightcoral;
margin:auto;
border-radius:10px;
}
.box ul{
width:480px;
}
.box ul li{
list-style-type:none;
height:45px;
line-height:45px;
}
.box1{
width:500px;
height:150px;
border-radius:10px;
margin:20px auto;
}
.box1 textarea{
width:390px;
height:100%;
float: left;
outline: medium;
resize:none;
text-indent:15px;
color:lightcoral;
font-size:20px;
line-height:30px;
}
.box1 button{
width:100px;
height:35px;
background: lightgray;
border:none;
margin-top:60px;
margin-left:5px;
}
.box1 button:hover{
background: #999;
cursor:pointer;
}
</style>
</head>
<body>
<div class="header">
<div class="box">
<ul class="ul">
</ul>
</div>
<div class="box1">
<textarea name="info" ></textarea>
<button name="button">发送</button>
</div>
</div>
<script>
// 获取元素
let UL = document.querySelector('ul');
let bth = document.getElementsByName('button')[0];
let text = document.getElementsByName('info')[0];
let sum = 0;
// 点击事件
bth.onclick = function () {
let infoTxt = text.value;
let LI = document.createElement('li');
let P1 = document.createElement('p');
P1.innerHTML = infoTxt;
P1.style.cssText ="text-indent:10px";
LI.style.cssText = 'text-align:left;color:#555;font-size:14px;border-bottom:1px solid red;margin-left:10px;';
let userPic = '<img src="images/peter.jpg" width="30"; height="30"; style="border-radius: 50%;vertical-align: middle;float: left;">';
LI.innerHTML = userPic;
text.value = '';
LI.appendChild(P1);
UL.appendChild(LI);
sum ++;
// 定时器，两秒后回复
setTimeout(function () {
let Text = [
'真烦人,有话快说,别耽误我玩抖音',
'除了退货,退款,咱们什么都可以聊',
'说啥,本姑娘怎么听不懂呢?再说一遍',
'在我方便的时候再回复你吧~~',
'投诉我的人多了,你算老几~~~'
];
let Li = document.createElement('li');
Li.style.cssText = 'text-align:right;color:#555;font-size:14px;margin-right:10px;border-bottom:1px solid blue;';
let P2 = document.createElement('p');
P2.style.cssText = 'float:right;margin-right:10px';
P2.innerHTML = Text[Math.floor(Math.random() * 4 )];
let kefuPic = '<img src="images/zly.jpg" width="30"; style="border-radius: 50%;vertical-align: middle;float: right;">';
Li.innerHTML = kefuPic;
Li.appendChild(P2);
UL.appendChild(Li);
sum ++;
console.log(sum);
},2000)
// 当聊天记录数等于7，清空聊天记录
if(sum > 6){
// 当留言记录大于6，等待1秒时间留言记录再清空
setTimeout(function () {
UL.innerHTML = '';
sum = 0;
},1000)
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
