前端开发-星级评分系统

微信h5页面前端开发框架
企业端 前端开发框架
前端移动app开发框架

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style>
            div {
                width: 500px;
                height: 125px;
                margin: 0 auto;
                position: relative;
            }
            p {
                display: inline-block;
                float: left;
            }
            ul {
                list-style: none;
                float: left;
            }
            /*li{ background: url(“star.png”) no-repeat; width: 25px; height: 19px; float: left; cursor: pointer; }*/
            li {
                border: 1px solid #000;
                width: 25px;
                height: 19px;
                float: left;
                cursor: pointer;
            }
            /*span{ background: url(“icon.gif”) no-repeat; width: 179px; height: 67px; display: block; left: 92px; position: absolute; top: 36px; display:none; }*/
            span {
                border: 1px solid #000;
                width: 179px;
                height: 67px;
                display: block;
                left: 92px;
                position: absolute;
                top: 36px;
                display: none;
            }
            h6 {
                margin: 6px;
                font-size: 4px;
                color: red;
            }
            b {
                font-size: 10px;
                padding: 0 6px;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div>
            <p>点击星星就能评分</p>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <span>
                <h6></h6>
                <b></b>
            </span>
            <p style=”margin-top: 100px;”></p>
        </div>
        <script>
            var score = [
                ‘1分,很不满意’,
                ‘2分,不满意’,
                ‘3分,一般’,
                ‘4分,满意’,
                ‘5分,非常满意’,
            ]
            var value = [
                ‘差得太离谱,与卖家描述的严重不符,非常不满’,
                ‘部分有破损,与卖家描述的不符,不满意’,
                ‘质量一般,没有卖家描述的那么好’,
                ‘质量不错,与卖家描述的基本一致,还是挺满意的’,
                ‘质量非常好,与卖家描述的完全一致,非常满意’,
            ]
            var position = [92, 119, 146, 173, 200]
            var liArr = document.getElementsByTagName(‘li’)
            var txtScore = document.getElementsByTagName(‘h6’)
            var txtValue = document.getElementsByTagName(‘b’)
            var span = document.getElementsByTagName(‘span’)[0]
            var p = document.getElementsByTagName(‘p’)[1]
            var checkNum
            for (var i = 0; i < liArr.length; i++) {
                liArr[i].index = i
                liArr[i].onmouseover = function() {
                    console.log(this.index)
                    setStar(this.index + 1)
                    txtScore[0].innerHTML = score[this.index]
                    txtValue[0].innerHTML = value[this.index]
                    span.style.display = ‘block’
                    span.style.left = position[this.index] + ‘px’
                }
                liArr[i].onmouseout = function() {
                    span.style.display = ‘none’
                    for (var m = 0; m < liArr.length; m++) {
                        // liArr[m].style.backgroundPositionY = “0”;
                        liArr[m].style.backgroundColor = ‘#FFF’
                    }
                    if (checkNum || checkNum == 0) {
                        setStar(checkNum + 1)
                    }
                }
                liArr[i].onclick = function() {
                    checkNum = this.index
                    for (var j = 0; j < liArr.length; j++) {
                        if (j < this.index + 1) {
                            // liArr[j].style.backgroundPositionY = “-27px”;
                            liArr[j].style.backgroundColor = ‘blue’
                        } else {
                            // liArr[j].style.backgroundPositionY = “0”;
                            liArr[j].style.backgroundColor = ‘#fff’
                        }
                    }
                    p.innerHTML =
                        txtScore[0].innerHTML + ‘&nbsp’ + txtValue[0].innerHTML
                }
            }
            function setStar(num) {
                for (var j = 0; j < num; j++) {
                    // liArr[j].style.backgroundPositionY = “-27px”;
                    liArr[j].style.backgroundColor = ‘blue’
                }
            }
        </script>
    </body>
</html>
前端开发三大框架
最流行前端开发框架对比 2016
.net快速前端开发框架下载
» 本文来自:前端开发者 » 《前端开发-星级评分系统》
» 本文链接地址:https://www.rokub.com/7251.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!