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 相关文章推荐
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
JS前端监控采集用户行为的N种姿势
Jul 23 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 使用post,get的一种简洁方式
2010/04/25 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
php强制下载类型的实现代码
2011/04/21 PHP
php数字游戏 计算24算法
2012/06/10 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
matplotlib中legend位置调整解析
2017/12/19 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
大学自荐信
2013/12/12 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
项目申请汇报材料
2014/08/16 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技