dot forget javascript

2008-04

分类:JavaScript , 笔记本子,关键词:No Data

已有 1,172 位领导视察,其中有 0 位领导做了批示.

也许有时候有些人太专于服务器端了

话说apple昨天出了一个页面，貌似是这样来的：

页面总体来说是一个无序列表，用来显示一些人气等。人气第一名有一个皇冠，第二名可能字体不同，第三名可能背景色不同，其它的名次就是一样的了。由于数据比较多，所以不能用一页来显示，这样就涉及到了分页。页面交付给开发人员后，开发人员看了看说这个我们实现不了，三个样式不同，我们怎么做？而且还要分页，你改一下页面吧。

我想，这跟apple改不改页面有何关系？就算再怎么改这按页码显示不同的样式也不能去掉啊。

第一页

第二页

这很easy啊，就算是服务器端去处理也不是不可以完成啊。这里我用了javascript来处理。

<div id="main">
  <ul id="list">
 <li class="one">1</li>
 <li class="two">2</li>
 <li class="three">3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
  </ul>
 <p><a href="?p=1">1</a> | <a href="?p=2">2</a></p>
  </div>

前三个li都有一个class属性，这是默认的，既然分页，那么一定会有分页参数，如page=xxx或p=xxx之类的。

用js获取location.search部分，用正则来匹配page=xxx或p=xxx，若匹配到了，匹配出页码。页码>1就将前三个li的class去掉

<meta content="editplus" name="generator" />
<meta content="" name="author" />
<meta content="" name="keywords" />
<meta content="" name="description" /><style type="text/css">

  *
  {
  margin:0;
  padding:0;
  font-family:verdana;
  font-size:.9em;
  }
  body
  {
  text-align:center;
  }
  #main
  {
  width:300px;
  margin:30px auto;
 
  }
  ul
  {
  list-style:none;
  height:200px;

  }
  li
  {
  float:left;
  width:130px;
  padding:5px;
  text-align:center;

  }
  .one
  {
  background:red;
  }
  .two
  {
  background:#663300;
  }
  .three
  {
  background:#99FF33;
  }
  </style></p>
<script type="text/javascript">
    var href = window.location.search;
function setstyle()
{
    href = href.replace('?','');
    var reg = /p=(\d+)/gi;
	if(reg.test(href))
	{

		 var page = RegExp.$1;
		 if(page>1)
		 {
	     var list = $('list');
		 var nodes = list.getElementsByTagName('LI');
		 for(var i = 0;i<=2;i++)
		 {
		    nodes[i].className='';
		 }
		 }
	}
}
function $(id)
{
return document.getElementById(id);
}
window.onload = function()
{
setstyle();
}
  </script>
<div id="main">
<ul id="list">
    <li class="one">1</li>
    <li class="two">2</li>
    <li class="three">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
<p><a href="?p=1">1</a> | <a href="?p=2">2</a></p>
</div>

运行代码

很简单啊...
不过在正则上，RegExp是一个全局变量吗？