webrebuild.org第四届年会——金秋四城联动
大白的工作笔记 注册 | 登陆
浏览模式: 标准 | 列表分类:CSS&JS学习

关于json的正确格式

Submitted by chen0908 on 2010, August 25, 12:37 PM

08年的时候就开始在用json 做一个零时数据的页面，那时候做得是 08年欧洲杯的一个活动页面，我用json记录比赛场次时间之类的信息。后来09年在dnf商城让程序员在后台输出json我在前台操作他生成产品的 颜色 尺码 编号 等等之类信息，但是使用了这么久一直没有在意自己写的json 是否格式真的那么正确。

昨天产品需求让我做一个招聘页面，提供了一份word文档里面有一切招聘岗位的描述。于是为让他提一个需求给程序员在后台提供给编辑一个可以发布招聘信息的编辑器。结果产品以招聘岗位很少变更为由（招聘的都是销售 市场推广之类的人才，所以多多不限），让我把5个招聘职位做成静态的。于是我就想把招聘的信息记录在json里面，用js生成页面。

 

JavaScript代码
  1. [  
  2. {job:"市场销售",adds:"深圳"},
  3. {job:"电话专员",adds:"深圳，广州"}  
  4. ]  

这个是标准的json数据么？ 我用jsonView.(点击下载如果不能下载请百度“json viewer”关键字) 查看显示确实能够用，而且能够体现数据结构（如下图）。

 

但是我突然想起我有一个基于firefox的火狐插件jsonView（在火狐里面选工具 附加组件 获取附加组件 查询jsonView 就可以找到）。我好奇的把这个结构去验证一下（装了组件以后打开下面这个连接。）http://www.dabaii.com/demo/20100825/1.json(如果显示成文本本件，把json文件另存在本地用firefox打开就可以验证)。

你会发现这个插件会提示你 ：“分析JSON文件时出错。文件格式可能不正确.”

其实在json里面， 属性和值 都需要用引号包含起来。   {job:"文本"} 应该写成{”job":"文本"}

一份json在页面上怎么调用呢 ……如果用jquery的话 里面提供了一个 调用json的方法：

JavaScript代码
  1. $.getJSON(  
  2.   "jobs.json",  
  3.   function(json){  
  4.     alert("JSON Data:   " + json[0]['apellation']);  
  5.   }  
  6. );   
提供一个demo 和json文件。

http://www.dabaii.com/demo/20100825/1.json

http://www.dabaii.com/demo/20100825/json.html

 

Tags: json

CSS&JS学习 | 评论:0 | Trackbacks:0 | 阅读:119

preventDefault() 和return false的区别

Submitted by chen0908 on 2010, July 9, 4:38 PM

return false会阻止冒泡的发生，而preventDefault 不会，

看地址 http://www.dabaii.com/demo/20100709/

CSS&JS学习 | 评论:0 | Trackbacks:0 | 阅读:574

对于ie，注意position属性带来的性能问题

Submitted by chen0908 on 2010, July 1, 5:18 PM

今天遇到的这个问题其实早在1年前做DNF商城的时候就遇到了，由于ajax的数据加载，导致原本拥有position属性的元素不会自动移动位置，导致原始内容，和ajax 内容叠加。

当然，单单测试position 是不会有问题的。但是这个问题很容易触发。比如说 position 的父标签或者最祖辈标签里有背景。加入机器稍微差点这个时候就会触发。如果机器好点 ，有可能还得加条件。

同样，网上流传的那个清楚浮动的理想方式里面的 

 

CSS代码
  1. * html .clearfix { height: 1%; }  

这个也会引起新能问题。

 

提供一个测试：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>bug</title>  
  6.   
  7. <style>  
  8. /* --------|  Clear Fix |--------- */  
  9. * html .clearfix{height:1%; } /*这个是网上流传的清理浮动里面的一个属性，为了展示bug 多余的我去掉了*/  
  10.   
  11. #hnseverBox{background:url(../../images/newUI/newsc/di.gif) no-repeat;} /*父标签指定一个背景图，不管这个背景图url真确与否。*/  
  12. .openlist {position:relative;} /*这个这个*/  
  13. </style>  
  14. <script src="http://www.dabaii.com/demo/38/jquery.js"></script>  
  15.   
  16. <script>  
  17. $(function(){  
  18.     $('.openlist').each(function(i){  
  19.         $(this).click(function(){  
  20.             $.ajax({  
  21.               url: "http://www.dabaii.com/demo/20100701/test.html",  
  22.               cache: false,  
  23.               success: function(html){  
  24.                 $('.time_line').eq(i).html(html).attr('class','time_line');  
  25.                   
  26.               }  
  27.             });                      
  28.         })                     
  29.     })           
  30. })  
  31. </script>  
  32. </head>  
  33. <body>  
  34. <div id="hnseverBox">  
  35.   
  36.             <div class="time_line">ajax数据输出位置</div>  
  37.             <div class="clearfix"><a class="openlist" href="###">查看更多</a></div>  
  38.   
  39.            <div class="time_line">ajax数据输出位置</div>  
  40.             <div class="clearfix"><a class="openlist" href="###">查看更多</a></div>  
  41.   
  42.   </div>  
  43.   
  44. </body>  
  45. </html>  

试试用你的ie6 测试一下。http://www.dabaii.com/demo/20100701/

注意这个一个测试文件。不要纠结css代码和结构的意义。虽然这个测试文件 这种css 和代码看上去没啥意义，也不符合逻辑。为什么平白无故清浮动？ 为什么A要有position:relative。但是总归有一天会又这样的结构需要这样的css……这里只是展示一下这个bug出现的条件而已。

 

CSS&JS学习 | 评论:0 | Trackbacks:0 | 阅读:949

display:inline-block 的应用

Submitted by chen0908 on 2010, June 25, 11:51 AM

CSS代码
  1. li { display:inline-block; width:270px; min-height:180px; vertical-align: top;   *display:inline; _hiehgt:180px;zoom: 1;}   
首先看这行代码

这行代码有啥用呢？  实际上我在产品布局的时候希望 产品呈方块形一个个排列，一行N个，一共x行。

但是我们知道如果我们使用浮动的话 必须给li定高，要不然 不等高会导致下一行出现错位。原因是 在统一行多个浮动始终会以最高的那个为标准来确定是否换行。 至于为什么要浮动，而使用inline， 主要是我们希望li这个元素拥有block状态下的一些属性。以便更好的控制。

而使用inline-block 可以实现有lnline的显示方式，但是又有block的属性。 但是这个属性版本性支持不理想。

首先我们在ie下面使用*display:inline; zoom: 1;来模拟。 display 可以让对象实现在一行显示， zoom可以让对象获得layout，从而拥有black状态的一些属性。 

vertical-align: top; 解决li之间上下对其的问题

min-height:180px; 主要是让默认状态实现统一的一个高度。

 _hiehgt:180px; 让ie6实现 min-height

 

 

 

CSS&JS学习 | 评论:0 | Trackbacks:0 | 阅读:755

如何实现 不定宽度浮动列表居中

Submitted by chen0908 on 2010, April 12, 3:50 PM

最近突然想到了这个问题，以前看过类似文章的解答，自己也想了想，笔记一下 ，以免忘记。

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>测试</title>  
  6. <style>  
  7. *{ padding:0; margin:0; list-style:none;}  
  8. ul { float:left; position:relative; left:50%;}  
  9. li { float:left;position:relative; right:50%; padding:6px; }  
  10. </style>  
  11. </head>  
  12. <body>  
  13. <div>  
  14.   <ul>  
  15.     <li><a href="#">一丝不挂-陈奕迅</a></li>  
  16.     <li><a href="#">再见二丁目-杨千桦</a></li>  
  17.     <li><a href="#">春光乍泄-张国荣</a></li>  
  18.   </ul>  
  19. </div>  
  20. </body>  
  21. </html>  
首先，ul设置左浮动是为了 使得ul的宽度不是100%，而是 几个li宽度的总和。 之后ul相对定位 使用left把ul移动到剧中位置。

这个使用 li的起始位置在剧中的50%的地方，所以需要把li 向左边移动50%。 这里想问题的时候要注意，position:relative所定义的移动百分比不是相对于自身的，而是相对于父元素的。也就是说 li 50% 实际上计算出来的宽度 是 ul宽度的一半，而不是li的。

Tags: float, 居中

CSS&JS学习 | 评论:0 | Trackbacks:0 | 阅读:1465

bottom:-1px 在ie 下面错位的问题

Submitted by chen0908 on 2010, March 17, 3:58 PM

今天我做圆角box。设置左下角 和右下角的 位置是bottom :-1px; 按计算来说是正常的。但是始终错位了1像素。

分析以后才知道，如果box高度是奇数的话，这个bug会出现。笔记一下。

CSS&JS学习 | 评论:0 | Trackbacks:0 | 阅读:1597

哥们 别埋怨IE

Submitted by chen0908 on 2009, December 1, 12:17 PM

我发表这篇文章 也是用的火狐浏览器，我有很多插件 …… 点击 帮助（alt+h）——关于mozilla firefox（A）看到的版本更新信息是20091102。打开我的ie7，一样的操作，我看到的版权信息是2006年，百度百科一下（http://baike.baidu.com/view/392749.htm）,2006年末发布的。

在来看看我们天天抱怨的ie6把（http://baike.baidu.com/view/476980.htm）,2001年末发布的版本。

那看看我们的css版本把（http://baike.baidu.com/view/15916.htm#2）,1998年中旬发布的css2.0。

有何感想？你有理由去抱怨一款8年前的或者3年前的产品么？在你抱怨他的时候是否看到他的伟大，试问如果firefox从现在开始不更新能否3年以后 8年以后还能用来正确有效的浏览90%以上的网页?在抱怨的时候你为啥不想想在这8年的时间里为什么舍不得花费20分钟来升级你的浏览器。

一款不更新的浏览器能够坚持8年已经不错了，你们就放过ie6把，该升级的升级，改写hack的写hack，不要整天骂他了。他只是个孩子。

火狐的版本历史（http://baike.baidu.com/view/3279.htm#2）,太多太多，我很喜欢火狐，但是如果真的说心里话，我很佩服ie。

 

Tags: ie6, ie7, firefox

CSS&JS学习 | 评论:8 | Trackbacks:0 | 阅读:3888

html5标签汇总表

Submitted by chen0908 on 2009, November 24, 1:28 PM

注意， 数据链接来源于http://www.w3school.com.cn/ ，我只不过是做了2次整理以便于学习。

在线地址：

http://www.dabaii.com/demo/2009/04/index.htm

xls表格下载

http//www.dabaii.com/demo/2009/04/html4_html5.xls

 

百度文档中心下载

http://wendang.baidu.com/view/2079551810a6f524ccbf8596.html

 

万恶的 google文档又挂了~~~所以不提供地址。另外我的评论系统坏了，有错误请麻烦各位邮箱联系  dabaicj@gmail.com

Tags: html5, w3school

CSS&JS学习 | 评论:5 | Trackbacks:0 | 阅读:2778

滑动 点击 评分效果

Submitted by chen0908 on 2009, November 20, 11:34 AM

森林某人 前几天问

http://www.dabaii.com/demo/2009/03/ 
大小: 15.03 K 尺寸: 500 x 235 浏览: 38 次 点击打开新窗口浏览全图
这个效果怎么写标签，于是 我想起了我之前写的一个模范豆瓣评分的（http://dabaii.com/?action=show&id=35）。

显然这次的评分和上次的从标签来说 没什么好说的，主要还是看怎么实现效果。

首先确定结构

XML/HTML代码
  1. <div class="box">  
  2. <div class="f">0</div>  
  3. <div class="s"></div>  
  4. </div>  

首先要确保可以复用 ，所以box是个单独的模块，一个评分条。 f 是现实分值的， s 是评分条。

css代码（不解释）：

CSS代码
  1. <style type="text/css" media="screen"><!--   
  2. *{padding:0; margin:0;}   
  3. body { font-size:12px; padding:200px;}   
  4. .box { width:600px; height:35px; margin:10px;overflow:hidden; }   
  5. .s { width:482px; height:13px; background:url(images/1.gif) no-repeat 0 -22px;}   
  6. .f { width:29px; height:22px; background:url(images/1.gif); text-align:center; line-height:15px; color:#FFF; }   
  7. --></style>  

关键是思维，其实我一直觉得写前端效果主要还是要想到用什么方式实现效果。我这里采用的是获取鼠标基于评分条位置来确定分数显示版的位置，来判断鼠标位置位于评分条总宽度的百分比，然后确定分数显示版的数值。

步骤
1。给所有评分条绑定事件；
2。获取评分条的位置；
3。获取鼠标位置；
4。计算显示板的需要显示的位置（鼠标位置-评分条位置）；
5。计算显示数值（显示位置/评分条宽度*10；截取小数点1位）；
6。设置到相应页面属性。

提供一个获取鼠标位置的方法。

js代码（基于jQ，别问我js怎么写 不解释）：

JavaScript代码
  1. <script>   
  2. $(document).ready(function(){   
  3. var w3c=(document.getElementById)? true: false;   
  4. var agt=navigator.userAgent.toLowerCase();   
  5. var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));   
  6. function IeTrueBody(){//判断头部是否有标准声明   
  7.     return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body   
  8. }   
  9.   
  10. $('.s').each(function(i){   
  11.     //获取评分条位置   
  12.     var offset = $(this).offset().left;   
  13.     $(this).click(function (e){   
  14.          var curX=(!ie)?e.pageX : event.clientX+IeTrueBody().scrollLeft;   
  15.         var n1 = curX - offset ;   
  16.         var n2 = n1/482*10 + '' ;   
  17.         n2 = n2.slice(0,3);   
  18.         $('.f').eq(i).html(n2).animate({marginLeft:n1-10},'slow');   
  19.     })                     
  20.  })                           
  21. })   
  22. </script>  

