请选择 进入手机版 | 继续访问电脑版

马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#技术求助 ASP.NET技术求助

【源码下载】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接外包项目】 面试-葵花宝典下载

官方一群:

官方二群:

分享一个原生js实现的五星评分

[复制链接]
查看3407 | 回复1 | 2017-1-15 00:32:00 | 显示全部楼层 |阅读模式
转至博客园 昵称:森林长 链接: 传送门 其实五星评分在电商系统可以说是很普遍。实现的方式也五分八门,各种写法都有
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript星级评分</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
    tr,td{font-size:66px;color:#000000;background:#ffffff;}
    </style>
    <script type="text/javascript">
        function ArrayIndexOf(arr, element) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == element) {
                    return i;
                }
            }
            return -1;
        }
        function GetTds() {
            var tbl = document.getElementById("tblMain");
            var tds = tbl.getElementsByTagName("td");
            return tds;
        }
        function InitEvent() {
           var tds=GetTds();
           for (var i = 0; i < tds.length; i++) {
               var td = tds[i];
               td.onmouseover = TdOnclick;
               td.style.cursor = "pointer";

            }
        }
        function TdOnclick() {
            var tds = GetTds();
            var index = ArrayIndexOf(tds, this);  
            for (var i = 0; i <=index; i++) {
                var td = tds[i];
                td.innerHTML = "★";
            }
            for (var j = index + 1; j < tds.length; j++) {  
                var td = tds[j];
                td.innerHTML = "☆";
            }
        }
    
    </script>
</head>
<body  class="wrapper">
<table id="tblMain">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>

ibcadmin | 2017-1-16 14:04:22 | 显示全部楼层
+1
C#论坛 www.ibcibc.com IBC编程社区
C#
C#论坛
IBC编程社区
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则