现在的位置: 首页 > 综合 > 正文

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

2014年02月18日 ⁄ 综合 ⁄ 共 1444字 ⁄ 字号 评论关闭

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

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

背景图片

马上来看看代码:

效果图:

打印预览图

打印预览图

 

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

FF设置

IE设置

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

抱歉!评论已关闭.