你信不信,只要学几天javascript就可以使用纯原生实现五星评分效果 【附完整代码】

简介: javascript纯原生实现五星评分效果

🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步!😄
🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注

2.png

效果展示

3.gif

图片素材

4.gif

HTML代码

<div id="star">
    <h5>点击星星就能打分</h5>
    <ul>
        <li class="active"><a href="javascript:;"></a></li>
        <li><a href="javascript:;"></a></li>
        <li><a href="javascript:;"></a></li>
        <li><a href="javascript:;"></a></li>
        <li><a href="javascript:;"></a></li>
    </ul>
    <p>显示文字信息:<span></span></p>
</div>

CSS代码

* {
   
   
    margin: 0;
    padding: 0;
}

body {
   
   
    color: #666;
    font-size: 12px;
    font-family: '微软雅黑';
}

ul {
   
   
    list-style-type: none;
}

#star {
   
   
    position: relative;
    width: 400px;
    margin: 100px auto;
    border: 1px solid red;
    border-radius: 10px;
    padding: 30px;
}

#star h5 {
   
   
    width: 100px;
    margin: 0 auto;
    line-height: 19px;
    text-align: center;
}

#star ul {
   
   
    margin: 20px 20px;
    border: 1px saddlebrown solid;
    overflow: hidden;
    padding: 10px;
}

#star ul li {
   
   
    float: left;
    width: 27px;
    height: 27px;
    cursor: pointer;
    background: url("img/star.gif") no-repeat;
}

#star li.active {
   
   
    background-position: 0 -29px;
}

#star>p{
   
   
    border: 1px solid red;
    width: 200px;
    margin: 0 auto;
    padding: 10px;
}
#star>p>span{
   
   
    color: red;
}

javascript 代码

window.onload = function () {
   
   


    var oStar = document.getElementById("star");

    var oLi = oStar.getElementsByTagName("li");

    var oUl = oStar.getElementsByTagName("ul")[0];

    var oP = oStar.getElementsByTagName("p")[0];
    var oSpan = oP.getElementsByTagName("span")[0];

    var iScore = iStar = 0;

    var message = ['很不满意', '不满意', '一般', '满意', '非常满意'];
    var index=0;

    var onoff=false;
    for (var i = 0; i < oLi.length; i++) {
   
   
        oLi[i].index = i;
        oLi[i].onmousemove = function () {
   
   
            oSpan.innerHTML=message[this.index];
            _showStar(this.index);
        }
        oLi[i].onmouseout = function () {
   
   
            if(onoff==false){
   
   
                oSpan.innerHTML="默认";
            }
            _showStar();
        }

        oLi[i].onclick = function () {
   
   
            iStar = this.index;
            index = this.index;  
            onoff=true;
            if(onoff==true){
   
   
                oSpan.innerHTML=message[this.index];
            }
        }

    }

    oUl.onmouseout=function (){
   
   
        oSpan.innerHTML=message[index];
    }

    function _showStar(_index) {
   
   
        iScore = _index+1 || iStar+1
        for (var i = 0; i < oLi.length; i++) {
   
   
            if(i<iScore){
   
   
                oLi[i].className='active';
            }else{
   
   
                oLi[i].className='';
            }
        }
    }

}

结束

怎么样,其实要实现这个效果的思路很简单,你有基础的情况下,学了几天JS就能够读懂其中的含义!

相关文章
|
12天前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
36 1
|
24天前
|
JavaScript 前端开发
怀孕b超单子在线制作,p图一键生成怀孕,JS代码装逼娱乐
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习
|
1月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
46 0
|
3月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
246 9
|
4月前
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
229 11
|
4月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问