jquery实现简单实用的打分程序实例


Posted in Javascript onJuly 23, 2015

本文实例讲述了jquery实现简单实用的打分程序。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.raty.min.js"></script>
<script type="text/javascript">
$(function(){
 $("#div1").hover(function(){
  $("#div1 li").hover(function(){
   h=0;
   n=$("#div1 li").index(this);
   for(var i=0;i<=n;i++){
   $("#div1 li").eq(i).addClass("on");
   }
   $("#div1 li").click(function(){
    h=1;
    m=$("#div1 li").index(this);
    for(var i=0;i<=m;i++){
    $("#div1 li").eq(i).addClass("on");
    }
    return;
   })
  },function(){
   if(h==0)
   for(var i=5;i>=n;i--){
    $("#div1 li").eq(i).removeClass("on");
   }
   }
  )
  },function(){
  if(h==0)
   for(var i=0;i<=5;i++){
   $("#div1 li").eq(i).removeClass("on");
   }
  })
 })
</script>
<style type="text/css">
#div1 ul li{
 margin:0 -8px;
 width:30px;
 height:34px;
 list-style:none;
 float:left;
 width:35px;
 background:url(img/xing1.gif) center center no-repeat;
 margin-left:10px;
}
#div1 ul li.on{
 background:url(img/xing2.gif) center center no-repeat;
}
#div1{
 height:35px;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jquery实现轮播图特效
Apr 12 jQuery
javascript实现框架高度随内容改变的方法
Jul 23 #Javascript
js正则表达式中exec用法实例
Jul 23 #Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 #Javascript
使用jquery实现仿百度自动补全特效
Jul 23 #Javascript
代码分析jQuery四种静态方法使用
Jul 23 #Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 #Javascript
HTML5实现留言和回复页面样式
Jul 22 #Javascript
You might like
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
php的dl函数用法实例
2014/11/06 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
用python代码做configure文件
2014/07/20 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python编写打字训练小程序
2019/09/26 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
酒店保安员岗位职责
2014/01/31 职场文书
小学生期末评语大全
2014/04/21 职场文书
广告宣传策划方案
2014/05/21 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
高中信息技术教学反思
2016/02/16 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers