涉及正则--谈谈工作遇到的问题

Submitted by admin on 2010, February 9, 2:04 PM

工作中要取一个值,如下

XML/HTML代码
  1. <div id="aide">245张</div>  

这个值未知,已经确认会存在 空格/下划线/字母/中文等.不管那种情况,只取其中的数字..

于是个人想到:

JavaScript代码
  1. <script type="text/javascript">   
  2. var ad = document.getElementById("aide").innerHTML;   
  3. var a = ad.replace(/张/,"");   
  4. alert(a);   
  5. </script>  

但这样并没完全达到意外情况下的要求,只取值数字.虽然知道正则能够得到匹配的值,但除了懂得 [0-9] 是数字字符外,其它的一无所知.

搜索后得到 [^0-9] 是非数字字符.于是测试.

JavaScript代码
  1. <script type="text/javascript">   
  2. var ad = document.getElementById("aide").innerHTML;   
  3. var b = ad.replace(/[^0-9]/,"");   
  4. alert(b);   
  5. </script>  

在这个过程中顺便问了下群里的同仁,得到 [^\d]/g ,搜索之, 原来 \d 匹配一个数字字符,等价于[0-9]。 而^\d 匹配一个非数字字符。等价于[^0-9]。

» 阅读全文

Tags: 正则, web标准

Web标准 | 评论:0 | Trackbacks:0 | 阅读:133

前端性能优化建议--年终总结

Submitted by admin on 2010, January 15, 1:21 PM

一．结构有待优化。
目前网站结构代码存在冗余现象，结构的语义化不强，在扩展方面表现出不足。

修改方案：
后继制作应该考虑使用语义化的标签，使结构语义化，增强扩展性能力，以求在良好好结构中适应不同的设计需求。还可减少冗余代码，优化结构。

二. 样式的调用。
目前使用 <link>方式调用样式与JS，由于是模块化工作，使得有些模块反复调用同一样式的情况出现，部分样式重调与覆盖率太高，增加了http请求数，加大了下载的时间，减慢浏览器解释的速度，并造成了流量的损失。

修改方案：
整合样式，把每个页面用到的样式整合到同一个文件中，并对该页面的样式进行优化，去掉注释、空格、换行等，并通过第三方压缩软件进行压缩，以得到发布时最小的样式文件。

注：当然这又涉及到了样式管理，样式版本管理与多人协作的问题。

三. 修饰图片的优化。
目前网站中大多修饰图片都没有经过有效的整合，导致加载速度过慢、请求数增多，影响到页面的响应时间。

修改方案：
1．建议设计搞用色控制在255色内。
2．修饰图片格式的选择——GIF、PNG-8、PNG-24、JPG等，按需求进行选择合适的图片类型以求降低图片字节。
3．对公用的修饰图片、使用频率较高的修饰图片运用Css Sprites技术——也就是把修饰的小图片合理的整合到一张规范大小的图片上，以求减少请求数与图片大小，加快页面响应时间。
4．对某些比较大的修饰图片如JPG可运用第三方软件的再压缩，以求在不损失效果的前提下得到最佳大小。

注：特别强调一下css sprites技术。
a．CSS Sprites技术能减少图片的请求数，把零散的小图片放到一起，运用background-position来改变背景图片的位置，前提是html元素事先定义好宽高，其实就像一个遮罩，移动背景就会看到不同的景象。应用该技术的同时会相应的增加开发时间与维护成本，如果修改频率过高不建议使用。
b．压缩工作的推荐：Image Optimizer

» 阅读全文

Tags: 优化, web标准, 总结

Web标准 | 评论:0 | Trackbacks:0 | 阅读:267

Iamge固定居中于Div层中....

Submitted by admin on 2010, January 14, 10:37 AM

昨天群里的一位同学出了一个需求:在一固定的div中,图片如果大于div则实现等缩放,如小于则按原大小显示.2、不管前面那种情况,图片都要上下左右居中于div.

于是,动手写了下面的代码...

错误处不清楚,能力有限,期待高手批...

» 阅读全文

Tags: 居中, web标准

Web标准 | 评论:0 | Trackbacks:0 | 阅读:247

弹出窗口、遮罩、拖动、上下左右居中

Submitted by admin on 2010, January 13, 9:00 AM

前天参考51js一位牛人而整理的一个效果.

因这效果现下比较适用,所以先行试练.总体上没超过原作的思想,能力有限...

看代码吧

