一、实现原理：

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. hdu 1556 Color the ball（区间更新，单点求值）

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  2. H3C 高级ACL

  3. Python--day32--ftp文件传输报错的原因

    解决办法:把buffer改小 server.py #实现一个大文件的上传或下载 #配置文件 ip地址 端口号 import json import socket import struct sk = ...

  4. 2018-7-31-C#-判断两条直线距离

    title author date CreateTime categories C# 判断两条直线距离 lindexi 2018-07-31 14:38:13 +0800 2018-05-08 10: ...

  5. java 打印流

    (只有两个,PrintWriter和PrintStream) 思考:如果现在要想完成一个字符串或者是boolean型或者是字符型的数据输出使用OutputStream是否方便? 肯定是不方便的,因为O ...

  6. 初学ServiceMix

    因为老板给的毕业题目是ESB相关,需要学下ServiceMix(版本7.0.1) 但是SOA这东西技术上比较旧,加上主要是企业在用,个人学习的不多,所以资料比较少 CSDN上看到篇文章不错但是有些地方 ...

  7. linux虚拟机设置固定IP并实现联网，主机与虚拟机实现互ping

    ifconfig eth0 up 启用第一块网卡 onboot=yes 自动启动 service network restart 重启网络服务 使用虚拟机添加一块桥接网卡 cp eth0 eth1 复 ...

  8. C# 大端小端转换

    关于大端和小端,是一个有趣的问题.本文告诉大家如何在C#转换大端和小端. 这里有一个有趣的故事,请看详解大端模式和小端模式 - CSDN博客 默认的 C# 使用的是小端,如果收到的消息是大端,那么就会 ...

  9. Linux 内核SBus连接

    当大部分计算机配备有 PCI 或 ISA 接口总线, 大部分老式的基于 SPARC 的工作站使用 SBus 来连接它们的外设. SBus 使一个非常先进的设计, 尽管它已出现很长时间. 它意图是处理器 ...

  10. CF 453C. Little Pony and Summer Sun Celebration

    CF 453C. Little Pony and Summer Sun Celebration 构造题. 题目大意,给定一个无向图,每个点必须被指定的奇数或者偶数次,求一条满足条件的路径(长度不超\( ...