Tags: 评分效果, css森林

CSS&JS学习 | 评论:4 | Trackbacks:0 | 阅读:2651

数字国际格式转换

Submitted by chen0908 on 2009, September 24, 12:04 PM

前段时间腾讯招聘，群友去了以后带回来的题目。

把数字格式123456789转换成123,456,789.

由于本人对正则一窍不通，所以根本就想不到用正则去处理这个问题，于是用的是分割字符串的办法。

 

JavaScript代码
  1. <script>   
  2. function changeNumber(number,end){   
  3.     number +=  "" //转换成字符串   
  4.     var numberL = number.length;  //获取数据长度   
  5.     //长度小于3的直接输出不需要加千分号   
  6.     if(numberL <= 3){   
  7.             return (number);   
  8.         }   
  9.     //长度大于3的处理   
  10.     else{   
  11.         var numberArray = [];//定义分割字符数组   
  12.         var remainder = numberL%end; //获取获取数据长度余数，确保分割位数正确   
  13.         //如果有余数 则不能平均格数分配千分符，所以把剩余位数从最前面取出   
  14.         if(remainder){   
  15.         //alert("有余数")   
  16.         var numberPart1 = number.slice(0,remainder);  //取字符串多余位数   
  17.         var numberPart2 = number.slice(remainder,numberL+1); //剩余的位数正好可以被千分符号 正常隔开   
  18.         }   
  19.         else{   
  20.         //alert("没余数")   
  21.         var numberPart2 = number; //保持数据不变化    
  22.         }   
  23.         //递归截取数据 存入数组 参数为 start开始截取位置 end结束截取位置 cut截取长度    
  24.         function suanfa(start,end,cut){   
  25.             if(end <= numberL ){   
  26.                 numberArray.push(numberPart2.slice(start,end));   
  27.                 suanfa(start+cut,end+cut,cut);   
  28.             }   
  29.         }   
  30.         suanfa(0,end,3);   
  31.         //拼接字符串   
  32.         newNumber = remainder ? numberPart1+","+numberArray.join(","):numberArray.join(",");            
  33.         return(newNumber);   
  34.     }   
  35. }   
  36. </script>  