XML/HTML代码
  1. <p id="dt_1">登录</p>  
  2.   
  3. <div id="bodyBg" style="display:none;"></div>  
  4. <div id="maiBox" style="top:-900px;left:-900px;">  
  5. <div id="loginBox">用户登录</div>  
  6. <form action="#" method="">  
  7. <ul class="aiTable">  
  8.     <li><label for="username">用户名:</label><input type="text" id="username" name="username" class="aoie" /></li>  
  9.     <li><label for="password">密  码:</label><input type="password" name="password" id="password" class="aoie" /></li>  
  10.     <li class="aisubmit"><label><input type="submit" name="submit" value="登录" id="subLogin" /></label></li>  
  11. </ul>  
  12. </form>  
  13. <div class="wanji"><a href="#">忘记密码</a><a href="#">注册</a></div>  
  14. <p class="aiinput"><a id="aiclose" href="#">关闭</a></p>  
  15. </div>  
  16.   
  17. <script type="text/javascript">  
  18. <!--   
  19. for(var i=1;i<=2;i++)   
  20. {   
  21. eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");   
  22. }   
  23. var bodyBg = document.getElementById("bodyBg");   
  24. var maiBox = document.getElementById("maiBox");   
  25. var loginBox = document.getElementById("loginBox");   
  26. var boxh = document.getElementById("maiBox").scrollHeight;   
  27. var boxw = document.getElementById("maiBox").scrollWidth;   
  28. var winWidth = document.documentElement.clientWidth;   
  29. var winHeight =document.documentElement.clientHeight;   
  30. document.getElementById("aiclose").onclick = function()   
  31.     {   
  32.     hidden("maiBox");   
  33.     hidden("bodyBg");   
  34.     }   

» 阅读全文

Tags: web标准, 拖动, 居中, 弹窗

Web标准 | 评论:0 | Trackbacks:0 | 阅读:368

层在浏览器中上下左右居中,并适应不同分辨率

Submitted by admin on 2010, January 8, 9:54 AM

由于工作需要,要求一个层在浏览器中上下左右居中,并适应不同分辨率.

刚开始时想到小菜一碟,只在相对绝对一出,搞定.

接着进入实践阶段,才发现并不是如此.

XML/HTML代码
  1. <style type="text/css">  
  2. <!--    
  3. * {margin:0;padding:0}   
  4. div {   
  5.     width:500px;   
  6.     height:500px;   
  7.     border:1px solid #ccc;   
  8.     overflow:hidden;   
  9.     position:relative;   
  10.     display:table-cell;   
  11.     text-align:center;   
  12.     vertical-align:middle   
  13.     }   
  14. div p {   
  15.     position:static;   
  16.     +position:absolute;   
  17.     top:50%   
  18.     }   
  19. img {   
  20.     position:static;   
  21.     +position:relative;   
  22.     top:-50%;left:-50%;   
  23.     width:276px;   
  24.     height:110px   
  25.     }   
  26. -->  
  27. </style>  
  28. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  

» 阅读全文

Tags: 居中, web标准

Web标准 | 评论:0 | Trackbacks:0 | 阅读:339

发一个自己用的皮肤,名称随便忘记了...

Submitted by admin on 2010, January 7, 4:39 PM

[极点6皮肤]

从极点4到现在的极点6.5,基本上都是用_default 这个皮肤.

最近觉得不好看,于是动手制作两款,第一款因是抄 QQ拼音 的有版权问题存在,所以不发,只发后面的....(应几个网友的要求,都发了...)

现在用着这两款,感觉良好,未发现有头痛发热现象....

不多说... 

极点五笔皮肤

» 阅读全文

Tags: 极点皮肤

乱说狂言 | 评论:0 | Trackbacks:0 | 阅读:388

来看看国人的典型商业头脑，值得借鉴(转)

Submitted by admin on 2009, December 29, 8:53 AM

由于本活动已经结束, 所以本帖不存在广告嫌疑, 请大家纯技术性探讨，纯技术性攻击。我思考了，写的也很认真，对于还没买房子的人希望能有所帮助
真：www.shanghainightmare.com
寨：www.shanghainightmare.cn www.shanghainightmare.com.cn

证明图片

起因：半年多以前, 同事创办一个鬼屋,取了一个名字, 叫做上海梦魇启用www.wanshengjie.com, 想到英文名字,于是同时注册了一个同名域名(www.shanghainightmare.com)当作备用.

