原生js星星评分源码
html:
<div id="fiveStars">
<div>到场时间:<img v-for="(star,index) in stars.list" :src="star.src" @click="rating(index, stars)" /></div> // index,下标 stars 总的图片
</div>
引入图片路径:
//黑星星的路径
const starOff ='../../../static/img/wjx-old.png';
//亮星星的路径
const starOn='../../../static/img/wjx-new.png';
data:设置
stars: {
list: [
{src: starOff, active: false}, // src: 图片星星,默认灰色, active,添加
{src: starOff, active: false},
{src: starOff, active: false},
{src: starOff, active: false},
{src: starOff, active: false},
],
starNum:0 // 点击星星的次数
},
methods:
rating(index, stars){
let total = stars.list.length;//星星总数
let idx = index + 1//代表应该显示的星星的数量
if(stars.starNum ==0){ //只点了一个星星
stars.starNum =idx
for(var i=0;i<idx;i++){
stars.list[i].src=starOn;
stars.list[i].active=true;
}
}else{
//如果再次点击当前选中的星级-仅取消掉当前星级,保留之前的。
if(idx == stars.starNum){
for(var i=idx;i<total;i++){
stars.list[i].src=starOff;
stars.list[i].active=false;
}
}
//如果小于当前最高星级,则直接保留当前星级
if(idx <stars.starNum){
for(var i=idx;i<stars.starNum;i++){
stars.list[i].src=starOff;
stars.list[i].active=false;
}
}
//如果大于当前星级,则直接选到该星级
if(idx > stars.starNum){
for(var i=0;i<idx;i++){
stars.list[i].src=starOn;
stars.list[i].active=true;
}
}
let count =0;//当前几颗星
for(var i=0;i<total;i++){
if(stars.list[i].active){
count++;
}
}
stars.starNum =count;
console.log(stars.starNum)
}
},
原生js星星评分源码的更多相关文章
- 从发布订阅模式入手读懂Node.js的EventEmitter源码
前面一篇文章setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop详细讲解了浏览器和Node.js的异步API及其底层原理Event Loop.本文会讲一下不 ...
- PureMVC(JS版)源码解析:总结
PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写博客的过程中得到了些提升.我也是第一次写系列 ...
- PureMVC(JS版)源码解析
PureMVC(JS版)源码解析:总结 PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写 ...
- Vue.js 2.0源码解析之前端渲染篇
一.前言 Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势.前不久Vue.js 2.0正式 ...
- vue系列---snabbdom.js使用及源码分析(九)
一:什么是snabbdom? 在学习Vue或React中,我们了解最多的就是虚拟DOM,虚拟DOM可以看作是一颗模拟了DOM的Javascript树,主要是通过vnode实现一个无状态的组件,当组件状 ...
- 基于wke封装的duilib的webkit浏览器控件,可以c++与js互交,源码及demo下载地址
转载请说明原出处,谢谢~~ 前些日子用wke内核封装了duilib的webkit浏览器控件,好多群里朋友私聊我希望可以我公布源码,今天把这个控件的源码和使用demo公布.其实这个控件封装起来没什么难度 ...
- PureMVC(JS版)源码解析(二):Notification类
上篇博客,我们已经就PureMVC的设计模式进行的分析,这篇博文主要分析Notification(消息)类的实现. 通过Notification的构造函数可以看出,PureMVC中的Notificat ...
- 【示例代码】HTML+JS 画图板源码分享
一个有趣的画图板, 用了 HTML5中的本地存储.下载.canvas 等技术,这个项目中用到了canvas 的很多基础功能,初学者可以学习一下 . 建议开发童鞋使用统一开发环境UDE来进行查看.调试. ...
- 深入理解 Node.js 中 EventEmitter源码分析(3.0.0版本)
events模块对外提供了一个 EventEmitter 对象,即:events.EventEmitter. EventEmitter 是NodeJS的核心模块events中的类,用于对NodeJS中 ...
随机推荐
- pixi与lottie-web的benchmark测试
生产版本 "dependencies": { "lottie-web": "^5.5.7", "pixi-spin ...
- FTP上传下载文件(面向对象版)
# 服务端 import socketserver import os import json import hashlib import struct class MySocketServer(so ...
- Java内存模型之happens-before原则
我们无法就所有场景来规定某个线程修改的变量何时对其他线程可见,但是我们可以指定某些规则,这规则就是happens-before,从JDK 5 开始,JMM就使用happens-before的概念来阐述 ...
- mySQL的表连接
一.mysql表的连接方式 内连接和外连接的区别: 我把两个表比作集合A.B,其中,内连接是集合A和集合B的交集,而交集的内容在两个表中都存在,即在每一个表的内部:而外连接则是除了交集外,还有另一个表 ...
- Retrofit总结(原)
1.Retrofit的作用 A type-safe HTTP client for Android and Java 看到这句话时候在想什么是类型安全? 百度一下:类型安全代码指访问被授权可以访问的内 ...
- Spring 2.5配置文件详解(转)
http://book.51cto.com/art/201004/193743.htm 6.2.3 Spring 2.5配置文件详解 Spring配置文件是用于指导Spring工厂进行Bean生产. ...
- 【串线篇】SpringMvc源码分析
一.DispathcherServlet结构分析 1).所有请求过来DispatcherServlet收到请求, 2).调用doDispatch()方法进行处理 1).getHandler():根据当 ...
- json书写格式
1.数组方式 [ ] [{ "id" : 1 , "name" : "xiaoming" },{ "id" : 2 , ...
- 07.interrupt
/** *isInterrupted */ public class InterruptDemo { public static void main(String[] args) throws Int ...
- FastDFSClient上传图片工具类
package cn.lijun.core.util; import org.apache.commons.io.FilenameUtils;import org.csource.common.Nam ...