诊疗微信小程序_JS完成仿百度文库评分功用

JS实现仿百度文库评分功能     投稿:mrr   本文给大家分享基于js实现仿百度文库评分功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧

百度文库分享平台大家都知道,今天小编通过一段实例代码给大家介绍基于js实现百度文库评分功能,先给大家展示效果图吧。


具体代码如下所示:

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="1999/xhtml" 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 title 无标题文档 /title 
 link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" 
 link href="font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" 
 style 
*{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;}
 /style 
 script 
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 = ['较差','较差','还行','推荐','力荐'];
 oUl.onmouseover = function(){
 tip.style.visibility = 'visible';
 oUl.onmouseout = function(){
 tip.style.visibility = 'hidden';
 for( var i=0;i aLi.length;i++ ){
 aLi[i].index = i;
 aLi[i].onclick = function () {
 mark(this.index);
 oUl.index = this.index;
 aLi[i].onmouseover = function(){
 for( var i=0;i aLi.length;i++ ){
 aLi[i].style.color = '#ccc';
 mark(this.index);
 aLi[i].onmouseout = function(){
 for( var i=0;i =this.index;i++ ){
 aLi[i].style.color = '#ccc';
 if(oUl.index !== 'undefined'){
 mark(parseInt(oUl.index));
 function show() {
 tip.style.visibility = tip.style.visibility === 'hidden' 'visible' : 'hidden';
 function mark(index) {
 for( var i=0;i =index;i++ ){
 aLi[i].style.color = index 2 'gray' : 'orange';
 score.innerHTML = arr[index] arr[index] : '待评价';
 /script 
 /head 
 body 
 div id="content" 
 span i * /i 总体评价: /span 
 li /li 
 li /li 
 li /li 
 li /li 
 li /li 
 /ul 
 p id="score" 待评价 /p 
 div 
 span 小提示:点击小星星可以打分 /span 
 li /li 
 li /li 
 li /li 
 li /li 
 li /li 
 i /i 
 /ul 
 /div 
 /div 
 /body 
 /html 

以上所述是小编给大家介绍的JS实现仿百度文库评分功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://jzabcd.cn/jingyan/3313.html