PRcss

中文字体名称对照表

pr[at]pr1984.com(PR) — Wed,26 May 2010 15:38:41 +0800

实在太懒了，每次都临时去找。索性也给记录上。

防止页面与css文件编码不一致，导致中文字体乱码的解决方案：使用对应的英文字体。

PS：还得运行一次～不能直接贴出来

HTML代码

<table cellspacing="0" cellpadding="4" border="1"><thead> 
<tr><th>中文名</th><th>英文名</th><th>Unicode</th><th>Unicode 2</th></tr> 
<tr><th colspan="4">Mac OS</th></tr> 
</thead><tbody> 
<tr style="font-family:\534E\6587\7EC6\9ED1;"> 
    <td>华文细黑</td><td>STHeiti Light [STXihei]</td> 
    <td>\534E\6587\7EC6\9ED1</td><td>华文细黑</td></tr> 
<tr style="font-family:\534E\6587\9ED1\4F53;"> 
    <td>华文黑体</td><td>STHeiti</td> 
    <td>\534E\6587\9ED1\4F53</td><td>华文黑体</td></tr> 
<tr style="font-family:\534E\6587\6977\4F53;"> 
    <td>华文楷体</td><td>STKaiti</td> 
    <td>\534E\6587\6977\4F53</td><td>华文楷体</td></tr> 
<tr style="font-family:\534E\6587\5B8B\4F53;"> 
    <td>华文宋体</td><td>STSong</td> 
    <td>\534E\6587\5B8B\4F53</td><td>华文宋体</td></tr> 
<tr style="font-family:\534E\6587\4EFF\5B8B;"> 
    <td>华文仿宋</td><td>STFangsong</td> 
    <td>\534E\6587\4EFF\5B8B</td><td>华文仿宋</td></tr> 
<tr style="font-family:\4E3D\9ED1 Pro;"> 
    <td>丽黑 Pro</td><td>LiHei Pro Medium</td> 
    <td>\4E3D\9ED1 Pro</td><td>丽黑 Pro</td></tr> 
<tr style="font-family:\4E3D\5B8B Pro;"> 
    <td>丽宋 Pro</td><td>LiSong Pro Light</td> 
    <td>\4E3D\5B8B Pro</td><td>丽宋 Pro</td></tr> 
<tr style="font-family:\6807\6977\4F53;"> 
    <td>标楷体</td><td>BiauKai</td> 
    <td>\6807\6977\4F53</td><td>标楷体</td></tr> 
<tr style="font-family:\82F9\679C\4E3D\4E2D\9ED1;"> 
    <td>苹果丽中黑</td><td>Apple LiGothic Medium</td> 
    <td>\82F9\679C\4E3D\4E2D\9ED1</td><td>苹果丽中黑</td></tr> 
<tr style="font-family:;"> 
    <td>苹果丽细宋</td><td>Apple LiSung Light</td> 
    <td>\82F9\679C\4E3D\7EC6\5B8B</td><td>苹果丽细宋</td></tr> 
</tbody> 
<thead><tr><th colspan="4">Windows</th></tr></thead> 
<tbody> 
<tr style="font-family:\65B0\7EC6\660E\4F53;"> 
    <td>新细明体</td><td>PMingLiU</td> 
    <td>\65B0\7EC6\660E\4F53</td><td>新细明体</td></tr> 
<tr style="font-family:\7EC6\660E\4F53;"> 
    <td>细明体</td><td>MingLiU</td> 
    <td>\7EC6\660E\4F53</td><td>细明体</td></tr> 
<tr style="font-family:\6807\6977\4F53;"> 
    <td>标楷体</td><td>DFKai-SB</td> 
    <td>\6807\6977\4F53</td><td>标楷体</td></tr> 
<tr style="font-family:\9ED1\4F53;"> 
    <td>黑体</td><td>SimHei</td> 
    <td>\9ED1\4F53</td><td>黑体</td></tr> 
<tr style="font-family:\5b8b\4f53;"> 
    <td>宋体</td><td>SimSun</td> 
    <td>\5B8B\4F53</td><td>宋体</td></tr> 
<tr style="font-family:\65B0\5B8B\4F53;"> 
    <td>新宋体</td><td>NSimSun</td> 
    <td>\65B0\5B8B\4F53</td><td>新宋体</td></tr> 
<tr style="font-family:\4EFF\5B8B;"> 
    <td>仿宋</td><td>FangSong</td> 
    <td>\4EFF\5B8B</td><td>仿宋</td></tr> 
<tr style="font-family:\6977\4F53;"> 
    <td>楷体</td><td>KaiTi</td> 
    <td>\6977\4F53</td><td>楷体</td></tr> 
