宝哥软件园

js实现星星打分效果的方法

编辑:宝哥软件园 来源:互联网 时间:2021-09-09

本文实例讲述了射流研究…实现星星打分效果的方法。分享给大家供大家参考。具体分析如下:

很多网站都有如下图这样的星星打分效果,今天就看下用射流研究…怎么实现打分效果。

效果详解1.鼠标移上的时候星星点亮,下面的文字显示。鼠标移出的时候星星为灰,下面文字不显示。2.鼠标移到某个星星上,它之前的所有星星都会亮。3.鼠标移到某个星星上并点击,会显示打分结果。代码如下

!doctype html html head meta charset=' gbk ' title切换/title样式。包装器{宽度:300 pxmargin:10px汽车;font :14 px/1.5 arial;}/* tab */#星{溢出:隐藏;} # star li { float:left宽度:20 px高度:20 pxmargin :2 pxdisplay : inlinecolor : # 999 font : bold 18px arialcursor :指针指针}#star .act { color : # c00 } # star _ word { width :80 px;高度:30 px线高:30 pxborder:1px固体# cccmargin:10px文本对齐:居中;显示: none }/stylescriptwindow。onload=function(){ var star=document。getelementbyid(' star ');var star _ Li=star。getelementsbytagname(' Li ');var star _ word=文档。getelementbyid(' star _ word ');var结果=文档。getelementbyid(' result ');var I=0;var j=0;var len=star _ li.lengthvar word=['很差','差','一般','好','很好]为(I=0;伊琳;i ){ star_li[i].索引=我;星光大道.onmouseover=function(){ star _ word。风格。display=' blockstar _ word。innerHTMl=word[this。索引];for(I=0;i=this.indexi ){ star_li[i].星光大道.onmouseout=function(){ star _ word。风格。显示='无';for(I=0;伊琳;i ){ star_li[i].star_li[i].onclick=function(){ result。innerhtml=(这。索引1)分;} } }/script/head dydiv class=' wrapper '打分结果span id=' result '/span ul id=' star ' Li/Lili/Lili/Li/uldiv id=' star _ word '一般/div/div /body /html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。

更多资讯
游戏推荐
更多+