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: ![](reecode/qrcode.pn ...
- javascript代码 调试方法
你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...
- 7个高性能JavaScript代码高亮插件
本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...
随机推荐
- Apache无法启动解决 the requested operation has failed
Apache不能启动解决办法 原因一:80端口占用例如IIS,另外就是迅雷. 原因二:软件冲突装了某些软件会使apache无法启动如Dr.com 你打开网络连接->TcpIp属性->高级- ...
- Linux开源模块迁移概述暨交叉编译跨平台移植总结－－从《嵌入式Linux驱动模板简洁和工程实践》
本文摘录<嵌入式Linux驱动模板简洁和工程实践>一本书"开发和调试技术". Linux强大的是,有那么多的开源项目可以使用.通常非常需要可以通过寻找相关的源模块被定义 ...
- .NET源代码的内部排序实现
使用JetBrains的DotPeek工具能够方便地查看.net的部分源代码.于是看了一下.NET的内部是怎样实现排序的算法. 在System.Collections.Generic 命名空间下能够看 ...
- Objective-C和Swift
在项目中同时使用Objective-C和Swift 苹果发布的Swift语言可以和之前的Objective-C语言同时存在于一个项目中. 可能有人会认为是同一个类文件中既可以有Objective-C也 ...
- 解决水晶报表提示“未知的查询引擎错误” FOR VS2010
原文:解决水晶报表提示“未知的查询引擎错误” FOR VS2010 在VS2010环境下运行水晶报表(当然要先装上Crystal Report For VS2010), 在SetDataSource方 ...
- Get Resultset from Oracle Stored procedure
http://stackoverflow.com/questions/1170548/get-resultset-from-oracle-stored-procedure
- jquery无缝滚动效果实现
demo如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 解决：错误的语法：”XXXX“必须是批处理中仅有的语句
原文:解决:错误的语法:”XXXX“必须是批处理中仅有的语句 SQL Server 数据库提示“错误的语法:”XXXX“必须是批处理中仅有的语句”报错的原因分析 解析:批处理必须以 CREATE ...
- ODBC操作excel
//ODBC连接Excel public static void main(String[] args) { Connection conn = null; Statement stm = nul ...
- DEBUG不能进断点 “exited with code -1073741515”
需要把相关的DLL文件加入到项目对应的DEBUG路径下 IDE :Qt Creator 系统:Win7