标签：rating const Stars Generator showStars JavaScript stars xgqfrms

Pure JavaScript Stars Generator All In One

padStart & padEnd

// const rating = stars => `★★★★★☆☆☆☆☆`.slice(5 - stars, 10 - stars);

// const rating = stars => `☆☆☆☆☆`.padStart(5 - stars, '★');
// const rating = stars => `★★★★★`.padEnd(5 - stars, '☆');

// const rating = stars => ``.padStart(stars, '★') + ``.padEnd(5 - stars, '☆');

const rating = stars => ``.padStart(stars, '★').padEnd(5, '☆');


const showStars = (color, stars) => {
  var div = document.createElement("div");
  div.append(`rating(${stars}) => ${rating(stars)}`)
  div.style.color = color || 'green';
  document.getElementById('stars').append(div);
}

showStars('MediumSpringGreen', 5)
showStars('MediumTurquoise', 4)
showStars('yellow', 3)
showStars('coral', 2)
showStars('orange', 1)
showStars('red', 0)

demos

<iframe allowfullscreen="true" allowtransparency="true" frameborder="no" height="580.2647705078125" loading="lazy" scrolling="no" src="https://codepen.io/xgqfrms/embed/XWBeGQM?default-tab=result&theme-id=dark" style="width: 100%" title="Star Calculator"> See the Pen Star Calculator by xgqfrms (@xgqfrms) on CodePen. </iframe>

(

标签：rating,const,Stars,Generator,showStars,JavaScript,stars,xgqfrms
From： https://www.cnblogs.com/xgqfrms/p/17060238.html