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/ ...
随机推荐
- PAT 甲级 1011 World Cup Betting (20)（代码+思路）
1011 World Cup Betting (20)(20 分) With the 2010 FIFA World Cup running, football fans the world over ...
- 一个比较有意思的SDN网络技术相关blog/doc
http://feisky.xyz/sdn/linux/index.html 涵盖了目前主流的网络技术,所有比较有意思的内容全都覆盖了 SDN网络 目录 基本网络 TCP/IP标准模型 DHCP与DN ...
- Python.tornado.0
Tornado https://github.com/facebook/tornado http://www.tornadoweb.org/en/stable/guide/intro.html (A ...
- C++变量存储类别和内存四区
变量存储类别 变量声明/定义的一般形式: 存储类别 数据类型 变量名 存储类别指的是数据在内存中存储的方法.存储方法分为静态存储和动态存储两大类.标准C语言为变量.常量和函数定义了4种存储类型:ext ...
- UVA-1364.Knights of the Round Table 无向图BCC
题目链接:https://vjudge.net/problem/UVA-1364 题意:有n个人参加会议,互相憎恨的人不能坐在相邻的位置,并且每个会议参加的人数必须是奇数,求有多少个人不能参加任何一个 ...
- Intellij IDEA 快捷键整理-鬼畜版（全键盘开发指南）
一 .何为鬼畜? 鬼畜一词在ACG爱好者中也代指通过影片(或音讯)剪辑,用频率极高的重复画面(或声音)组合而成的一段节奏配合音画同步率极高的一类影片,而这类鬼畜影片多见于NICONICO.AcFun和 ...
- Scrapy shell调试返回403错误
一.问题描述 有时候用scrapy shell来调试很方便,但是有些网站有防爬虫机制,所以使用scrapy shell会返回403,比如下面 C:\Users\fendo>scrapy shel ...
- Ubuntu安装R及R包
安装R $sudo apt-get update $sudo apt-get install r-base $sudo apt-get install r-base-dev 安装一些可能的依赖包 $s ...
- sqlalchemy根据数据库结构生成映射的实体
# !/usr/bin/python # -*- coding: UTF-8 -*- from sqlalchemy import * from sqlalchemy.orm import sessi ...
- github 与gitlab之间的工程创建
1.从github上git clone下来一个工程,Clone with HTTPS(不是ssh模式,要权限). 2.进入git下来的包cd 包下,打开gedit /.git/config,内容大致如 ...