编程 Javascript

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

Posted in Javascript onMay 18, 2017

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

下面上代码：

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

- Author -

haozihaozi1234

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 学习笔记（六）

Dec 31 Javascript

js调试工具console.log()方法查看js代码的执行情况

Aug 08 Javascript

《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法

Jan 09 Javascript

Jquery中巧用Ajax的beforeSend方法

Jan 20 Javascript

easyui validatebox验证

Apr 29 Javascript

ashx文件获取$.ajax()方法发送的数据

May 26 Javascript

详解js运算符单竖杠“|”与“||”的用法和作用介绍

Nov 04 Javascript

AngularJS常见过滤器用法实例总结

Jul 06 Javascript

iview给radio按钮组件加点击事件的实例

Sep 30 Javascript

vue-cli 3.x 配置Axios(proxyTable)跨域代理方法

Sep 19 Javascript

基于JS实现计算24点算法代码实例解析

Jul 23 Javascript

Vue 打包后相对路径的引用问题

Jun 05 Vue.js

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