一、实现原理：

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实现音乐列表（隔行换色、全选）的更多相关文章

  1. jQuery-----隔行换色/全选全不选/

    隔行换色:              全选全不选:        分析:               1.页面加载   $(function(){})               2.获取所有奇数行数 ...

  2. 使用JS创建表格以及隔行换色（包括隔N行换色）

    <html> <head> <title></title> <style> table{ width:800px; border-colla ...

  3. DTcms列表隔行换色；loop自带行号

    <%loop cdr2 bcategoryList%> <%if(cdr2__loop__id==1)%> <a class="no-bg" href ...

  4. JS给TR隔行换色，鼠标经过有动感

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  5. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  6. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  7. JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

  8. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用

    主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...

随机推荐

  1. while循环计算1-100和，1-100内偶数/奇数/被整除的数的和

    文章地址 https://www.cnblogs.com/sandraryan/ <!DOCTYPE html> <html lang="en"> < ...

  2. HDU 5971"Wrestling Match"（二分图染色）

    传送门 •题意 给出 n 个人,m 场比赛: 这 m 场比赛,每一场比赛中的对决的两人,一个属于 "good player" 另一个属于 "bad player" ...

  3. laravel 常用文档

    [ Laravel 5.6 文档 ] 快速入门 —— 目录结构  laravel学院 http://laravelacademy.org/post/8657.html Laravel 的缓存系统    ...

  4. element 树形控件使用

    <el-tree :data="morkDataList" show-checkbox ref="tree" node-key="id" ...

  5. P1052 国王放置问题

    题目描述 在n*m的棋盘上放置k个国王,要求k个国王互相不攻击,有多少种不同的放置方法.假设国王放置在第(x,y)格,国王的攻击的区域是:(x-1,y-1), (x-1,y),(x-1,y+1),(x ...

  6. springboot2.x整合JPA

    项目结构 pom <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...

  7. 2019-8-31-AutoHotKey-用打码的快捷键

    title author date CreateTime categories AutoHotKey 用打码的快捷键 lindexi 2019-08-31 16:55:58 +0800 2019-06 ...

  8. H3C 端口隔离配置举例

  9. 算法提高 密码锁 (BFS)

    问题描述 你获得了一个据说是古代玛雅人制作的箱子.你非常想打开箱子看看里面有什么东西,但是不幸的是,正如所有故事里一样,神秘的箱子出现的时候总是会挂着神秘的锁. 这个锁上面看起来有  N  个数字,它 ...

  10. C# 从零开始写 SharpDx 应用 绘制基础图形

    本文告诉大家通过 SharpDx 画出简单的 2D 界面 本文属于 SharpDx 系列 博客,建议从头开始读 本文分为两步,第一步是初始化,第二步才是画界面 初始化 先创建 RenderForm 用 ...