<tr style="font-family:\4EFF\5B8B_GB2312;"> 
    <td>仿宋_GB2312</td><td>FangSong_GB2312</td> 
    <td>\4EFF\5B8B_GB2312</td><td>仿宋_GB2312</td></tr> 
<tr style="font-family:\6977\4F53_GB2312;"> 
    <td>楷体_GB2312</td><td>KaiTi_GB2312</td> 
    <td>\6977\4F53_GB2312</td><td>楷体_GB2312</td></tr> 
<tr style="font-family:\5FAE\x8F6F\6B63\9ED1\4F53;"> 
    <td>微软正黑体</td><td>Microsoft JhengHei</td> 
    <td>\5FAE\x8F6F\6B63\9ED1\4F53</td><td>微软正黑体</td></tr> 
<tr style="font-family:\5FAE\8F6F\96C5\9ED1;"> 
    <td>微软雅黑</td><td>Microsoft YaHei</td> 
    <td>\5FAE\8F6F\96C5\9ED1</td><td>微软雅黑</td></tr> 
</tbody> 
<thead><tr><th colspan="4">Office</th></tr></thead> 
<tbody> 
<tr style="font-family:\96B6\4E66;"> 
    <td>隶书</td><td>LiSu</td> 
    <td>\96B6\4E66</td><td>隶书</td></tr> 
<tr style="font-family:\5E7C\5706;"> 
    <td>幼圆</td><td>YouYuan</td> 
    <td>\5E7C\5706</td><td>幼圆</td></tr> 
<tr style="font-family:\534E\6587\7EC6\9ED1;"> 
    <td>华文细黑</td><td>STXihei</td> 
    <td>\534E\6587\7EC6\9ED1</td><td>华文细黑</td></tr> 
<tr style="font-family:\534E\6587\6977\4F53;"> 
    <td>华文楷体</td><td>STKaiti</td> 
    <td>\534E\6587\6977\4F53</td><td>华文楷体</td></tr> 
<tr style="font-family:\534E\6587\5B8B\4F53;"> 
    <td>华文宋体</td><td>STSong</td> 
    <td>\534E\6587\5B8B\4F53</td><td>华文宋体</td></tr> 
<tr style="font-family:\534E\6587\4E2D\5B8B;"> 
    <td>华文中宋</td><td>STZhongsong</td> 
    <td>\534E\6587\4E2D\5B8B</td><td>华文中宋</td></tr> 
<tr style="font-family:\534E\6587\4EFF\5B8B;"> 
    <td>华文仿宋</td><td>STFangsong</td> 
    <td>\534E\6587\4EFF\5B8B</td><td>华文仿宋</td></tr> 
<tr style="font-family:\65B9\6B63\8212\4F53;"> 
    <td>方正舒体</td><td>FZShuTi</td> 
    <td>\65B9\6B63\8212\4F53</td><td>方正舒体</td></tr> 
<tr style="font-family:\65B9\6B63\59DA\4F53;"> 
    <td>方正姚体</td><td>FZYaoti</td> 
    <td>\65B9\6B63\59DA\4F53</td><td>方正姚体</td></tr> 
<tr style="font-family:\534E\6587\5F69\4E91;"> 
    <td>华文彩云</td><td>STCaiyun</td> 
    <td>\534E\6587\5F69\4E91</td><td>华文彩云</td></tr> 
<tr style="font-family:\534E\6587\7425\73C0;"> 
    <td>华文琥珀</td><td>STHupo</td> 
    <td>\534E\6587\7425\73C0</td><td>华文琥珀</td></tr> 
<tr style="font-family:\534E\6587\96B6\4E66;"> 
    <td>华文隶书</td><td>STLiti</td> 
    <td>\534E\6587\96B6\4E66</td><td>华文隶书</td></tr> 
<tr style="font-family:\534E\6587\884C\6977;"> 
    <td>华文行楷</td><td>STXingkai</td> 
    <td>\534E\6587\884C\6977</td><td>华文行楷</td></tr> 
<tr style="font-family:\534E\6587\65B0\9B4F;"> 
    <td>华文新魏</td><td>STXinwei</td> 
    <td>\534E\6587\65B0\9B4F</td><td>华文新魏</td></tr> 
</tbody> 
</table>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

兼容日记

pr[at]pr1984.com(PR) — Tue,18 May 2010 11:50:07 +0800

【JS部分：】

parseFloat

程序代码

parseFloat 不被safari支持[safari4以及以下版本]

cssText

程序代码

test