代码够多的把，能力不行就是没办法。

测试地址：http://dabaii.com/demo/2009/01/index.html

正则的方法：

JavaScript代码
  1. alert("12432423423".replace(/(?=(?!\b)(?:\w{3})+$)/g,","))  

 

不过用js的方法让我也长进了不少，至少很少使用的递归我今天倒是第一次用到了。

Tags: 腾讯面试, 格式转换

CSS&JS学习 | 评论:3 | Trackbacks:0 | 阅读:3333

变量作用域的问题

Submitted by chen0908 on 2009, September 24, 11:32 AM

笔记。

今天群里有人说去淘宝面试了，有一道关于简单有容易出错的问题，应为基础不牢固也犯错了特此笔记一下。

 

JavaScript代码
  1. var a = 100;   
  2. function testResult(){   
  3.   var b = 2 * a;   
  4.   var a = 200;   
  5.   var c = a / 2;   
  6.   alert(b);   
  7.   alert(c);   
  8. }   
  9. testResult()  

输出的是什么呢？

开始我觉得应该是  200 和 100， 结果 确实NaN和100。

为什么第一个会是NaN呢？命名已经定义了全局变量，var b=2 * a 应该是可以2*100的结果啊

后来翻阅资料才明白，当全局变量和局部变量同名的时候，全局变量是不会主用于同名局部变量的作用域的。也就是说var a=100是不会作用于testResult这个函数中的。