发展：经过半年的准备筹划项目进入运营.网站也上线， 经过大规模的投放广告， 小知名度之后,  有票贩子, 有代排队的. 对于一个新的东西,总是能够挖掘一些商业价值,很多人都在思考.

结果：作为技术流, 也有技术流的做法. 某人做了一个山寨版, 同时注册了我们备用域名的.cn 的域名(www.shanghainightmare.cn), 原帖在 http://www.dnbbs.com/viewthread. ... able&tid=113164, 经过乐猫的几轮折腾之后, 我们网站已经在baidu里面消失, 这个网站终成正果. 排名到baidu第一了.也算是他创业成功了吧.

» 阅读全文

Tags: 商业头脑

转载 | 评论:1 | Trackbacks:0 | 阅读:915

页面重构合理化讨论 会后记事...

Submitted by admin on 2009, December 27, 12:27 AM

谈谈自己的看法,当作一种学习.

1、结构合理化中
a)对于DTD的应用,相信大部分公司或者个人采用了比较宽松的DTD -过渡型.而其它的DTD有可能会根据项目要求或个人爱好而使用.至于html5的DTD,因为国情，IE6在市场上占有的比例,相信大多数公司都不会采用.

b)对于验证,许多同学都认为他的作用重点在于验证代码书写,嵌套规则的正确性,以及检错.至于通不通过验证,因为项目或者其它原因都是没有硬性要求.有同仁提到,在静态页面下可以通过w3c的验证,但是在交付后台完成程序嵌套后的页面.其本上验证会有很多提示.

c)在说这之前,就有一个想法,html标准够 语义化了么? 当然,在不断发展的过程中会完善这些.现下,我们能做的就是用自己认为有语义的标准来完成手中的项目.这些都是有分岐的.关于语义化,个人认为还有一段很长的路要走.在现下不段参加的终端,以及数据的提取,在良好语义化的结构中会更好地用于交互与阅读.

d)听说过,没了解.待搜索.

e)Class id命名规则一致性,多人协作的团队中,应该有一定的规范.小组中大部分人主体都会以英文来命名.各模块之间有的用拼音+字母的形式,有的会用英文.但同样有人提出,英文与拼音都有可能会让团队中的人不认识.除此之外,比较赞同一说法,命名方法采用aideClass的方法--即首个单词或者拼音小写,第二个英文或者拼音首个字母大写的方式.这方式虽然在字节上会增加一点,但对于要求经常维护的站点,或者协作都有利于它人的阅读.

f)前端,这块其实在切图与写代码的过程中就已经进行着,只是要重没那么大,至于SEO的具体内容.没有多大了解.

» 阅读全文

Tags: 交流会, 标准, 结构合理化

Web标准 | 评论:0 | Trackbacks:0 | 阅读:681

设计稿合成web页面…

Submitted by admin on 2009, December 25, 2:19 PM

声明：本设计稿来自 经典才子 lwid的作品
本人用来练习合成之速度之乱作……严禁它用、商用。如觉得作品不错，请联系 才子 lwid 进行进一步的合作。

于2009年9月8日留

效果小图:

经典才子 lwid的作品

一、切图之前的一点思考.
1、最小宽为?,背景-x 实现视觉全屏.
2、header部分用body>1px背景平铺还是单切?
3、整体结构考虑采用131.
4、3中a与b之间的关系--a在b中还是b在a中?
5、像素图片整合在一起还是分开,关键是用background还是img的考虑.
6、好友最新主题 栏目的结构用table还是li?
7、社区热门只有10个？定了十个？
8、通知栏会display:none;>还是一直存在。

二、实现--切图.
1、头部考虑到要1px平铺 所以 切 1px 高260左右.使得结构好的.
2、整理下 像素图 还是用背景吧.
3、其它的动刀后就出来了.

三、结构与样式
1、习惯多出的切掉.
2、好友最新主题 用 table
3、最新动态 用 dl
4、整体结构 排列为 131

10点了多了，准备睡，就不写了其它的了。

» 阅读全文

Tags: 合成, 制作

Web标准 | 评论:0 | Trackbacks:0 | 阅读:413

重温table隔行换色

Submitted by admin on 2009, December 24, 2:55 PM

无事,尝试写下隔行换色,写着写着就感觉自己在复制别人的东西,可悲啊.

不过,也好要档练习吧.

效果图

» 阅读全文

Tags: web标准, 隔行换色

Web标准 | 评论:0 | Trackbacks:0 | 阅读:397

Records:10112345678910›»