JavaScript实现简单的星星评分效果
2019/6/27 20:57:40
本文主要是介绍JavaScript实现简单的星星评分效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
大概实现思路就是用一张灰色的星星作为背景,然后让有颜色的星星图片定位在灰色的星星图片上,控制有颜色星星图片的宽度即可达到基本效果。如下图:
下面上代码:
<html> <head> <meta charset="UTF-8"> <title>星星</title> <style> .starnone,.starWrap{ width: 100px; height: 20px; } .starnone{ position: relative; background: url(stars-none20px.png) no-repeat; } .star{ position: absolute; top: 0; left: 0; width: 70%; height: 20px; background: url(stars20px.png) no-repeat; } #num{ width: 30px; } </style> </head> <body> <div class="starnone"> <div class="starWrap"> <div class="star" id="star"></div> </div> </div> <div> <input type="text" id="num"> % <button id="ok">OK</button> </div> <script> window.onload = function(){ var star = document.getElementById("star"); var okBtn = document.getElementById("ok"); var num = document.getElementById("num"); okBtn.onclick = function(){ var value = parseFloat(num.value); if (value>100) { alert("请小于100"); return; } else if(value<0){ alert("请大于0"); return; } star.style.width = value + "px"; } } </script> </body> </html>
用到的两个图片。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于JavaScript实现简单的星星评分效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南