During the weekend, the company went to a school to do an activity. There was a lottery in the middle of the activity. The lottery was carried out according to the number of seats in the meeting room, it is to fold the paper with a seat number in a lottery box. How to quickly design and print these numbers? This problem makes it hard for us to design beautiful women. She uses the design software's conversion method. The shortcut key is usually ctrl + d or ctrl + alt + d. If the conversion of each image is the same, the distribution and sorting functions can be quickly implemented through this conversion method, but the numbers in the middle are changed, in this way, it is troublesome to reset the numbers in the middle of the sample one by one.
At this time, I had the opportunity to use the following methods to achieve it. Now I will share it with you (the method is practical, because it does not require high-quality printing ). The implementation principle is to use JavaScript to dynamically generate numbers, and use the page-break-after attribute of CSS to implement paging printing. Prepare a background image as follows:
Now let's take a look at the Code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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>
:
To print the background, you also need to set FF and IE as follows:
Later I found that the above Code could not work normally in IE7, and finally made some changes to JavaScript: Add "I! = 192 "is determined to avoid generating an empty page at the end. Other modifications are made to make the paging print effective on IE7.
For (var I = 1; I <= 192; I ++)Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
