<!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. oracle主键修改&设置某一字段可以为null

    1.oracle主键修改 1.1)首先查看需要修改的表的主键名,默认的情况下,数据库会自动分配 select * from user_cons_columns where table_name='表名 ...

  2. De novo RNA-Seq Assembly Using De Bruijn Graphs

    De novo RNA-Seq Assembly Using De Bruijn Graphs  2017-06-12 09:42:47     59     0     0 在说基因组的拼接之前,可 ...

  3. 简单理解RNA-seq

    简单理解RNA-seq 刘小泽 已关注 2018.10.17 23:51* 字数 1518 阅读 46评论 0喜欢 3 今天就当一个小故事看吧,看了statQuest,感觉讲的很棒,于是分享给大家原版 ...

  4. UIDataPicker 时间选择器

    自用时间选择器 @interface ViewController () { UILabel *cityLabel; UIDatePicker *datePicker; } //@property(n ...

  5. http协议（一）一些基础知识

    当我们在浏览器的地址栏中输入网址,然后点击回车,接着,浏览器就会呈现出我们需要的web界面,那么,这个界面是怎么产生的? web的界面是根据我们输入的URL(网址.地址),浏览器从服务器端获取对应的文 ...

  6. 网页启用Gzip压缩 提高浏览速度

    启用Gzip压缩的好处 它的好处显而易见,提高网页浏览速度,无论是之前说的精简代码.压缩图片都不如启用Gzip来的实在.下图为启用Gzip后的效果. Gzip压缩效率非常高,通常可以达到70%的压缩率 ...

  7. Spring IOC（四）FactoryBean

    Spring IOC(四)FactoryBean Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) 一般情况下,Spring ...

  8. Python之路(第六篇)Python全局变量与局部变量、函数多层嵌套、函数递归

    一.局部变量与全局变量 1.在子程序中定义的变量称为局部变量,在程序的一开始定义的变量称为全局变量.全局变量作用域是整个程序,局部变量作用域是定义该变量的子程序. 全局变量没有任何缩进,在任何位置都可 ...

  9. Internet

    0x01 URL的解析/反解析/连接 解析 urlparse()--分解URL # -*- coding: UTF-8 -*- from urlparse import urlparse url = ...

  10. maven打包之后为什么class文件中没有注释了？

    <!--生成doc jar包--> <plugin> <groupId>org.apache.maven.plugins</groupId> <a ...