js点亮星星评分并获取参数的js代码

前端技术 2023/09/08 JavaScript

用到的图片如下：

在线演示地址：http://demo.phpstudy.net/js/2014/jsxxdf/demo2.html

完整代码：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

<head>

<title>网页特效 添加行为的星星评级效果 phpstudy欢迎您.</title>

<!--

body{font-size:12px;}

ul{padding:0;margin:0;}

.star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(http://demo.phpstudy.net/demoimg/rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;}

.star_rating li{padding:0;margin:0;float:left;}

.star_rating li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}

.star_rating li a:hover{background:url(http://demo.phpstudy.net/demoimg/rating_stars.gif) 0 12px;z-index:2;left:0;}

.star_rating a.one_star{left:0;}

.star_rating a.one_star:hover{width:14px;}

.star_rating a.two_stars{left:14px;}

.star_rating a.two_stars:hover{width:28px;}

.star_rating a.three_stars{left:28px;}

.star_rating a.three_stars:hover{width:42px;}

.star_rating a.four_stars{left:42px;}

.star_rating a.four_stars:hover{width:56px;}

.star_rating a.five_stars{left:56px;}

.star_rating a.five_stars:hover{width:70px;}

.star_rating li.current_rating{background:url(http://demo.phpstudy.net/demoimg/rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;}

#www_zzjs_net{margin:0 0 20px 20px;}

#www_zzjs_net p{margin:20px 0 5px 0;}

-->

</style>

</meta></meta></head>

<body>

phpstudy,站长必备的高质量网页特效和广告代码。<hr/>

<div>

</input></li>

<li class=\"current_rating\">default level</li>

</ul>

</input></li>

<li class=\"current_rating\">default level</li>

</ul>

</input></li>

<li class=\"current_rating\">default level</li>

</ul>

</div>

</input></form>

<!--

function __start(){

var initialize_width=0;

if(document.getElelmentById){return false};

if(document.getElementsByTagName==null){return false;}

var startLevelObj=document.getElementById(\"www_zzjs_net\")

if(startLevelObj==null){return false;}

initialize_width=parseInt(startLevelObj.getAttribute(\"star_width\"),10);

if(isNaN(initialize_width) || initialize_width==0){return false;}

var ul_obj=startLevelObj.getElementsByTagName(\"ul\");

if(ul_obj.length<1){return false;}

var length=ul_obj.length;

var li_length=0;

var a_length=0;

var li_obj=null;

var a_obj=null;

var defaultInputObj=null;

var defaultValue=null;

for(var i=0;i<length;i++){

li_obj=ul_obj[i].getElementsByTagName(\"li\");

li_length=li_obj.length;

if(li_length<0){return false;}

//获取默认值

defaultInputObj=li_obj[0].getElementsByTagName(\"input\");if(!defaultInputObj){return false;}

defaultValue=parseInt(defaultInputObj[0].value,10);

if(!isNaN(defaultValue) && defaultValue!=0){

//alert(\"有初始值!\");

//li_obj[1].style.width=initialize_width*defaultValue+\"px\";

//defaultValue=0;

}

for(var j=0;j<li_length;j++){

a_obj=li_obj[j].getElementsByTagName(\"a\");

if(a_obj.length<1){continue;}

if(a_obj[0].className.indexOf(\"star\")>0){

a_obj[0].onclick=function(){

return give_value(this);

}

a_obj[0].onfocus=function(){

this.blur();

}

function give_value(obj){

var status=true;

var parent_obj=obj.parentNode;

var i=0;

while(status){

i++;

if(parent_obj.nodeName==\"UL\"){break;}

parent_obj=parent_obj.parentNode;

if(i>1000){break;}//防止找不到ul发生死循环

}

var hidden_input=parent_obj.getElementsByTagName(\"input\")[0];

if(hidden_input.length<1){/*alert(\"sorry?\\nprogram error!\")*/;}

var txt=obj.firstChild.nodeValue;//确保不能存在空格哦，因为这里用的firstChild

if(isNaN(parseInt(txt,10))){/*alert(\'level error!\')*/;return false;}

hidden_input.setAttribute(\"value\",txt.toString());

//固定选中状态,先找到初始化颜色那个li

var current_li=parent_obj.getElementsByTagName(\"li\");

var length=current_li.length;

var ok_li_obj=null;

for(var i=0;i<length;i++){

if(current_li[i].className.indexOf(\"current_rating\")>=0){

ok_li_obj=current_li[i];break;//找到

}

__current_width=txt*14;

ok_li_obj.style.width=__current_width+\"px\";

return false;

}

__start();

//-->

</script>

</body>

</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

本文地址：https://www.stayed.cn/item/23287

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)