用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的设置如下：

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>');
}

posted @ 2009-07-02 23:31 问道者阅读(2238) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

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

公告