技术控

    今日:68| 主题:49270
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Computing primes with CSS

[复制链接]
Amrice做作 发表于 2016-9-30 15:46:45
118 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
I've been working on a redesign of this site, so doing more CSS, finally internalizing Sass, etc. During my reading, the    nth-child pseudo-classcaught my eye. It's oddly specific, providing syntax like "p:nth-child(4n+3)" to select every fourth paragraph, starting with the third. It isn't an arbitrary expression, it has to be of the form An+B, where A and B are integers. An element is selected if it is the An+B'th child of its parent, for some value of n ≥ 0.  
  It struck me that this is just enough computational power to compute primes with a Sieve of Eratosthenes, so I whipped up an demonstration (see it    live here):  
    <html>
<head>
<style>
/* A stupid pet trick by Ned Batchelder @nedbat */
html { max-width: 40rem; }
span { display: inline-block; width: 2em; text-align: right; }
span:nth-child(2n+4),
span:nth-child(3n+6),
span:nth-child(4n+8),
span:nth-child(5n+10),
span:nth-child(6n+12),
span:nth-child(7n+14),
...
span:nth-child(30n+60),
span:nth-child(31n+62),
span:nth-child(32n+64),
span:first-child { display: none; }
</style>
</head>
<body>
<p>Primes:</p>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
...
<span>996</span>
<span>997</span>
<span>998</span>
<span>999</span>
</div>
</body>
</html>
  
The code has only linear sequences of numbers. There are spans for 1 through 999, the candidate numbers. These are arranged so that the number N is the Nth child of their containing div. The CSS has nth-child styles for 2 through 32, the possible factors.
  The Sieve will hide numbers that are determined not to be primes with a "display: none" rule. A first-child selector hides 1, which is typical, seems like you always have to treat 1 specially when looking for primes. The other selectors for the display:none rule select the multiples of each number in turn. "nth-child(2n+4)" will hide elements 4, 6, 8, and so on. "nth-child(3n+6)" will hide 6, 9, 12, and so on.
  So CSS has two features that together are just enough to implement the Sieve. The nth-child selector accomplishes the marking of factors. The overlapped application of separate rules implements the multiple passes, one for each factor.
  Of course, I didn't write this file by hand, I wrote a Python program to do it. It's pretty simple, I won't clog up this post with the whole thing. But, it was my first use of a new feature in Python 3.6: f-strings. The loop that writes the nth-child selectors looks like this:
    for i in range(2, 33):
    print(f"span:nth-child({i}n+{2*i}),")
  
The f"" string has curly-bracketed expressions in it which are evaluated in the current scope. This string in Python 3.6:
    f"span:nth-child({i}n+{2*i})"
  
is equivalent to this in previous Pythons:
    "span:nth-child({i}n+{i2})".format(i=i, i2=2*i)
  
It felt really natural to use this new feature, and really convenient.
友荐云推荐




上一篇:【Android】Splash实践 09/30
下一篇:堡垒跳板机实现——架构实现
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

zangqing 发表于 2016-10-8 16:04:02
十分赞同楼主!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表