原生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中 ...
随机推荐
- 62.Longest Valid Parentheses(最长的有效括号)
Level: Medium 题目描述: Given a string containing just the characters '(' and ')', find the length of ...
- mySQL学习入门教程——4.内置函数
四.内置函数: 包括了字符串函数.数值函数.日期函数.流程控制函数.其他函数(获取数据库信息)... 一.字符串函数[比较常用,需要掌握]1. concat(s1,s2,...,sn) #把传入的 ...
- 【问题解决方案】单个文件夹嵌套时github仓库中最外层文件夹直接显示所有嵌套文件夹名的问题
上传文件的时候遇到这样一个问题: 这么看着好像有什么问题,直觉不应该这么显示吧 折腾半天,从github新建了嵌套文件夹并同步到本地,然后从本地push了文件,结果依然显示是这样 好吧,那这个问题应该 ...
- sub
Popen.communicate(input=None)¶Interact with process: Send data to stdin. Read data from stdout and s ...
- windows开机自启mysql服务(任务计划程序+XAMPP)
需求:windows开机自启mysql服务 的需求: 相关工具:win10系统中,使用windows自带的任务计划程序 和 XAMPP软件 完成此需求 XAMPP软件介绍:此软件维护了windows中 ...
- 针对类别的5中softmax_cross_entropy loss计算
# ---------------------------- #! Copyright(C) 2019 # All right reserved. # 文件名称:xxx.py # 摘 要:五种方式实现 ...
- 链表反转&交换链表结点
leetcode链表反转链接 要求摘要: 反转一个单链表 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1-&g ...
- 2019 ICPC Universidad Nacional de Colombia Programming Contest C D J
C. Common Subsequence 题意:给出长度为n两个串,求两个串的最长公共子序列len,如果len>=0.99*n,两个串就是亲兄弟否则不是. 解法:朴素的求LCS的时间复杂度是O ...
- 网络编程NIO-异步
异步I/O是没有阻塞地读写数据的方法.通常在代码进行read调用时,代码会阻塞直至可供读取的数据.同样,write调用将会阻塞直至数据能够写入. 1.selector是一个对象,可以注册到很多个cha ...
- Quartz.Net 任务调度之传递参数(2)
1.jobDetail //添加 //Key:Value jobDetail.JobDataMap.Add("张翼德", "张翼德"); jobDetail.J ...