JavaScript实现简单的星星评分效果


Posted in Javascript onMay 18, 2017

大概实现思路就是用一张灰色的星星作为背景,然后让有颜色的星星图片定位在灰色的星星图片上,控制有颜色星星图片的宽度即可达到基本效果。如下图:

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实现简单的星星评分效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
electron踩坑之dialog中的callback解决
Oct 06 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 #Javascript
Javascript实现信息滚动效果
May 18 #Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 #Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 #Javascript
BootStrap 导航条实例代码
May 18 #Javascript
AngularJS全局警告框实现方法示例
May 18 #Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 #Javascript
You might like
php实现的替换敏感字符串类实例
2014/09/22 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python函数与方法的区别总结
2019/06/23 Python
简单了解python中对象的取反运算符
2019/07/01 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
成都人事代理协议书
2014/10/25 职场文书
小学运动会开幕词
2015/01/28 职场文书
二婚主持词
2015/06/30 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
python+opencv实现目标跟踪过程
2022/06/21 Python