编程 Javascript

javascript实现五星评分功能

Posted in Javascript onNovember 10, 2015

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

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

javascript实现五星评分功能

star1.pngstar1.png

具体代码：

<!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实现五星评分功能

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用jscript启动sqlserver

Jun 21 Javascript

css配合jquery美化 select

Nov 29 Javascript

jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

Dec 02 Javascript

js抽奖实现随机抽奖代码效果

Dec 02 Javascript

javascript实现验证身份证号的有效性并提示

Apr 30 Javascript

node.js调用C++开发的模块实例

Jul 03 Javascript

JavaScript简单下拉菜单实例代码

Sep 07 Javascript

Javascript中神奇的this

Jan 20 Javascript

H5移动端适配 Flexible方案

Oct 24 Javascript

node.js基于mongodb的搜索分页示例

Jan 22 Javascript

JavaScript基础心法数据类型

Mar 05 Javascript

低门槛开发iOS、Android、小程序应用的前端框架详解

Oct 16 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