Pure JavaScript Stars Generator All In One

Pure JavaScript Stars Generator All In One

纯 JavaScript 实现星星( 评分 / 评级 / 等级)生成器

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

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

CSS 字体渐变色 / CSS 多背景图片

https://www.cnblogs.com/xgqfrms/p/12913451.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd

Windows 10 Emoji shortcuts All In One

https://www.cnblogs.com/xgqfrms/p/14209166.html

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---