javascript 星级评分效果(手写)_Javascript教程-查字典教程网
javascript 星级评分效果(手写)
javascript 星级评分效果(手写)
发布时间:2016-12-30 来源:查字典编辑
摘要:今天上午抽空随手写了个星级评分的效果,给大家分享下。由于水平有限,如有问题请指出。首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态。...

今天上午抽空随手写了个星级评分的效果,给大家分享下。由于水平有限,如有问题请指出。

首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态。如图:

最后附上代码:

复制代码 代码如下:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>javascript星级评分</title>

<style type="text/css">

*{margin:0;padding:0;}

.wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}

a{float:left;width:26px;height:20px;background:url(star.png) 0 -20px no-repeat;}

p{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;}

</style>

</head>

<body>

<div>

<a href="javascript:;"></a>

<a href="javascript:;"></a>

<a href="javascript:;"></a>

<a href="javascript:;"></a>

<a href="javascript:;"></a>

</div>

<p></p>

</body>

</html>

<script type="text/javascript">

window.onload = function(){

var star = document.getElementsByTagName('a');

var oDiv = document.getElementsByTagName('div')[0];

var temp = 0;

for(var i = 0, len = star.length; i < len; i++){

star[i].index = i;

star[i].onmouseover = function(){

clear();

for(var j = 0; j < this.index + 1; j++){

star[j].style.backgroundPosition = '0 0';

}

}

star[i].onmouseout = function(){

for(var j = 0; j < this.index + 1; j++){

star[j].style.backgroundPosition = '0 -20px';

}

current(temp);

}

star[i].onclick = function(){

temp = this.index + 1;

document.getElementsByTagName('p')[0].innerHTML = temp + ' 颗星';

current(temp);

}

}

//清除所有

function clear(){

for(var i = 0, len = star.length; i < len; i++){

star[i].style.backgroundPosition = '0 -20px';

}

}

//显示当前第几颗星

function current(temp){

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

star[i].style.backgroundPosition = '0 0';

}

}

};

</script>

附上下载地址

PS:这是本人闲着无聊,通过自己所学的 javascript 知识,随意写的一些效果。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类