美文网首页javaScript
js - 星级展示

js - 星级展示

作者: 反者道之动001 | 来源:发表于2017-10-16 18:59 被阅读13次

星级展示 函数, 支持半星

    function showScore(score, icon) {
        if (isNaN(score)) return ''
        let maxNum, on, off, half, scoreInt, num, remainder

        maxNum = 5
        scoreInt = score|0
        scoreInt = score|0
        remainder = (score*100 - scoreInt*100) / 100        
        remainder >= .8 ? num = scoreInt+1 : remainder <= .2 ? num = scoreInt : (num = scoreInt, half = 1)
        on = new Array(num+1).join(icon[0])
        off = new Array(maxNum - num+1 - (half?1:0)).join(icon[1])
        return on + (half ? icon[2] : '') + off
    }
console.log('%c' +showScore(1.4, ['<星星>', '<无星>', '<半星>']), 
'color: #fff; background: #000; font-size: 30px; line-height: 4em; padding: 1em; letter-spacing: .5em;')
效果

相关文章

  • js - 星级展示

    星级展示 函数, 支持半星

  • 原生JS实现Tab切换效果和模态框效果

    原生JS实现Tab切换效果 效果展示 原生JS实现模态框效果 效果展示

  • JS实现星级评分

    朋友给我一份星级评价的html代码,说不能实现多行星级评价,让我帮忙看一下。 帮朋友修改的,怕到时候自己也用到了,...

  • js生成星级评分

    conststartScore=rate=>"★★★★★☆☆☆☆☆".slice(5-rate,10-rate);...

  • CSS 3D翻转动画

    效果展示: JS BIN 代码展示: [html]                 [css] .card {...

  • 3月阅读书单

    《Node.js实战》,《node.js开发指南》推荐星级: 4星都是比较优秀的关于node.js的书籍,我是在看...

  • 事件循环机制

    js是单线程的。浏览器: js执行线程:负责执行js代码 UI线程:负责UI展示,负责展示给用户看到的页面 js事...

  • 小程序端上传图片

    效果展示 html js css

  • 雅泰酒店家具定制的设计风格

    影响到五星级酒店的档次、环境的因素是多方面的,五星级酒店家具作为星级酒店的装修配套组成部分,其对酒店环境展示及吸引...

  • Flutter-五角星评分组件

    评分展示: 我们需要根据不同的评分显示不同的星级展示,这里我封装了一个XFStarRating的小Widget来实...

网友评论

本文标题:js - 星级展示

本文链接:https://www.haomeiwen.com/subject/vljluxtx.html