obj.style.cssText+="color:red;background:blue;"
在IE中，如果obj存在style值，则会自动干掉obj原有的style值中的最后一个"；"

结果：

test

color:red;被忽略了

解决方案：
obj.style.cssText+=";color:red;background:blue;"

恩，就是这样，其他浏览器器会自动忽略多余的"；"，于是完美了～

日本幼儿园12件令中国妈妈目瞪口呆的事儿

pr[at]pr1984.com(PR) — Thu,18 Mar 2010 12:09:29 +0800

       前些天，为了记录田田的成长，我写了一篇《在日本幼稚园最后的运动会》，从网友的评论中看出大家感触很多，这使我想到，这个近邻还是有我们很多值得了解的地方。本来来日本以前，田田已经在北京上过一年幼儿园，可以说，对于幼儿园我们并不陌生，但是日本的幼儿园，有些事儿还是让我目瞪口呆，说出来和大家分享一下。孙子云：知己知彼，百战不殆。这话用在中日的身上，似乎没有“一衣带水”那么风花雪月，不过幼儿教育是根上的教育，别让我们的孩子输在起跑线上。

1.无数大大小小的包。
       我们办理入园手续的第一天，幼儿园就向我们说明，要准备若干个大大小小的包。书包（统一）、装毛毯的包、装餐具的包、餐具盒、装衣服的包、装备换衣服的包、装换下来衣服的包、装鞋子的包，然后A包多少厘米长，B包多少厘米宽，C包放在D包里，E包放在F包里。我真是彻底崩溃了！搞不懂为什么日本人要弄出这么多复杂的名堂出来。有的幼儿园甚至要求所有的包都要妈妈一针一线缝制！经过两年，我们都对此已经驾轻就熟了，孩子也可以非常有条理的分门别类。我常想，京都人可以对垃圾精细分类处理而不觉其烦，是否和从小所受教育有关。

这种是装被子的袋子

这种是装衣服等的袋子

左边是装阅读书的袋子，右边是装鞋子的袋子。

2.大人空着手，所有的包都孩子肩背手拿着。
       这是很震动我的一个场景，早晚接送孩子的时候，看到其他日本家长，无论是爸爸、妈妈，还是爷爷奶奶，手里一律空着，而上面所说的那些少说也有两三个大包外加书包都由那些花朵们肩背手拿着，而且还都跑得飞快。我们呢，自然还是咱国内的传统，田田空手，我拿包。过了两天，老师就来和我聊天了：“田田妈，Tina在学校可是什么都自己做啊。。。。”日本人惯于只说半句话，后面的让你琢磨去。我立刻就明白是在问家里的情形了，看我还在想，老师就说了“比方说上学时拿包吧。。。”这就是委婉的提醒。从此就只好让田田自己拿了。等开家长恳谈会时，我和大家说“在中国幼儿园，习惯家长拿东西”这回轮到日本妈妈目瞪口呆了，异口同声地问：“为什么？”为什么？是不是因为我们中国人爱孩子更多一点呢？

3.反复脱换的行头
       田田的幼儿园是统一服装，春秋换装，全年登园时最外边都要穿幼儿园的套头衫，穿短裤，戴蓓蕾帽（夏天戴草帽），穿自己的鞋子；到了幼儿园，就要把套头衫脱下来，换一种玩耍时的罩衣，鞋子脱下来，换白色的芭蕾鞋，到操场玩的时候，自然再换自己的鞋子。这还不是最麻烦的，开学时老师要求拿一组换的衣服，在我们看来，那自然是防备孩子玩耍时弄脏备用的，然而，并不是。只要孩子们中午睡了午觉，起来必定要重新换一套。够多麻烦。（到田田在外边宿泊一个晚上的时候，光备用的换的衣服就要备好多套，真赶上那个爱新衣的皇帝了。）
       刚开始每天早上去送田田，都要重复那么一套换衣程序，田田在菊花班的时候，看她实在慢，我就不免代劳。但是不久就发现日本的妈妈们都是站在一旁看着孩子，从不伸手帮忙。慢慢体会到，日本幼儿园就是通过这个每天的穿衣换衣，让孩子练习独立生活的能力的。通过每天到校后，换衣服、放联系手册，自己帖当日的sticker，挂手绢等从2、3岁开始的训练，孩子们养成有条不紊做事的习惯。

