javascript代码实现简单的五星评价功能！
<script type="text/javascript">
//★
var spans=document.getElementsByTagName("span");
var flag=5;//这个值随便取，只要不是01234就行
var Expand=function(){
//扩展代码，暂无
};
onload=function(){
//循环载入鼠标移入事件
for(var i=0;i<spans.length;i++){
spans[i].onmouseover=function(){
var id=parseInt(this.id);
for(var i=0;i<=id;i++){
spans[i].innerHTML="★";
}
for(var j=id+1;j<5;j++){
spans[j].innerHTML="☆";
}
};
}
//循环载入鼠标点击星星事件
for(var i=0;i<spans.length;i++){
spans[i].onclick=function(){
var id=parseInt(this.id);
flag=id;
for(var i=0;i<=id;i++){
spans[i].innerHTML="★";
}
Expand();//这里是鼠标点击星星的扩展，例如出现分值之类的，总之要扩展什么随你的大小便啦~
};
}
//载入鼠标离开div事件
document.getElementById("div").onmouseout=function(){
//如果tag是3，则循环给把0 1 2 3几个星星整黄
if(flag>=0 && flag<=4){
for(var i=0;i<=flag;i++){
spans[i].innerHTML="★";
}
for(var j=flag+1;j<5;j++){
spans[j].innerHTML="☆";
}
}
//如果tag没有值或者是初值5，则把所有的星星还原成空星星
else{
for(var i=0;i<spans.length;i++)
{
spans[i].innerHTML="☆";
}
}
};
};
</script>
</head>
<body>
<div id="div">
<span id="0">☆</span><span id="1">☆</span><span id="2">☆</span><span id="3">☆</span><span id="4">☆</span>
</div>
</body> 我是新手，优化还不够，欢迎指正
javascript代码实现简单的五星评价功能！的更多相关文章
- jquery代码实现简单的五星评价功能！
实现: 1,鼠标移动到第三个星星,则一二三星星变亮,后两个变暗 2,鼠标点击某个星星后,可以继续选择,但拿开后星星会定格住你点击的位置 <script type="text/javas ...
- 五十行javascript代码实现简单的双向数据绑定
五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前端开发的同学都使用过,它的双向数据绑定机制能给我们带来很大的方便.今天闲着没事,尝试着实现一下双向数据绑定,接下来给大家分享一 ...
- JavaScript实现一个简单的密码输入功能
常见的密码输入框当输入字符后会被替换成‘*’,而且旁边会有个小眼睛可以查看原本的字符,虽然input标签有这个功能,但这只是自己正在看正则表达式的时候突然想到的,就当做个练习,自己手动实现下: < ...
- 林大妈的JavaScript基础知识（二）：编写JavaScript代码前的一些简单工作
在介绍JavaScript语法前,我们需要知道,学习语法必须要多利用手敲代码来巩固记忆.因此,由于JavaScript的特性,它不能像C++和Java一样独立地编译及运行,我们需要在调试运行JavaS ...
- 通过javascript库JQuery实现页面跳转功能代码
通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...
- 简单的页面互点Javascript代码
简单的页面互点Javascript代码,可以适用于前端$(function(){ $('.ip_b_con_item li,.pro_index_list li').mouseover(functio ...
- 从零开始实现基于微信JS-SDK的录音与语音评价功能
最近接受了一个新的需求,希望制作一个基于微信的英语语音评价页面.即点击录音按钮,用户录音说出预设的英文,根据用户的发音给出对应的评价.以下是简单的Demo: 函数
Socket可以理解为两台计算机相互通信的通道. 用法:使用fsockopen()函数 具体用法详见上篇文章.函数的参数为URL.端口号.一个存放错误编号的变量.一个存放错误信息字符串的变量和超时等待 ...
- jQuery的ready方法实现原理分析
jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺 ...
- iOS_23_undress Girl
最后效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill ...
- June本地环境搭建
python-china.org论坛使用的June程序就是这货了,使用了Python Flask + SQLite + Node.js 的轻论坛,以后就打算拿这个学习了,如果可能,进行二次开发. Gi ...
- 深入了解 Java HelloWorld
Java 的 Hello World 代码 public class HelloWorld { /** * * @param args */ public static void main(Strin ...
- SQL Server 创建表分区
原文:SQL Server 创建表分区 先准备测试表 CREATE TABLE [dbo].[Employee] ( EmployeeNo ,) PRIMARY KEY, EmployeeName ) ...
- DataUml Design 课程6-DataUML Design 1.1版本号正式宣布（支持PD数据模型）
从DataUML Design正式宣布到现在两个月,因为最近忙,出版到现在为止1.1版本号.稍后我们将始终坚持以良好DataUML Design软件,我希望程序员有很多支持. 一.1.1新的和改进的版 ...
- 利用Matlab生成一个网格化的三维三轴椭球面（生成直角坐标）
代码很简单,a,b,c分别为椭球的三轴轴长,a=b=c时得到的是三维球面,a=b!=c时得到的是三维椭球面,a!=b且a!=c且b!=c时得到的是三维旋转椭球面 %生成一个笛卡尔坐标系下三轴椭球表面的 ...
- C51编译器扩展的关键词 & C51中断函数的写法
C51根据单片机的特性扩展了相关的关键字,如下表示: 关键词 用途 说明 bit 位变量声明 声明了一个位变量或者位类型的函数 sbit 位变量声明 声明了一个可位寻址变量 sfr 特殊功能寄存器声明 ...
- iOS国际化和genstrings所有子目录本地化字符串
最近在忙着一个国外项目,天天加班,没时间更新博客.就简单讲讲国际化的知识. 首先,我们使用字符串,必须用NSLocalizedString(key,comment),这样我们在不同的Localizab ...