用JavaScript+CSS设计和打印多页抽奖编号

周末的时候公司到一个学校做一场活动，活动中间有抽奖环节，抽奖是按照会议室坐位编号来的，就是把编有座位号的纸条折起来放在一个抽奖箱中。如何快速设计并打印出这些编号呢？这个问题难倒了我们美女设计。她是用设计软件的重制方法，快捷键通常是ctrl+d或ctrl+alt+d。如果重制的每个图形一样，那样通过这个重制办法再加上分布与排序功能可以快速做到，但是中间的号码是变化的，这样重制好了样板还要一个一个地改中间的数字，麻烦。

适好此时我灵机一动，用以下方法实现了，现拿出来与大家分享（方法实用，因为无须高质量打印）。实现原理是用JavaScript动态生成编号，用CSS的page-break-after属性实现分页打印。这里还要准备好这样一张背景图片：

马上来看看代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 用JavaScript+CSS设计和打印多页抽奖编号 </ title >
< style  type ="text/css" >
span  { display : block ;  width : 200px ;  height : 200px ;  line-height : 200px ;  font-size : 60px ;  font-weight : bold ;  text-align : center ;  font-family : Arial ;  float : left ;  border : 1px dashed #CCC ;  background : url(http://p.blog.csdn.net/images/p_blog_csdn_net/webflash/EntryImages/20090419/NumBg.jpg) no-repeat }
@media print { .NextPage {page-break-after : always } }
</ style >
</ head >

< body >
< script  type ="text/javascript" >
for  ( var  i = 1 ;i <= 192 ;i ++ )
{
     if  (i % 12 == 0 )
        document.write( ' <span class="NextPage"> ' + i + ' </span> ' );
     else
        document.write( ' <span> ' + i + ' </span> ' );
}
</ script >
</ body >
</ html >

效果图：

 

为了打印背景，还需要一点设置，FF和IE的设置如下：

后来发现以上代码在IE7下是无法正常工作的，最终把JavaScript做了点修改:加“i!=192”判断是为了不要在最后生成一个空页,其它修改是为了让分页打印在IE7有效。

for  ( var  i = 1 ;i <= 192 ;i ++ )
{
     if  (i % 12 == 0 && i != 192 )
        document.write( ' <span> ' + i + ' </span><div class="NextPage" style="clear:both"></div> ' );
     else
        document.write( ' <span> ' + i + ' </span> ' );
}