4.大冬天穿短裤
       日本幼儿园的孩子，冬天无论多么冷的天，都穿非常短的短裤上学。刚去的时候，北京的爷爷奶奶非常担心，说一定要和老师商量一下，因为我们是中国的孩子，受不了这个冻。这个.。。，让我怎么说得出口。就算不重新唤起东亚病夫的记忆，起码也激活小皇帝的印象。没法子，只好入乡随俗地狠下心来，为国争个面子。不用说，刚入园那时候，三天两头就冻病了。和日本妈妈说呢，答案又叫人目瞪口呆“是啊，孩子送幼儿园就是来让他们得病的。”看看一个个像小炮弹一样冲到我面前说“你好”的孩子，那个结实劲儿，我是觉得我们不能太金贵孩子了。

5.0岁参加运动会
       刚到幼儿园，就看见很多老师怀里都抱着个小小孩，看上去也就几个月大吧，一问，是0岁。田田幼儿园的班都用花的名字命名，田田曾经是菊花，然后变成百合，现在已经是一株很有大姐姐风范的紫罗兰了。而0岁的小宝宝，就是“桃花”班，用日文叫“もも”，和咱汉字的“毛毛”同音（日本的文字本来就来源于汉字），很是形象。这些0岁的毛毛，不光入托了，而且还要参加幼儿园的一切大型活动，比方运动会、演出发表会等。看这些0岁的毛毛哭着拼命向前爬，还是有点打动人的力量的。

6.女孩子踢足球
       日本幼儿园到了年中组，开始上每周一次的jumping课，相当于我们的体育和形体课；到了年长组，就有了足球大会，孩子们成天不是练习打鼓，就是练习足球，那是真踢啊，而且不停有幼儿园之间的比赛，田田的身上青一块、紫一块的，但是体力和勇气都练出了。
       说实话，刚来日本时，田田的表现真是让人汗颜。日本的孩子一般从十三四岁开始，才往上蹿个儿，之前比中国孩子矮很多。田田在班里，那可是鹤立鸡群的“庞然大物”，无奈实在是外强中干。日本孩子光着脚在外边跑，田田呢，榻榻米上有一点沙子，就恨不得踮着脚走路。有一次远足爬山，最后一个不算，下来的时候，干脆由两个矮个子的日本孩子搀扶下山。这怨不得孩子，3岁的孩子，根本没有让她徒步爬山1小时的经验。现在好了，去年在香格里拉，在缺氧的环境下，徒步4个小时没有任何问题。

7.完全混班教育
       在中国时，我们参观过几次田田的幼儿园，都是各班在各班上课，到了日本就不同，在9：30之前，3：30之后，全园的孩子都在一起玩，而且在院子里，大孩子抱小孩子，小孩子追大孩子，玩得狠疯狂。孩子们真正能体会到哥哥姐姐、弟弟妹妹的感觉。孩子们的成长感特别明显。比方前些天田田年长组最后的发表会上，表演完太鼓之后，他们说了一番话，让所有的家长落泪：今天的发表会真高兴，低年组的小朋友们也非常努力地表演成功了。这是我们最后的发表会了，到了小学校我们仍然不会忘记我们的朋友和幼儿园。

8.教育是为了教孩子学会“笑”和“感谢”
       在这个幼儿园，似乎完全不重视孩子们的知识教育，孩子们没有课本，只有每月一册的绘本。学校的教学计划中，完全没有数学、假名、绘画、音乐这些项目，更别说英语、奥数了。也不学轮滑，也不教游泳。问教什么，答案永远也想不到－－“教孩子们学会笑眯眯！”在日本，无论走到哪里，无论和谁讲话，“笑眯眯”最重要，一个笑眯眯的女孩子最漂亮。还教什么？“教学会说谢谢”总之，这里强调的和国内是非常不同。但是通过三年的幼儿园生活，发现田田在音乐、美术、阅读等方面也有了长足的进步，而这方面的收获却是经由综合教育的方式获得的。

9.一年到头数不清的活动
       看看我的日历上标出的做便当的日子，就是田田他们远足的日子，一年到头不知道爬多少次山，看多少次湖，观察多少次动物和植物，除此之外，捡橡子了，打年糕了，开运动会了，为社区演出了，宿泊了，过园节了，开发表会了，去拜寺庙了，作品展了，反正是名堂多多。总之，结论是：日本的幼儿园生命在于活动！

10.中国人都不过的节日日本幼儿园过
       这也是让我狠狠吃惊的地方，像上面说的，日本幼儿园过一切他们自己的传统节日，女孩节，男孩节，纳凉节，除此之外，中国的正月初七的七草节（几位知道？）、二月的节分、七七乞巧节都认真地过上一遍。孩子回来说，今天老师问我这些节日在中国怎么过，我说：不知道。惭愧啊，妈妈也不知道。

乞巧节的手工－竹子上的心愿帖、牛郎织女、西瓜

