這篇文章主要介紹了javascript實(shí)現(xiàn)五星評(píng)分功能，大家現(xiàn)在會(huì)見(jiàn)到許多五星評(píng)級(jí)，知道是如何實(shí)現(xiàn)的嗎？文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了javascript實(shí)現(xiàn)五星評(píng)分功能的實(shí)例代碼，大家可以參考學(xué)習(xí)一下，具體的實(shí)現(xiàn)辦法如下

在分享javascript實(shí)現(xiàn)五星評(píng)價(jià)功能的實(shí)例代碼之前，先看一看效果圖：

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>

希望本文對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

10道典型的JavaScript面試題
本文主要介紹了10道典型的JavaScript面試題。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
一個(gè)簡(jiǎn)單的js樹(shù)形菜單
說(shuō)到樹(shù)形菜單，貌似一般是用在一些管理系統(tǒng)里面的，我是還沒(méi)有用到過(guò)，有些zTree之類(lèi)的插件已經(jīng)做得比較好了
2011-12-12
微信小程序商城項(xiàng)目之購(gòu)物數(shù)量加減(3)
這篇文章主要為大家詳細(xì)介紹了微信小程序商城購(gòu)物數(shù)量加減功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
全面介紹javascript實(shí)用技巧及單豎杠
關(guān)于js 和javascript的技巧文章已經(jīng)不少了，但是這篇文章則更加詳細(xì)全面，文章先是介紹了使用技巧，而后詳細(xì)解釋了js運(yùn)算符單豎杠“|”的用法和作用及js數(shù)據(jù)處理。
2016-07-07
微信小程序函數(shù)防抖解決重復(fù)點(diǎn)擊消耗性能問(wèn)題實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序使用函數(shù)防抖解決重復(fù)點(diǎn)擊消耗性能問(wèn)題實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
JavaScript函數(shù)式編程實(shí)現(xiàn)介紹
函數(shù)式編程是一種編程范式,將整個(gè)程序都由函數(shù)調(diào)用以及函數(shù)組合構(gòu)成。可以看成一條流水線(xiàn),數(shù)據(jù)可以不斷地從一個(gè)函數(shù)的輸出流入另一個(gè)函數(shù)的輸入,最后輸出結(jié)果
2022-09-09
在小程序中使用canvas的方法示例
這篇文章主要介紹了在小程序中使用canvas的方法示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
無(wú)間斷滾動(dòng)的新聞文章列表多瀏覽器兼容
無(wú)間斷滾動(dòng)的新聞文章列表多瀏覽器兼容...
2007-01-01
css+js實(shí)現(xiàn)部分區(qū)域高亮可編輯遮罩層
下面介紹我在項(xiàng)目中實(shí)現(xiàn)的方式，全屏遮罩，部分區(qū)域可操作,需要的朋友可以參考下
2014-03-03
scrollWidth,clientWidth,offsetWidth的區(qū)別
這篇文章主要介紹了scrollWidth,clientWidth,offsetWidth的區(qū)別,需要的朋友可以參考下
2015-01-01