引用：

1.全局变量和它的作用域
　　全局变量是指在程序开头的说明部分定义和说明的量。它的作用域分为两种情况：
(1)在全局变量和局部变量不同名时，其作用域是整个程序。
(2)在全局变量和局部变量同名时，全局变量的作用域不包含同名局部变量的作用域。
2.局部变量和它的作用域
　　凡是在子程序内部使用的变量，必须在子程序中加入说明。这种在子程序内部说明的变量称为局部变量。局部变量的作用域是其所在的子程序。形式参数也只能在子程序中有效。因此也属于局部变量。局部变量的作用域分为两种情况：
(1)当外层过程序的局部变量名和嵌套过程中的局部变量不同名时，外层过程的局部变量作用域包含嵌套过琛。
(2)当外层过程的局部变量名和嵌套过程内的局部变量名同名时，外层局部变量名的作用域不包含此过程。

Tags: 作用域, 变量, 淘宝面试

CSS&JS学习 | 评论:6 | Trackbacks:0 | 阅读:3442

作为方法的函数

Submitted by chen0908 on 2009, June 8, 10:18 AM

起因：css森林的robin 在看js权威指南的时候遇到了这个困惑，在写p143页面的demo代码的时候 搞不清为啥demo要这样执行。

JavaScript代码
  1. <script>   
  2.     var o={ o1:1,   
  3.             o2:1,   
  4.             of:function(){   
  5.                     this.result = this.o1 + this.o2;       
  6.                 }   
  7.         };         
  8.         o.of();//为啥要执行这个   
  9.         alert(o.result);   
  10. </script>  

为什么要先执行一次 of();

只有调用了of 方法才有result属性.js属性是可以动态绑定的,o对像本身没有result属性.只有o1,o2属性.当调用of方法后.才会给o对像添加result属性.

 

 

CSS&JS学习 | 评论:4 | Trackbacks:0 | 阅读:8756

Records:5812345›