11.老师的能量
       日本一个班，少到10个人，多到30个人，老师都只有一位。开始我是颇为怀疑的，大约把这些孩子都看住也就不错了。然而，可真是看轻了日本的幼儿园老师。就这一位老师，30个孩子的作品展，30个孩子从无到有的打鼓本领（非常专业啊），30个孩子的美术、音乐、阅读，30个孩子的生日，30个孩子的大型发表会、运动会全是这一位，有条不紊，像模像样。像去年发表会排的是《不来梅的音乐会》，日本的活动向来是一个孩子都不能少的，所以30个人当中，4只母鸡，3只猫，5只狗，2头驴子，几个小偷，老师要分别带领孩子们做好服装、道具和布景（全部废物利用）、配好音乐、编好剧目，排练一个多月，那可是不小的工作啊。但是看看那位老师每天还是轻轻松松的表情，50多岁的人了啊。佩服！

12.佛教的影响
       京都大概是日本寺庙最多的城市，整个城市有一种晨钟暮鼓的氛围，田田的幼儿园每个月都要到寺庙里受一次教诲，园里最重要的节日一定要拜佛，佛诞日、涅pan日都有活动，最近孩子们马上要毕业了，昨天就去了西本愿寺向佛许了愿，田田还代表班级给佛献了花。我问许了什么愿，她说：永远信任佛，永远对别人怀有感谢的心，永远认真倾听别人的话。

相关文章：
日本幼儿园繁复的装备
日本的幼儿教育
在日本给孩子做便当（图）
田田的日本钢琴老师
日本乞巧节

说明：这篇博文登在新浪首页之后，评论立刻就多起来。首先感谢网友花时间写评论，说明大家对教育都有自己的一份关心。评论中间提到的很多问题，三言两语的回复并不足以说明。
       写这篇文章的目的，只在于把一些心得和大家分享，自然目的不是要全篇照搬，各取所需也就是了。至于有网友说可以从字里行间看出我对日本教育的崇拜，进而劝我多对女儿进行中国传统教育，仍然非常感谢，但其实每一个人的思想都有很多不同的方面，一篇博文所能表现的只是其中很小的一个部分而已。如果您能耐心看看我博客中的其他博文，或可得出其他结论。
       在此我特别给出下面几个个链接，从中或可了解我对保持女儿中国传统文化底蕴的决心和对于一些其他相关问题的看法。
       在日本读《论语》
       田田和《论语》
       战争与和平－－在日本和田田参观和平博物馆

另：由于评论非常多，所以特别写了我为什么写《日本幼儿园让中国妈妈吃惊的事儿》作为回应。

【JS】操作数组：将第N个对象移动到第1个

pr[at]pr1984.com(PR) — Fri,18 Dec 2009 11:25:16 +0800

呃，接上个方法，改改就变了～

    index = 指定将要替换的数组对象
    1、取 0 - index 之间的数组对象 = part1
    2、取 index 数组对象 = part2
    3、取 index - length 之间的数组对象 = part3
    4、将 part2 与 part1合并，再与 part3  合并为一个数组，并返回。

程序代码

Array.prototype.sortAt=function(index) {
    var part1 = this.slice(0,index);
    var part2 = this.slice(index,index+1);
    var part3 = this.slice(index+1,this.length);
    return(part2.concat(part1).concat(part3));
};
var a=["a","b","c","d","e"].sortAt(3);
//结果：["d","a","b","c","e"]

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【JS】操作数组：在指定数组位置之后插入新内容

pr[at]pr1984.com(PR) — Fri,18 Dec 2009 11:17:05 +0800

在群里学到一个方法：

    index = 指定位置
    value = 要添加的新内容
    1、取 0 - index 之间的数组对象 = part1
    2、取 index 之后的数组对象 = part2
    3、给 part1 添加 value
    4、将 part1 与 part2 合并为一个数组，并返回。

程序代码

Array.prototype.insertAt=function(index,value){
    var part1 = this.slice(0,index);
    var part2 = this.slice(index);
    part1.push(value);
    return(part1.concat(part2) );
};
var a=["a","b","c","d","e"].insertAt(3,"f");
//结果：["a","b","c","f","d","e"]

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

辞职信

pr[at]pr1984.com(PR) — Wed,25 Nov 2009 11:18:02 +0800

