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 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
vue时间格式化实例代码
Jun 13 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
使用微信SDK自定义分享的方法
2019/07/03 Javascript
JS实现分页导航效果
2020/02/19 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
Python之循环结构
2019/01/15 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Django静态文件加载失败解决方案
2020/08/26 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
《曹刿论战》教学反思
2014/03/02 职场文书
文明演讲稿范文
2014/05/12 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
求职信如何撰写?
2019/05/22 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
导游词之塘栖古镇
2019/12/04 职场文书