JS之评价页面点亮星星进行评价


效果如下:

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style type="text/css">

</style>
</head>
<body>

<script type="text/javascript">

</script><!doctype html>
<html>
<head>
 <meta charset="gbk"> 
 <title>切换</title>
 <style>
.wrapper{width:300px; margin:10px auto; font:14px/1.5 arial;}
/*tab*/
#star{overflow:hidden;}
#star li{
float:left;
width:20px;
height:20px;
margin:2px;
display:inline;
color:#999;
font:bold 18px arial;
cursor:pointer
}
#star .act{
color:#c00
}
#star_word{
width:80px;
height:30px;
line-height:30px;
border:1px solid #ccc;
margin:10px;
text-align:center;
display:none
}
</style>
<script>
window.onload = function(){
  var star = document.getElementById("star");
        var starliArr = star.getElementsByTagName("li");
        var starword = document.getElementById("star_word");
        var word = [ '不满意',  '基本满意', '非常满意'];
        //用for循环对li进行遍历
        for (var i = 0; i < starliArr.length; i++) {
            starliArr[i].index = i;
            starliArr[i].onclick = function () {
                starword.style.display = "block";
                starword.innerHTML = word[this.index];
                //先把星星的属性清空
                for (var j = 0; j < starliArr.length; j++) {
                    starliArr[j].className = '';
                }
                //点亮星星
                for (var j = 0; j <= this.index; j++) {
                    starliArr[j].className = 'act';
                }
            }
        }
}
</script>
</head>
<body>
<div class="wrapper">
<!-- 打分结果  -->
<!-- <span id="result"></span> -->
<ul id="star">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<div id="star_word">一般</div>
</div> 
</body> 
</html>
</body>
</html>

优质内容筛选与推荐>>
1、outlook自动备份
2、linux的自有(内置)服务
3、tyvj1728 普通平衡树
4、Vue-Cli 2.X版本的打包优化简述
5、Asp.Net 构架(HttpModule 介绍) - Part.3


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号