嗟，夫君子不寄人以篱下，不枉食无功禄也。君子尚德，志在修身，不以言谗，不以行屈，亦不枉为左徒子也。时廿九当月，夜不能寐，以观星辰，但见月晦星暗，心有悲切，作请辞书。君子行事，不求贤能，但当得正直二字，事在力为，功在评过。事不为不受以功，事为之不担以过。君子自从，秋去暑来，已大半载矣。光阴荏苒，一往而不复返，岂能碌碌而不为之？夫韩信始附项梁，继属项羽，屡进言，不为用。愤而离之，投之于邦，波折周起，始为用。然终为吕后所害。君子不才，亦不想为韩信乎，不结怨于吕后乎。现位卑权微，离之尚不为大震也，故明哲理而远非乱是为君子上策也。嗟！“月明星稀，乌鹊南飞。绕树三匝，何枝可依”。禽择良木而栖，然世人多知良木可栖，未尝知噪鸦可恶也。之有良木，枝叶丰茂，尚有风疾雷霆乎，人伐虫腐乎，鸟禽相噪乎。《大学》曰：君子贤其贤而亲其亲，小人乐其乐而利其利。心痛良木之朽，多加谏言，了然已成小人口中之噪鸦哉！其年内，出外有三，然一，再次，于三，位渐微而力渐无矣。空食功禄，于心不安矣。古有左徒，其心忠昭日月，亦为噪鸦矣！自投汩罗；今君子亦为噪鸦，前后思兮，泣然矣。古云：君子有自知之明。

自离之，终不被弃。

一个评分样式的自白

pr[at]pr1984.com(PR) — Wed,28 Oct 2009 17:29:53 +0800

不是自己公司需要的东西，受某人所托。。。记录下～

需求：
1、柱状图可设置高度：0 - 100%
2、柱状图垂直对齐方式：底部
3、数值垂直对齐方式：相对柱状图顶部
4、数值水平对齐方式：相对柱状图水平对齐
5、数值长度支持：0 - 8位

IMG

CSS

程序代码

