升版說(shuō)明：
1.會(huì)議環(huán)節(jié)的變色處理，由V1版本的CSS偽類(lèi)，變?yōu)榱薉OM操作（純技術(shù)訓(xùn)練，新增了一個(gè)for循環(huán)，性能反而有所降低）；
2.會(huì)議環(huán)節(jié)負(fù)責(zé)人姓名展示，由提取title字段，改為了直接識(shí)別提取href字段，精簡(jiǎn)了title字段；
3.布局改為flex，自動(dòng)對(duì)中排版，優(yōu)化了模板的二次調(diào)整工作量。
效果圖：
捕獲.PNG
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>釘釘視頻會(huì)議議程</title>
<style>
.container{
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
}
a{
color: #999;
text-decoration: none;
font-size: large;
}
#goal{
font-size: large;
color: green;
}
#meetingtitle{
font-size: x-large;
margin-top: 2cm;
}
#itemlist{
height: 100%;
}
#itemlist ol{
display: table;
line-height: 35px;
}
li{
white-space: nowrap;
}
.actived{
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div id="meetingtitle">會(huì)議名稱(chēng)</div>
<div id="goal">當(dāng)前發(fā)言同志：<span id="description">尚未開(kāi)始</span></div>
<ul id="set">
<li>此次會(huì)議議程設(shè)置見(jiàn)下，預(yù)計(jì)時(shí)長(zhǎng)XX分鐘；</li>
<li>請(qǐng)標(biāo)紅環(huán)節(jié)的同志發(fā)言，請(qǐng)其他同志保持靜音。</li>
</ul>
<div id="itemlist">
<ol>
<li><a href="#張三" class="item">當(dāng)前環(huán)節(jié)簡(jiǎn)述：當(dāng)前環(huán)節(jié)的具體詳述信息</a></li>
<li><a href="#李四" class="item">當(dāng)前環(huán)節(jié)簡(jiǎn)述：當(dāng)前環(huán)節(jié)的具體詳述信息</a></li>
<li><a href="#王五" class="item">當(dāng)前環(huán)節(jié)簡(jiǎn)述：當(dāng)前環(huán)節(jié)的具體詳述信息</a></li>
<li><a href="#劉六" class="item">當(dāng)前環(huán)節(jié)簡(jiǎn)述：當(dāng)前環(huán)節(jié)的具體詳述信息</a></li>
<li><a href="#齊七" class="item">當(dāng)前環(huán)節(jié)簡(jiǎn)述：當(dāng)前環(huán)節(jié)的具體詳述信息</a></li>
</ol>
</div>
</div>
<script>
var target=document.getElementsByTagName("a");
for(var i=0;i<target.length;i++){
current_target=target[i];
current_target.onclick=function(){
//動(dòng)態(tài)更新顯示當(dāng)前點(diǎn)擊環(huán)節(jié)的負(fù)責(zé)人姓名
var text=this.getAttribute("href").split("#")[1];
var description=document.getElementById("description");
description.firstChild.nodeValue=text;
//各環(huán)節(jié)的變色處理
for(var j=0;j<target.length;j++){
target[j].className="item";
}
this.className="actived";
}
}
</script>
</body>
</html>
