How to use JS to realize the scoring function of imitating Baidu Library
This article mainly introduces how to use JS to achieve imitating Baidu library scoring function, the article is very detailed, has a certain reference value, interested friends must read it!
The specific code is as follows:
Untitled document * {padding:0;margin:0;} # content {width:700px;height:50px;border:1px solid # ccc;margin:50px auto;line-height:50px;} # content span.title {display:line-block;width:100px;height:50px;line-height:50px;font-size:20px;font-weight:bold;color:#FF9933;} # content ul.stars {display:inline-block;width:160px;height:50px;line-height:50px;cursor:pointer } # content ul.stars li {font-size:30px;color:#ccc;} # content p {display:inline-block;width:80px;height:50px;line-height:50px;font-size:20px;font-weight:bold;color:#ff9933;} # content .tip {display:inline-block;height:45px;border:1px # ccc red;background:#FFFFCC; visibility:hidden;} # content .tip span {display:inline-block;height:40px;line-height:40px;padding:0px 10px } # content .tip ul {display:inline-block;position:relative;} # content .tip ul I {position:absolute;top:70%;right:18%;}. Red {color:red;margin-left:10px;} .orange {color:orange;} _ window.onload = function () {var content = document.getElementById ('content'); var score = document.getElementById (' score'); var oUl = content.getElementsByClassName ('stars') [0]; var aLi = oUl.getElementsByTagName (' li') Var tip = content.getElementsByClassName ('tip') [0]; var arr = [' poor', 'poor','OK', 'recommended', 'highly recommended']; oUl.onmouseover = function () {tip.style.visibility = 'visible';} oUl.onmouseout = function () {tip.style.visibility =' hidden';} for (var item0