.box { position:relative; width:200px; height:200px; border:1px solid #ccc; background:#eee; }
.box ul { position:relative; margin:30% 0 0; padding:0; height:70%; }
.box li { position:absolute; bottom:1.5em; width:5%; list-style:none; border:1px solid; border-color:#fff #999 #999 #fff; background:red; }
.box li strong,
.box li span { position:absolute; left:-50px; bottom:-1.5em; width:110px; text-align:center; font-size:9pt; font-weight:normal; }
.box li span { top:-1.5em; font-size:9pt; }
li.一 { height:50%; left:20%; }
li.二 { height:20%; left:45%; }
li.三 { height:70%; left:70%; }

HTML

程序代码

很傻10

很呆40

很痴70

Run

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个评分样式的自白</title>
<style type="text/css">
.box { position:relative; width:200px; height:200px; border:1px solid #ccc; background:#eee; }
.box ul { position:relative; margin:30% 0 0; padding:0; height:70%; }
.box li { position:absolute; bottom:1.5em; width:5%; list-style:none; border:1px solid; border-color:#fff #999 #999 #fff; background:red; }
.box li strong,
.box li span { position:absolute; left:-50px; bottom:-1.5em; width:110px; text-align:center; font-size:9pt; font-weight:normal; }
.box li span { top:-1.5em; font-size:9pt; }
li.一 { height:50%; left:20%; }
li.二 { height:20%; left:45%; }
li.三 { height:70%; left:70%; }
</style>
</head>

<body>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

固定提示窗口

pr[at]pr1984.com(PR) — Fri,16 Oct 2009 17:29:55 +0800

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>固定提示窗口</title>
<style type="text/css">
#winNew { position:relative; width:200px; height:23px;overflow:hidden; font-size:12px; line-height:1.5; background:url(<a href="http://www.pr1984.com/images/tempimg/winFloat.gif" target="_blank">http://www.pr1984.com/images/tempimg/winFloat.gif</a>) no-repeat;}
#winNew p { padding:0 10px; margin:0; }
#winNew p.title { padding:5px 10px 5px; color:#fff; }
#winNew .min,
#winNew .max,
#winNew .colse { position:absolute; right:0; top:0; z-index:2; width:23px; height:16px; display:block; overflow:hidden; text-indent:-999em; background:url(<a href="http://www.pr1984.com/images/tempimg/winfloat.gif" target="_blank">http://www.pr1984.com/images/tempimg/winfloat.gif</a>) no-repeat right top; cursor:pointer; }
#winNew .colse:hover { background-position:right -16px; }
#winNew .min { right:22px; background-position:-200px 0; }
#winNew .min:hover { background-position:-200px -16px; }
#winNew .max { right:22px; background-position:-200px -32px; }
#winNew .max:hover { background-position:-200px -48px; }
</style>
</head>

<div id="winNew">
	<p class="title"><strong>重要通知：</strong>
	<p>看什么看，你妈妈叫你回家吃饭：</p>
	<p>一碗饭...</p>
	<p>两碗饭...</p>
	<p>...</p>
	<a href="javascript:void(0);" id="minWinNew" class="min"></a><a href="javascript:void(0);" id="colseWinNew" class="colse" title="关闭"></a>
</div>
<script type="text/javascript">
var QJ={//基础DOM
	$:function(obj,tag){//取id|tag
		if(!tag){return document.getElementById(obj);}
		else if(typeof obj=='string'){return document.getElementById(obj).getElementsByTagName(tag);}
		else{return obj.getElementsByTagName(tag);}
	},
	addEvent:function addEvent(obj,type,fn){//二级事件
		if(obj.attachEvent){
			obj['e'+type+fn]=fn;
			obj[type+fn]=function(){obj['e'+type+fn](window.event);}
			obj.attachEvent(type,obj[type+fn]);
		}
		else obj.addEventListener(type.slice(2),fn,false);
	}
}
var mm={//缩放
	obj:function(a,b,wh,s,min_,max_,css){
		if(!a||!b){return false}
		s=(!s)?20:s;
		this.whs=function(){return (wh=="width")?b.clientWidth:b.clientHeight;};
		QJ.addEvent(a,"onclick",function(){
			if(mm.maxmin)clearInterval(mm.maxmin);
			var wh_=mm.whs();
			if(!max_){min_=wh_}
			if(wh_>min_){mm.if_(b,wh,s,min_);this.className+=" "+css;}
			else if(wh_<max_){mm.if_(b,wh,s,max_);var z=new RegExp("\\b"+css+"\\b","g");this.className=this.className.replace(z,"");}
			this.blur();return false;
		})
	},
	if_:function(obj,wh,s,x){
		var wh_=this.whs();
		var i=(wh_>x)?0:1;
		this.maxmin=setInterval(function(){mm.goto(obj,wh,x,i)},s);
	},
	goto:function(obj,wh,x,mm){
		wh_=this.whs();
		var x_=(x==0)?1:x;
		if(mm==0&&wh_>x_){wh_=wh_-(((wh_/10)<1)?1:(wh_/5));}
		else if(mm==1&&wh_<x){if(wh_==0){wh_=10;}wh_=wh_+(wh_/5);}
		else{clearInterval(this.maxmin);wh_=x;}
		obj.style[wh]=wh_+"px";
	}
};
function winFloat(obj,css){//OBJ三个对象：0=主窗口，1=缩放按钮，2=关闭按钮。
	if(!obj||typeof obj!="object"){return false}
	//跟随
	this.xy(obj[0]);
	//缩放
	mm.obj(obj[1],obj[0],"height",25,23,110,css);
	//关闭
	obj[2].onclick=function(){obj[0].style.display="none";this.blur();return false;}
	//初始展开
	mm.if_(obj[0],"height",25,110);
}
winFloat.prototype.xy=function(obj){//跟随
	if(!window.XMLHttpRequest){
		obj.style.cssText+="position:absolute;right:0;";
		var scrollTop_=function(){
			var st=(document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop:(document.body)?document.body.scrollTop:null;
			obj.style.bottom=-(st)+"px";
		}
		scrollTop_();
		QJ.addEvent(window,"onscroll",scrollTop_);
	}
	else{obj.style.cssText+="position:fixed;right:0;bottom:0;"}
}
new winFloat([QJ.$("winNew"),QJ.$("minWinNew"),QJ.$("colseWinNew")],"max");
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

复选框(checkbox)练习

pr[at]pr1984.com(PR) — Thu,24 Sep 2009 10:07:17 +0800

HTML代码

<body>
<div id="sCop">
	<p>当选择Y时，N不可选；选择N时，其他都不可选。</p>
	<ul>
		<li><label for=""><input class="Y" type="checkbox" />可以合并 Y</label></li>
		<li><label for=""><input class="N" type="checkbox" />不可以合并 N</label></li>
		<li><label for=""><input class="N" type="checkbox" />不可以合并 N</label></li>
		<li><label for=""><input class="Y" type="checkbox" />可以合并 Y</label></li>
	</ul>
</div>
<script type="text/javascript">
var che={
	obj:function(id,css){//处理对象
		var obj=document.getElementById(id).getElementsByTagName("input");
		for(var i=0;i<obj.length;i++){
			obj[i].onclick=function(){
				che.goto(this,obj,css);
			}
		}
	},
	goto:function(cheObj,obj,css){//处理结果
		var objs_=this.if_push(obj,"checked","");//得到所有没有被选中的对象
		objs=(cheObj.className==css[0])?this.if_push(objs_,"className",css[1]):objs_;//对象class=Y时，objs为所有class=N的对象，否则objs等于所有对象
		var x=(this.if_s(this.if_push(obj,"className",cheObj.className),"checked","checked"))?"disabled":"";//对象被选中时，obj不可选，否则obj可选
		this.c(objs,"disabled",x);
	},
	if_push:function(obj,a,b){//判断对象的a属性值是否等于b，并将符合条件的对象合并返回
		var x=[];
		for(var i=0;i<obj.length;i++){
			if(obj[i][a]==b){x.push(obj[i])}
		}
		return x;
	},
	if_s:function(obj,a,b){//判断对象的a属性值是否等于b，并返回结果;
		for(var i=0;i<obj.length;i++){
			if(obj[i][a]==b||obj[i][a]==true){var x=true;}
		}
		return x;
	},
	c:function(obj,a,b){//给对象写入属性及属性值
		for(var i=0;i<obj.length;i++){
			obj[i][a]=b;
		}
	}
}
che.obj("sCop",["Y","N"]);
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

缩放练习

pr[at]pr1984.com(PR) — Tue,15 Sep 2009 14:36:34 +0800

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="PRcss,xhtml,html,css,js,book,个人主页,无聊,神经,懒惰" />
<meta name="description" content="PRcss的个人主页,无聊的,神经的,懒惰的..." />
<meta name="Author" content="PRcss,qq:50198763" />
<meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" />
<link rel="shortcut icon" href="<a href="http://www.pr1984.com/favicon.ico" target="_blank">http://www.pr1984.com/favicon.ico</a>" />
<script type="text/javascript">
var pr={
	$:function(obj,tag){
		if(!tag){return document.getElementById(obj);}
		else if(typeof obj=='string'){return document.getElementById(obj).getElementsByTagName(tag);}
		else{return obj.getElementsByTagName(tag);}
	},
	addEvent:function(obj,on,fn){
		obj.attachEvent?obj.attachEvent(on,function(){fn.call(obj)}):obj.addEventListener(on.slice(2),fn,false);
	}
}
/*
a = 被绑定触发事件的对象
b = 被操作的对象
wh = width或者height
s = 运动速度(可选，默认20)
min_ = 最小范围
max_ = 最大范围(可选，默认对象自身width或height)
*/
var mm={
	obj:function(a,b,wh,s,min_,max_){
		if(!a||!b){return false}
		s=(!s)?20:s;
		pr.addEvent(a,"onclick",function(){
			clearInterval(mm.maxmin);
			var wh_=mm.whs(b,wh);
			if(!max_){min_=wh_}
			if(wh_>min_){mm.if_(b,wh,s,min_);}
			else if(wh_<max_){mm.if_(b,wh,s,max_);}
		})
	},
	if_:function(obj,wh,s,x){
		var wh_=this.whs(obj,wh);
		if(wh_>x){this.maxmin=setInterval(function(){mm.goto(obj,wh,x,0)},s);}
		if(wh_<x){this.maxmin=setInterval(function(){mm.goto(obj,wh,x,1)},s);}
	},
	whs:function(b,wh){return (wh=="width")?b.clientWidth:b.clientHeight;},
	goto:function(obj,wh,x,mm){
		wh_=this.whs(obj,wh);
		var x_=(x==0)?1:x;
		if(mm==0&&wh_>x_){wh_=wh_-(((wh_/10)<1)?1:(wh_/5));}
		else if(mm==1&&wh_<x){if(wh_==0){wh_=10;}wh_=wh_+(wh_/5);}
		else{clearInterval(this.maxmin);wh_=x;}
		obj.style[wh]=wh_+"px";
		pr.$("random").innerHTML=wh_+"px";
	}
}
pr.addEvent(window,"onload",function(){mm.obj(pr.$('gt'),pr.$('pr'),'height',10,0,150)});
</script>
<title>缩放：高度 - www.pr1984.com</title>
</head>
<body>
<p><button type="button" id="gt">测试</button> 监测：<span id="random"></span></p>
<p id="pr" style=" overflow:hidden; background:#eee; ">测试</p>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

PRcss

中文字体名称对照表

兼容日记

日本幼儿园12件令中国妈妈目瞪口呆的事儿

【JS】 操作数组：将第N个对象移动到第1个

【JS】 操作数组：在指定数组位置之后插入新内容

辞职信

一个评分样式的自白

固定提示窗口

复选框(checkbox)练习

缩放练习

【JS】操作数组：将第N个对象移动到第1个

【JS】操作数组：在指定数组位置之后插入新内容