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 相关文章推荐
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
js实现简单进度条效果
Mar 25 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 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
极典R601SW收音机
2021/03/02 无线电
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php实现的双色球算法示例
2017/06/20 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
限制文本字节数js代码
2007/03/06 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
浅析python中的分片与截断序列
2016/08/09 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
化工专业应届生求职信
2013/11/08 职场文书
高中毕业生个人自我鉴定
2013/11/24 职场文书
《小池塘》教学反思
2014/02/28 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
离职感谢信
2015/01/21 职场文书
大一学生个人总结
2015/02/15 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL