发布于 2017-04-26 09:45:21 | 164 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了使用JavaScript和CSS实现文本隔行换色的方法,当然最普通的也可以单纯用CSS实现,需要的朋友可以参考下

先来看一个简单的方法。
在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色。在网页加载后通过 javascript 获取要变色的标签列表,执行如下代码:


// 当文件加载时,执行代码。
window.onload = function() {
 // 获取<ul id="list" />对象
 var list = document.getElementById('list');
 // 获取list下面的所有li
 var items = list.getElementsByTagName('li');
 // 遍历items
 for (var i = 0; i < items.length; i++) {
  var className = (i % 2 == 0) ? ' odd' : ' even';
  items[i].className += className; 
 }
}

实现不同行的不同颜色,这样变完全在前端处理,不会与后端的逻辑混淆,是一种比较好的解决方案。
那么这种代码实现起来效果基本上是这样的:

不过,这种方法存在一些问题:

  • 只能对指定的一个列表进行渲染,不能重用
  • 不能指定变色的起始位置,在处理表格的变色时,得专门写处理
  • 代码全在 onload 事件中,对页面的依赖太高

将其代码进行改进并移入到一个单独的函数中去:


/**
 * 此方法用于列表的隔行变色效果,可以灵活得为指定ID的列表指定隔行的颜色。
 *
 * @param id 列表的id
 * @param item 要变色的行的标签
 * @param odd 奇数行的样式类名,如果不指定,则默认为odd
 * @param even 偶数行的样式类名,如果不指定,则默认为even
 * @param start 开始变色的行的索引,如果不指定,则默认为0
 * @param end 结束变色的行的索引,如果不指定,则默认为列表长度
 */
function rowRender(id, item, odd, even, start, end) {
 // 获取列表容器
 var list = document.getElementById(id);
 // 获取列表
 var items = list.getElementsByTagName(item);
 
 // 修正初始位置,如果不是一个数字或者越界,则从0开始
 if (isNaN(start) || (start < 0 || start >= items.length)) {
  start = 0;
 }
 
 // 修正结束位置,如果不是一个数字或者越界,则为列表末尾
 if (isNaN(end) || (end < start || end >= items.length)) {
  end = items.length;
 }
 
 // 如果没有指定odd,则默认为'odd'
 odd = odd || 'odd';
 // 如果没有指定even, 则默认为'even'
 even = even || 'even'; 
 
 // 遍历列表并渲染效果
 for (var i = start; i < end; i++) {
  var className = ' ' + ((i % 2 == 0) ? odd : even);
  items[i].className += className;
 }
}

用法:


window.onload = function() {
 // 渲梁list1下所有的li标签,使用默认的样式和起始位置
 rowRender('list1', 'li');

 // 渲梁list2下所有的li标签,使用指定的odd和默认的even,使用指定的起始位置
 rowRender('list2', 'li', 'odd1', null, 2, 6);

 // 渲梁table1下所有的tr标签,使用指定的odd和even,使用默认的起始位置
 rowRender('table1', 'tr', 'tr-odd', 'tr-even');
 // 渲梁table2下所有的tr标签,使用指定的odd和even,使用指定的起始位置
 rowRender('table2', 'tr', 'tr-odd', 'tr-even', 1);
}

示例:
Table 1


rowRender('table1', 'tr', 'tr-odd', 'tr-even');

Table 2


rowRender('table1', 'tr', 'tr-odd', 'tr-even', 1);



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务