<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.score{
width: 500px;
margin: 200px auto;
border: 1px solid #ddd;
height: 40px;
}
.score a{
display: inline-block;
width: 24px;
height: 24px;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="score" id="score1">

<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
<span id="score_txt">暂无评价...</span>
</div>
<script>
var arr = ["较差","差","一般","好","很好"]
var oA = document.getElementsByTagName("a")
var oSpan = document.getElementById("score_txt")
var n = -1

for (var i=0;i<oA.length;i++) {
oA[i].index = i
oA[i].onmouseover = function(){
for (var i=0;i<oA.length;i++) {
oA[i].style.background = ""
oSpan.innerHTML = "暂无评价...."
}


for (var i=0;i<=this.index;i++) {
oA[i].style.background = "green"
oSpan.innerHTML = arr[this.index]
}


}

oA[i].onmouseout = function(){


for (var i=0;i<oA.length;i++) {
oA[i].style.background = ""
oSpan.innerHTML = "暂无评价...."
}

for (var i=0;i<=n;i++) {
oA[i].style.background = "green"
oSpan.innerHTML = arr[n]
}

}

oA[i].onclick = function(){
n = this.index
for (var i=0;i<=this.index;i++) {
oA[i].style.background = "green"
oSpan.innerHTML = arr[this.index]
}
}


}






</script>
</body>
</html>

js五星评分的更多相关文章

  1. 五星评分效果 原生js

    五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...

  2. 利用jquery实现电商网站常用特效之：五星评分

    这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...

  3. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. js星级评分点击星级评论打分效果--收藏--转载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS原生评分组件

    JS原生评分组件 <html> <head> <meta http-equiv="Content-Type" content="text/h ...

  6. js插件---评分插件Rating如何使用

    js插件---评分插件Rating如何使用 一.总结 一句话总结:form下的input和a标签,input记录值,a标签显示样式 12 <form data-am-rating> 13 ...

  7. jQuery动态五星评分

    效果 css .star ul, .star li { list-style: none; } .star { position: relative; width: 600px; height: 24 ...

  8. 简易-五星评分-jQuery纯手写

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  9. 微信小程序弹出和隐藏遮罩层动画以及五星评分

    参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/ ...

随机推荐

  1. hdu 5441 Travel (2015长春网赛)

    http://acm.hdu.edu.cn/showproblem.php?pid=5441 题目大意是给一个n个城市(点)m条路线(边)的双向的路线图,每条路线有时间值(带权图),然后q个询问,每个 ...

  2. poj 2886 (线段树+反素数打表) Who Gets the Most Candies?

    http://poj.org/problem?id=2886 一群孩子从编号1到n按顺时针的方向围成一个圆,每个孩子手中卡片上有一个数字,首先是编号为k的孩子出去,如果他手上的数字m是正数,那么从他左 ...

  3. Delphi各种Socket组件的模式和模型

    Delphi各种Socket组件的模式和模型 Delphi的大多数书籍里面都没有提到delphi的各种socket通信组件的模式和模型,有的书只讲解了windows的socket模式和模型,并没有归纳 ...

  4. [Jmeter] Run Command to generate a specific listener’s chart report

    Run Command to generate a specific listener’s chart report: Download cmdrunner-2.0.jar : https://jme ...

  5. [Hbase]Hbase章１　Hbase框架及基本概念

    Hbase框架介绍 HBase是一个分布式的.面向列的开源数据库. 不同点: l  和一般的关系数据库不同,hbase是一个适合于非结构化数据存储的数据库. l  Hbase是基于列而不是基于行的模式 ...

  6. java 泛型： 通配符？ 和 指定类型 T

    1. T通常用于类后面和 方法修饰符(返回值前面)后面 ,所以在使用之前必须确定类型,即新建实例时要制定具体类型, 而?通配符通常用于变量 ,在使用时给定即可 ? extends A  :  通配符上 ...

  7. 深入理解python里面类的对象的赋值

    class T(): def __init__(self): self.name= pass a=T() a.name= b=a #深入理解类,类里面的对象的赋值是指针赋值,也就是同时变的 b.nam ...

  8. 【UI测试】－－独特性

  9. ''TclError: no display name and no $DISPLAY environment variable''解决方法

    在模块前写入一下代码: import matplotlib matplotlib.use('Agg') import matplotlib.pyplot as plt 具体解释见   http://m ...

  10. 实现WireCard支付

    实现WireCard支付,暂未完成 WireCardController.cs using System; using System.Collections.Generic; using System ...