In the past, when I was doing a server page, I had a page with a star rating. Although it was not nice, I wrote it down.
The value in the selection box controls the number of yellow stars. The principle is to control the CSS display width to achieve the visual effect.
Code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Make Score page </title>
<Style>
. Fivestars,. fivestars Div {Background: transparent URL (../mkscore/commstar.gif) Repeat-x scroll left bottom; width: 130px ;}
. Fivestars {padding: 0; position: relative; line-Height: 28px; display: inline-block ;}
. Fivestars Div {background-position: Bottom center; text-indent:-9999px ;}
. Fivestars Div {background-position: Left top; width: 0px ;}
</Style>
<SCRIPT type = "text/JavaScript">
Function changestars (score)
{
VaR W = 26;/* One star's width */
VaR totalw = W * score;/* score stars */
VaR AA = Document. getelementbyid ("autostars ");
AA. style. width = totalw + "PX ";
}
</SCRIPT>
</Head>
-- select -- 0 0.5 1 1.5 points 2 points 2.5 points 3 points 3.5 points 4 points 4.5 points 5 Points
here, we use the drop-down box to select the star rating, because this system is provided for androidtv, and some JS web page effects are not supported in android2.2 and 2.3, it was originally made to use the mouse to directly click the stars for scoring. later it was changed, and later it was found that it was supported again on android4.0, but it was not changed. In fact, it was also simple, it is the clickable status of opening the DIV with CSS, that is, when the mouse moves to the DIV, The DIV will become a hand-shaped, and then capture the mouse click event through Js, then, you can change the display width to OK. The specific Code will not be remembered.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
