Home > Article > Web Front-end > JS implements the star rating function

JS implements the star rating function

小云云Original: 2018-03-02 15:40:532333browse

This article mainly shares with you the JS implementation of the star rating function, hoping to help everyone.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>点亮星星评分</title></head><body  onload="test()"><table id ="czy">
    <tr>
        <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>
    </tr></table><input type="button" id="ok" value="打分"><script>
    tds=document.getElementsByTagName("td");    for(var i=0;i<tds.length;i++){
        tds[i].onmouseover=test;
    }    var index;    function  test(){

        for(var i=0;i<tds.length;i++){            if(tds[i]==this)
            {
                index=i;
            }
        }        for(var i=0;i<=index;i++) {
            tds[i].style.color = "red";
        }        for(var i=index+1;i<tds.length;i++){
            tds[i].style.color="black";
        }
    }
    document.getElementById("ok").onclick=function(){
        alert("评分："+(index+1)+"分");
    }</script></body></html>

Related recommendations:

js light up the star rating and get the parameters js code _javascript skills

## in JavaScript Code sharing for implementing the star rating effect

jquery implements a similar Taobao star rating function with screenshots_jquery

The above is the detailed content of JS implements the star rating function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js realizes that exceeding the text becomes an ellipsisNext article：js realizes that exceeding the text becomes an ellipsis

See more

JS implements the star rating function

Related articles