js快速打印一个五分制（五颗星）的评分情况

1.函数

下面这个函数实现了在html页面中快速打印一个五分制（五颗星）的评分情况：

1 function getRating(rating) {
2     if(rating > 5 || rating < 0) throw new Error('数字不在范围内');
3         return "★★★★★☆☆☆☆☆".substring(5 - rating, 10 - rating );
4 }

2.demo如下

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 6 <title>star</title>
 7 <style>
 8 body, div {
 9     padding: 0;
10     margin: 0;
11 }
12 </style>
13 </head>
14 
15 <body>
16     <div  id="x" onclick="getRating(3);">Click me</div>
17 <script>
18 function getRating(rating) {
19     if(rating > 5 || rating < 0) throw new Error('数字不在范围内');
20     var div=document.getElementById('x');
21     div.innerHTML="★★★★★☆☆☆☆☆".substring(5 - rating, 10 - rating );
22 }
23 </script>
24 </body>
25 </html>

4.效果图

5.说明

substring函数时js的原生函数，其用法如下：

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法

stringObject.substring(start,stop)

参数	描述
start	必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop	可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

参数

描述

start

必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。

stop

可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

说明

substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。

如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。