js五星评分
<!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五星评分的更多相关文章
- 五星评分效果 原生js
五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...
- 利用jquery实现电商网站常用特效之：五星评分
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...
- js星级评分点击星级评论打分效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js星级评分点击星级评论打分效果--收藏--转载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS原生评分组件
JS原生评分组件 <html> <head> <meta http-equiv="Content-Type" content="text/h ...
- js插件---评分插件Rating如何使用
js插件---评分插件Rating如何使用 一.总结 一句话总结:form下的input和a标签,input记录值,a标签显示样式 12 <form data-am-rating> 13 ...
- jQuery动态五星评分
效果 css .star ul, .star li { list-style: none; } .star { position: relative; width: 600px; height: 24 ...
- 简易-五星评分-jQuery纯手写
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
- 微信小程序弹出和隐藏遮罩层动画以及五星评分
参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/ ...
随机推荐
- 洛谷1312 Mayan游戏
原题链接 讨厌这种大搜索题 基本就是模拟搜索,注意细节即可. 以下是我用的两个剪枝: 将块向左移的前提是左边为空,因为该题要求先右后左,所以若左边有块,那么在上一次搜索向右移的时候一定会搜过,且字典序 ...
- python httplib2应用get post
import httplib2,time #装饰器方法,用于记录方法消耗时间 #推荐将print 改成log def timer(func): def _warpper(self,*argv) ...
- How to make a USB stick use ISO image file in debian
4.3.1. Preparing a USB stick using a hybrid CD or DVD image Debian CD and DVD images can now be writ ...
- Binary Prefix Divisible By 5 LT1018
Given an array A of 0s and 1s, consider N_i: the i-th subarray from A[0] to A[i] interpreted as a bi ...
- centos安装tomcat7.0.70
抄自:https://www.cnblogs.com/www1707/p/6592504.html apache-tomcat-7.0.70jdk-7u67-linux-x64 下载tomcathtt ...
- spring学习七 spring和dynamic project进行整合
spring和web项目进行整合,其实就是在项目启动时,就创建spring容器,然后在servlet中使用spring容器进行开. 注意:为了页面可以访问到servlet,因此servlet必须放进t ...
- spring学习 四 对象的创建
spring中,有三种创建对象的方式 (1)构造创建 (2)实例工厂构造 (3)静态工厂构造 一 构造器创建 在构造器创建对象时,有无参构造和有参构造 两种 (1)在spring中,默认的是无参构造 ...
- 计算器的改良(NOIP2000)
题目链接:计算器的改良 这道题,不是很难,但代码也短不到哪去. 我们这里决定采取边读入边计算的方法,因为题目没有明确说式子有多长. 我们需要计算什么? 我们需要知道等号两边未知数的系数和常数项即可. ...
- 字符串方法 charAt()/charCodeAt()/indexOf()/lastIndexOf()
charAt()与charCodeAt() 语法:stringObject.charAt(index) 功能:返回stringObject中index位置的字符 语法:stringObject.cha ...
- 3、iOS Xcode创建protocol(代理).h文件