JavaScript实现商品评价五星好评


Posted in Javascript onNovember 30, 2020

本文实例为大家分享了JavaScript实现商品评价五星好评的具体代码,供大家参考,具体内容如下

一.效果展示

JavaScript实现商品评价五星好评

二.代码实现

1.html代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>好评</title>
 <link rel="stylesheet" type="text/css" href="../js7/css/reset.css" />
 <link rel="stylesheet" type="text/css" href="css/myTest3.css" />
 <script type="text/javascript">
  window.onload = function(){
  ul = document.getElementById('star');
  lis = ul.getElementsByTagName('li');
  for (var i = 0; i < lis.length; i++) {
   lis[i].onclick = function(){
   //被用户点击后弹框并提示分数
   //获取当前对象的对象名
   var className = this.className;//nostart
   //重新定义class,并弹出评分
   ul.className = "nostar " + className;
   var score = this.getElementsByTagName('a')[0].title;
   console.log(score);
   alert('评分:' + score);
   }
  }
  }
 </script>
 </head>
 <body>
 <ul class="nostar " id="star">
  <li class="onestar"><a title="1分"></a></li>
  <li class="twostar"><a title="2分"></a></li>
  <li class="threestar"><a title="3分"></a></li>
  <li class="fourstar"><a title="4分"></a></li>
  <li class="fivestar"><a title="5分"></a></li>
 </ul>
 </body>
</html>

2.css代码

body{
 padding: 200px 600px;
}
.nostar{
 width: 80px;
 height: 16px;
 background: url(../img/star-matrix.gif) no-repeat;
 position: relative;
}

.nostar li {
  width: 16px;
  height: 16px;
  float: left;
  
}

.nostar li a{
   display: inline-block; 
  width: 16px;
  height: 16px; 
  position: absolute;
  /* text-indent: -999px; */ 
  /* 层级关系*/
   z-index: 10; 
}
.nostar li a:hover{
  /* 将a的大小变化 width 80 */
  left: 0px;
  width: 80px;
  background: url(../img/star-matrix.gif) no-repeat;
  z-index: 5;
}
.onestar{background-position: 0 -16px;}
.twostar{background-position: 0 -32px;}
.threestar{background-position: 0 -48px;}
.fourstar{background-position: 0 -64px;}
.fivestar{background-position: 0 -80px;}


.nostar li.onestar a:hover{ background-position: 0 -96px ;}
.nostar li.twostar a:hover{ background-position: 0 -112px ;}
.nostar li.threestar a:hover{ background-position: 0 -128px ;}
.nostar li.fourstar a:hover{ background-position: 0 -144px ;}
.nostar li.fivestar a:hover{ background-position: 0 -160px ;}

3.代码下载

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

Javascript 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
详解React路由传参方法汇总记录
Nov 29 #Javascript
基于jQuery拖拽事件的封装
Nov 29 #jQuery
原生js+canvas实现验证码
Nov 29 #Javascript
原生js实现弹幕效果
Nov 29 #Javascript
javascript实现点击小图显示大图
Nov 29 #Javascript
js实现简易点击切换显示或隐藏
Nov 29 #Javascript
webpack4从0搭建组件库的实现
Nov 29 #Javascript
You might like
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
如何管理Vue中的缓存页面
2021/02/06 Vue.js
python自动翻译实现方法
2016/05/28 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
小区推广策划方案
2014/06/06 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js