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 相关文章推荐
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
原生JS实现音乐播放器
Jan 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
Vue实现图书管理案例
2021/01/20 Vue.js
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python之用户输入的实例
2018/06/22 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
中学生获奖感言
2014/02/04 职场文书
市场部经理岗位职责
2014/04/10 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
初中家长评语大全
2014/12/26 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang