javascript实现五星评分功能


Posted in Javascript onNovember 10, 2015

本文为大家分享了javascript实现五星评分功能的实例代码,大家可以参考学习一下,具体的实现办法如下

在分享javascript实现五星评价功能的实例代码之前,先看一看效果图:

javascript实现五星评分功能

star1.pngjavascript实现五星评分功能star1.pngjavascript实现五星评分功能

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>53</title>
 <script src='js/jquery-1.11.1.js'></script>
 <style>
 *{
  margin: 0;
  padding: 0;
 }
 body{
  padding: 20px;
 }
 .star1{
  width: 70px;
  height: 13px;
  background: url('images/star1.png') repeat-x left center;
 }
 .star2{
/*  width: 60%;*/
  height: 13px;
  background: url('images/star2.png') repeat-x left center;
  float: left;
 }
 </style>
 <script>
 $(function(){
  var fiveStars=function(num){
  if(!num||num<3){
  return '--';
  }
  return '<div class="star1"><div class="star2" style="width:'+num*20+'%"></div></div>';
  }
 var str=fiveStars(4)
 $('body').html(str)
 
 })
 </script>
</head>
<body>
<!--<div class='star1'><div class="star2"></div></div> -->
</body>
</html>

希望本文对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
Js四则运算函数代码
Jul 21 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
AJAX学习笔记
May 18 Javascript
javascript实现密码验证
Nov 10 #Javascript
JavaScript编程的单例设计模讲解
Nov 10 #Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 #Javascript
浅谈javascript中replace()方法
Nov 10 #Javascript
使用jQuery获取data-的自定义属性
Nov 10 #Javascript
javascript适合移动端的日期时间拾取器
Nov 10 #Javascript
js图片轮播手动切换效果
Nov 10 #Javascript
You might like
基于PHP异步执行的常用方式详解
2013/06/03 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
php中namespace及use用法分析
2016/12/06 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
python概率计算器实例分析
2015/03/25 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
网络安全方面的面试题
2016/01/07 面试题
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
注塑工厂厂长岗位职责
2013/12/02 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS