实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="li1" id="it1" style="background: #8f5902">列表1</li>
<li class="li2" id="it2" style="background: orange">列表2</li>
<li class="li3" id="it3" style="background: grey">列表3</li>
<li class="li4" id="it4" style="background: #2b669a">列表4</li>
<li class="li5" id="it5" style="background: #00CC66">列表5</li>
</ul>
<script>
let list = document.getElementsByTagName('ul')[0];
list.style.background = 'yellow';
let item1 = document.getElementById('it1');
item1.style.background = 'red';
let item2 = document.getElementsByClassName('li2');
item2[0].style.color = 'white';
item2[0].innerHTML = 'hello';
let items = document.querySelectorAll('li');
items[2].style.fontSize = '30px';
items[3].style.fontWeight = 'bolder';
items.item(3).style.color = 'yellow';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线***</title>
</head>
<style>
button:hover{
background-color: #8a6d3b;
cursor: pointer;
/*color: orangered;*/
}
button{
height: 78px;
border: none;
border-radius: 5px;
background: #00CC66;
font-size: 20px;
}
</style>
<body>
<div style="background: lightgrey;width: 320px;height: 600px;border-radius: 10px" >
<h2 style="text-align: center;">在线***</h2>
<div contenteditable="true"style="height: 440px;border-bottom: green double 4px ">
<ul style="list-style-type: none">
<li></li>
</ul>
</div>
<div style="margin: 10px auto">
<table>
<tr>
<td><textarea name="text" cols="35" rows="5"></textarea></td>
<td><button type="button" >发送</button></td>
</tr>
</table>
</div>
</div>
<script>
let btn = document.getElementsByTagName('button')[0];
let text = document.getElementsByName('text')[0];
let list = document.getElementsByTagName('ul')[0];
let sum = 0;//聊天记录条数计数器
btn.onclick = function () {
if (sum == 20) {
list.innerHTML = '';
sum = 0;
}
if (text.value.length === 0){
alert('请输入文字');
return false;
}
let comment = '我：'+text.value;
text.value = '';
//创建li
let li = document.createElement('li');
li.innerHTML = comment;
list.appendChild(li);
sum += 1;
let redb = [
'***：谁啊',
'***：干啥啊',
'***：咋滴啦',
'***：哦'
];
let tem = redb[Math.floor(Math.random()*2)];
let reply = document.createElement('li');
reply.innerHTML = tem;
list.appendChild(reply);
sum += 1;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
