原生js实现音乐列表（隔行换色、全选）
一、实现原理：
1、使用 % 运算符实现各行换色，规律：当%前面的值和后面的值相同时 结果为0；
2、使用开关思想，实现在同一个元素上反复点击时的条件判断，并且把开关以属性方式绑定在每个元素上；
3、使用大总管变量，记录鼠标移入时的下标,用于设置鼠标离开时的颜色
4、使用变量记录每选中一行就自增1 取消选中就自减1，当变量数值与行的长度相等时 说明全选了；
二、代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0}
ul,li{ list-style: none; }
.wrap{width:300px; margin: 50px auto;padding: 10px;border: 1px solid #eee;}
.wrap ul{display: block; overflow: hidden;clear: both;}
.wrap ul li{display:block;width:100%; float: left; height: 40px;line-height: 40px; overflow: hidden; clear: both;}
.wrap ul li.on{ background: #222 !important;color: #fff; }
#all{border-top:1px solid #eee;}
</style>
</head>
<body>
<div class="wrap">
<ul id="box">
<li><input type="checkbox">认真的雪</li>
<li><input type="checkbox">再见</li>
<li><input type="checkbox">大约在冬季</li>
<li><input type="checkbox">蜗牛</li>
<li><input type="checkbox">光辉岁月</li>
</ul>
<div id="all">
<input type="checkbox">全选
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box')
var lis = box.getElementsByTagName('li');
var cklist = box.getElementsByTagName('input');
var allbtn = document.getElementById('all').getElementsByTagName('input')[0];
allbtn.onoff = true;//设置开关 用于多次点击时的状态判断
var colorArr = ['orange','pink'];
var num; //大总管变量，记录鼠标移入时的下标,用于设置鼠标离开时的颜色
var allnum = 0; // 每选中一行就自增1 取消选中就自减1
for (var i = 0; i < lis.length; i++) {
// 给每一行加下标
lis[i].index = i;
// 给每一行加开关
lis[i].onoff = true;
// js实现隔行换色
lis[i].style.background = colorArr[i%colorArr.length];
// 鼠标移入行
lis[i].onmouseover = function(){
num = this.index;
this.style.background = '#ccc';
}
// 鼠标移出行
lis[i].onmouseout = function(){
this.style.background = colorArr[num%colorArr.length];
}
// 鼠标点击
lis[i].onclick = function(){
//判断该li上的开关，如果为true则添加选中状态，否则就去除选中状态
if(this.onoff){
//设置当前为选中状态，当前行上的checkbox为选中状态，变量自增1
this.className = 'on';
cklist[this.index].checked = 'checked';
allnum++;
}else{
//设置当前为默认状态，当前行上的checkbox为非选中状态，变量自减1
this.className = '';
cklist[this.index].checked = '';
allnum--;
}
//更改当前行上的开关属性
this.onoff = !this.onoff;
// 根据allnum变量判断 全选按钮是否应该选中
if( allnum == cklist.length ) {
allbtn.checked = 'checked'
}else{
allbtn.checked = ''
}
}
};
allbtn.onclick = function(){
if(allbtn.onoff){
for (var i = 0; i < lis.length; i++) {
lis[i].className = 'on';
cklist[i].checked = 'checked';
lis[i].onoff = false;
}
}else{
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
cklist[i].checked = '';
lis[i].onoff = true;
}
}
allbtn.onoff = !allbtn.onoff;
}
}
</script>
</body>
</html>
原生js实现音乐列表（隔行换色、全选）的更多相关文章
- jQuery-----隔行换色/全选全不选/
隔行换色: 全选全不选: 分析: 1.页面加载 $(function(){}) 2.获取所有奇数行数 ...
- 使用JS创建表格以及隔行换色（包括隔N行换色）
<html> <head> <title></title> <style> table{ width:800px; border-colla ...
- DTcms列表隔行换色；loop自带行号
<%loop cdr2 bcategoryList%> <%if(cdr2__loop__id==1)%> <a class="no-bg" href ...
- JS给TR隔行换色，鼠标经过有动感
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
- 利用JS动态生成隔行换色HTML表格
用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...
- js课程 4-11 表格如何实现隔行换色
js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...
- JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等
很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中 1.隔行换色 2.复选框的全选效果 3.实现表格 ...
- JS应用实例4：表格隔行换色
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用
主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...
随机推荐
- CSS引入的方式有哪些? link和@import的区别是?
CSS引入的方式包括内联 内嵌 外链 导入 link和@import的区别是 : ①link属于XHTML标签,除了加载CSS外,还能 用于定义RSS, 定义rel连接属性等作用:而@import是C ...
- HBuider快捷键
朋友推荐用Hbuilder编辑器,看了下Hbuilder官网和那视频,感觉牛逼哄哄的, 自己也就体验了一下,打开Hbuilder的快捷键列表,每个快捷键都体验了一下,以下展示出来的,每一个都是精华,每 ...
- MySQL存储引擎MyISAM与InnoDB区别
简单的表达. MyISAM 是非事务的存储引擎. innodb是支持事务的存储引擎. innodb的引擎比较适合于插入和更新操作比较多的应用 而MyISAM 则适合用于频繁查询的应用 ...
- TSLint-Angular 配置
代码风格和语义的检查工具,帮助规范 TS 和 Angular 代码书写: 安装: => cnpm install // 安装相关依赖 全局安装 cnpm install -g tslint ty ...
- koa2--04.ejs模板引擎
首先在项目文件下使用cmd,输入:npm install --save koa-views ejs,将koa-views中间件和ejs模板引擎安装到文件中,并自动写入依赖 接在在index.js文件中 ...
- 使用Squid做代理服务器,Squid单网卡透明代理配置详解(转）
使用Squid做代理服务器 说到代理服务器,我们最先想到的可能是一些专门的代理服务器网站,某些情况下,通过它们能加快访问互联网的速度.其实,在需要访问外部的局域网中,我们自己就能设置代理,把访问次数较 ...
- Team Foundation Server 2015使用教程【3】：默认团队成员连接tfs及checkin操作
- 对“TD信息树”的使用体验
在本次同2017级学长进行的软件交流会上,我们有幸使用学长们开发的软件与成果,进过27个不尽相同的软件的使用,让我初步意识到了学习软件工程这门学科的实用价值.最终我选择了"TD信息树&quo ...
- IDE介绍之——CLion
CLion是JetBrains公司旗下发布的一款跨平台C/C++IDE开发工具. 使用CLion上最好要会手写CMake.要先安装编译器套件(一般安装MinGW就行). 对C++标准的支持:基本上Cl ...
- 定位、识别；目标检测，FasterRCNN
定位: 针对分类利用softmax损失函数,针对定位利用L2损失函数(或L1.回归损失等) 人关节点检测 针对连续变量和离散变量需要采用不同种类的损失函数. 识别: 解决方案: 1.利用滑动窗口,框的 ...