手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

一段无聊的代码[多行自动截取字符并加上...]

Submitted by gouki on 2012, March 29, 8:51 AM

一段未优化过的无聊JS代码，暂时不优化了，以实现为主：

XML/HTML代码
  1. <style type="text/css">.zxx_text_overflow_6{ width:100px; height:100px; border:1px solid #CCC; }</style>  
  2. <div class="zxx_text_overflow_6">  
  3.     <img src="i.png" alt="" style="float:right;width:50px;" />  
  4.     <p>你个杀千刀的，怎么写了这么多的文字，我要被拦腰截。断了啊，kitty救我！你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！</p>  
  5. </div>  
  6. <script type="text/javascript">  
  7.     String.prototype.strtoarray=function (){  
  8.         var t=[], b=/(\s*[\S\u00ad]+\s*)/g, f='';  
  9.         for(i=0; i<this.length; i++){  
  10.             c=this.charCodeAt(i);  
  11.             t.push(c>128?" "+this.charAt(i):this.charAt(i));//p += c < 128 ? 1 : (c < 2048 ? 2 : (c < 65536 ? 3 : 4));  
  12.         }  
  13.         //s = t.join("").split(b);  
  14.         return t.join("").split(b).join("Ω").replace(/ΩΩ/g,"Ω").split("Ω");  //这一段其实挺有意思，理论上，上一句就OK了，但事实上这一句才正常。。。好吧。
  15.         //    return s;  
  16.     }  
  17.     var t = +new Date();   
  18.     var d=document.querySelector(".zxx_text_overflow_6");  
  19.     var p=document.querySelector(".zxx_text_overflow_6 p");  
  20.     var pInfo = getComputedStyle(p);  
  21.     var s=p.innerHTML.strtoarray();  
  22.     var pData = [];  
  23.     p.innerHTML='';  
  24.     for(var i=0; i<s.length; i++){  
  25.         p.innerHTML+=s[i];  
  26.         pData.push(s[i]);  
  27.         if((p.offsetHeight+parseInt(pInfo.marginTop)+parseInt(pInfo.paddingTop))>= d.offsetHeight){  
  28.             if(s[i-1]!="。"||s[i-1]!='.'){  
  29.                 p.innerHTML = pData.slice(0,-2).join("")+ "...";  
  30.             }else{  
  31.                 p.innerHTML = pData.slice(0,-1).join("");  
  32.             }  
  33.             break;  
  34.         }  
  35.     }  
  36.     alert("执行时间" +((+new Date()) - t )/ 1000 + "秒");  
  37. </script>  

效果如下：
大小: 14.12 K 尺寸: 139 x 129 浏览: 2557 次 点击打开新窗口浏览全图

Javascript | 评论:0 | 阅读:16656

备份一个video的JS

Submitted by gouki on 2012, February 16, 5:58 PM

备份一个JS，不是为了代码很优秀，而是。。。想直接用里面的事件，就当成参考了：

JavaScript代码
  1. var media_events=new Array();  
  2. // was extracted from the spec in November 2011  
  3. media_events["loadstart"]=0;  
  4. media_events["progress"]=0;  
  5. media_events["suspend"]=0;  
  6. media_events["abort"]=0;  
  7. media_events["error"]=0;  
  8. media_events["emptied"]=0;  
  9. media_events["stalled"]=0;  
  10. media_events["loadedmetadata"]=0;  
  11. media_events["loadeddata"]=0;  
  12. media_events["canplay"]=0;  
  13. media_events["canplaythrough"]=0;  
  14. media_events["playing"]=0;  
  15. media_events["waiting"]=0;  
  16. media_events["seeking"]=0;  
  17. media_events["seeked"]=0;  
  18. media_events["ended"]=0;  
  19. media_events["durationchange"]=0;  
  20. media_events["timeupdate"]=0;  
  21. media_events["play"]=0;  
  22. media_events["pause"]=0;  
  23. media_events["ratechange"]=0;  
  24. media_events["volumechange"]=0;  
  25. var media_controller_events=new Array();  
  26. // was extracted from the spec in November 2011  
  27. media_controller_events["emptied"]=0;  
  28. media_controller_events["loadedmetadata"]=0;  
  29. media_controller_events["loadeddata"]=0;  
  30. media_controller_events["canplay"]=0;  
  31. media_controller_events["canplaythrough"]=0;  
  32. media_controller_events["playing"]=0;  
  33. media_controller_events["ended"]=0;  
  34. media_controller_events["waiting"]=0;  
  35. media_controller_events["durationchange"]=0;  
  36. media_controller_events["timeupdate"]=0;  
  37. media_controller_events["play"]=0;  
  38. media_controller_events["pause"]=0;  
  39. media_controller_events["ratechange"]=0;  
  40. media_controller_events["volumechange"]=0;  
  41. // was extracted from the spec in November 2011  
  42. var media_properties=[ "error","src","currentSrc","crossOrigin","networkState","preload","buffered","readyState","seeking","currentTime","initialTime","duration","startOffsetTime","paused","defaultPlaybackRate","playbackRate","played","seekable","ended","autoplay","loop","mediaGroup","controller","controls","volume","muted","defaultMuted","audioTracks","videoTracks","textTracks","width","height","videoWidth","videoHeight","poster" ];  
  43. var media_properties_elts=null;  
  44. var webm=null;  
  45. function init(){  
  46.     document._video=document.getElementById("video");  
  47.     webm=document.getElementById("webm");  
  48.     init_events();  
  49.     init_properties();  
  50.     init_mediatypes();  
  51.     // properties are updated even if no event was triggered  
  52.     setInterval(update_properties,500);  
  53. }  
  54. document.addEventListener("DOMContentLoaded",init,false);  
  55. function init_events(){  
  56.     for(key in media_events){  
  57.         document._video.addEventListener(key,capture,false);  
  58.     }  
  59.     var tbody=document.getElementById("events");  
  60.     var i=1;  
  61.     var tr=null;  
  62.     for(key in media_events){  
  63.         if(tr==null) tr=document.createElement("tr");  
  64.         var th=document.createElement("th");  
  65.         th.textContent=key;  
  66.         var td=document.createElement("td");  
  67.         td.setAttribute("id","e_"+key);  
  68.         td.innerHTML="0";  
  69.         td.className="false";  
  70.         tr.appendChild(th);  
  71.         tr.appendChild(td);  
  72.         if((i++%5)==0){  
  73.             tbody.appendChild(tr);  
  74.             tr=null;  
  75.         }  
  76.     }  
  77.     if(tr!=null) tbody.appendChild(tr);  
  78. }  
  79. function init_properties(){  
  80.     var tbody=document.getElementById("properties");  
  81.     var i=0;  
  82.     var tr=null;  
  83.     media_properties_elts=new Array(media_properties.length);  
  84.     do{  
  85.         if(tr==null) tr=document.createElement("tr");  
  86.         var th=document.createElement("th");  
  87.         th.textContent=media_properties[i];  
  88.         var td=document.createElement("td");  
  89.         td.setAttribute("id","p_"+media_properties[i]);  
  90.         var r=eval("document._video."+media_properties[i]);  
  91.         td.innerHTML=r;  
  92.         if(typeof(r)!="undefined"){  
  93.             td.className="true";  
  94.         }else{  
  95.             td.className="false";  
  96.         }  
  97.         tr.appendChild(th);  
  98.         tr.appendChild(td);  
  99.         media_properties_elts[i]=td;  
  100.         if((++i%3)==0){  
  101.             tbody.appendChild(tr);  
  102.             tr=null;  
  103.         }  
  104.     }while(i<media_properties.length);  
  105.     if(tr!=null) tbody.appendChild(tr);  
  106. }  
  107. function init_mediatypes(){  
  108.     var tbody=document.getElementById("m_video");  
  109.     var i=0;  
  110.     var tr=document.createElement("tr");  
  111.     var videoTypes=[ "video/ogg","video/mp4","video/webm" ];  
  112.     i=0;  
  113.     tr=document.createElement("tr");  
  114.     do{  
  115.         var td=document.createElement("th");  
  116.         td.innerHTML=videoTypes[i];  
  117.         tr.appendChild(td);  
  118.     }while(++i<videoTypes.length);  
  119.     tbody.appendChild(tr);  
  120.     i=0;  
  121.     tr=document.createElement("tr");  
  122.     if(!!document._video.canPlayType){  
  123.         do{  
  124.             var td=document.createElement("td");  
  125.             var support=document._video.canPlayType(videoTypes[i]);  
  126.             td.innerHTML='"'+support+'"';  
  127.             if(support==="maybe"){  
  128.                 td.className="true";  
  129.             }else if(support===""){  
  130.                 td.className="false";  
  131.             }  
  132.             tr.appendChild(td);  
  133.         }while(++i<videoTypes.length);  
  134.         tbody.appendChild(tr);  
  135.     }  
  136. }  
  137. function capture(event){  
  138.     media_events[event.type]=media_events[event.type]+1;  
  139.     for(key in media_events){  
  140.         var e=document.getElementById("e_"+key);  
  141.         if(e){  
  142.             e.innerHTML=media_events[key];  
  143.             if(media_events[key]>0) e.className="true";  
  144.         }  
  145.     }  
  146.     update_properties();  
  147. }  
  148. function update_properties(){  
  149.     var i=0;  
  150.     for(key in media_properties){  
  151.         var val=eval("document._video."+media_properties[key]);  
  152.         /* 
  153.          if (typeof val === "TimesRanges") { 
  154.          val = val.length + " TimeRanges"; 
  155.          } 
  156.          */  
  157.         media_properties_elts[i++].innerHTML=val;  
  158.     }  
  159.     if(!!document._video.audioTracks){  
  160.         var td=document.getElementById("m_audiotracks");  
  161.         td.innerHTML=document._video.audioTracks.length;  
  162.         td.className="true";  
  163.     }  
  164.     if(!!document._video.videoTracks){  
  165.         var td=document.getElementById("m_videotracks");  
  166.         td.innerHTML=document._video.videoTracks.length;  
  167.         td.className="true";  
  168.     }  
  169.     if(!!document._video.textTracks){  
  170.         var td=document.getElementById("m_texttracks");  
  171.         td.innerHTML=document._video.textTracks.length;  
  172.         td.className="true";  
  173.     }  
  174. }  
  175. var videos=new Array();  
  176. videos[0]=[  
  177.     "http://media.w3.org/2010/05/sintel/poster.png","http://media.w3.org/2010/05/sintel/trailer.mp4","http://media.w3.org/2010/05/sintel/trailer.ogv","http://media.w3.org/2010/05/sintel/trailer.webm"  
  178. ];  
  179. videos[1]=[  
  180.     "http://media.w3.org/2010/05/bunny/poster.png","http://media.w3.org/2010/05/bunny/trailer.mp4","http://media.w3.org/2010/05/bunny/trailer.ogv"  
  181. ];  
  182. videos[2]=[  
  183.     "http://media.w3.org/2010/05/bunny/poster.png","http://media.w3.org/2010/05/bunny/movie.mp4","http://media.w3.org/2010/05/bunny/movie.ogv"  
  184. ];  
  185. videos[3]=[  
  186.     "http://media.w3.org/2010/05/video/poster.png","http://media.w3.org/2010/05/video/movie_300.mp4","http://media.w3.org/2010/05/video/movie_300.ogv","http://media.w3.org/2010/05/video/movie_300.webm"  
  187. ];  
  188. function switchVideo(n){  
  189.     if(n>=videos.length) n=0;  
  190.     var mp4=document.getElementById("mp4");  
  191.     var ogv=document.getElementById("ogv");  
  192.     var parent=ogv.parentNode;  
  193.     document._video.setAttribute("poster",videos[n][0]);  
  194.     mp4.setAttribute("src",videos[n][1]);  
  195.     ogv.setAttribute("src",videos[n][2]);  
  196.     if(videos[n][3]){  
  197.         if(webm.parentNode==null){  
  198.             parent.insertBefore(webm,ogv);  
  199.         }  
  200.         webm.setAttribute("src",videos[n][3]);  
  201.     }else{  
  202.         if(webm.parentNode!=null){  
  203.             parent.removeChild(webm);  
  204.         }  
  205.     }  
  206.     document._video.load();  
  207. }  

这一段JS是从http://www.w3.org/2010/05/video/mediaevents.html拷贝而来，具体的演示就在这个页面了。我是想知道video标签中的一些事件。controller_event几乎用不到。
中文说明这里有：http://directguo.com/blog/index.php/2010/07/html5-audio-video-tag/

XML/HTML代码
  1. //错误状态  
  2.    Media.error; //null:正常  
  3.    Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  
  4.   
  5. //网络状态  
  6.    Media.currentSrc; //返回当前资源的URL  
  7.    Media.src = value; //返回或设置当前资源的URL  
  8.    Media.canPlayType(type); //是否能播放某种格式的资源  
  9.    Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  
  10.    Media.load(); //重新加载src指定的资源  
  11.    Media.buffered; //返回已缓冲区域，TimeRanges  
  12.    Media.preload; //none:不预载 metadata:预载资源信息 auto:  
  13.   
  14. //准备状态  
  15.    Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  
  16.    Media.seeking; //是否正在seeking  
  17.   
  18. //回放状态  
  19.    Media.currentTime = value; //当前播放的位置，赋值可改变位置  
  20.    Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0  
  21.    Media.duration; //当前资源长度 流返回无限  
  22.    Media.paused; //是否暂停  
  23.    Media.defaultPlaybackRate = value;//默认的回放速度，可以设置  
  24.    Media.playbackRate = value;//当前播放速度，设置后马上改变  
  25.    Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文  
  26.    Media.seekable; //返回可以seek的区域 TimeRanges  
  27.    Media.ended; //是否结束  
  28. Media.autoPlay; //是否自动播放  
  29. Media.loop; //是否循环播放  
  30.    Media.play();    //播放  
  31.    Media.pause();   //暂停  
  32.   
  33. //控制  
  34. Media.controls;//是否有默认控制条  
  35.    Media.volume = value; //音量  
  36.    Media.muted = value; //静音  
  37.   
  38.    //TimeRanges(区域)对象  
  39. TimeRanges.length; //区域段数  
  40. TimeRanges.start(index) //第index段区域的开始位置  
  41. TimeRanges.end(index) //第index段区域的结束位置  

借鉴一下。

Tags: html5, video, audio

Javascript | 评论:0 | 阅读:23538

HTML5 <wbr> Tag

Submitted by gouki on 2012, February 1, 8:34 PM

一直不是做前端的料，所以看到wbr标签的时候，下意识的以为这个标签是br标签的代名词，所以想当然的认为这种标签是无效的。或者是其他人伪造的标签。
直到有一天google的时候才发现，原来wbr的意思居然是word-break的意思。即，主动将单词用wbr格开，这样，如果遇到一些超长单词的时候将单词切断。
The <wbr> tag is very useful but unfortunately too little known. I use it liberally in the great compatibility tables on my site.
比如这样的例子：

XML/HTML代码
  1. <div class="name">getElements<wbr>ByTagName()</div>  

当这个div宽度过小的时候，它就会按照getElements先断行，然后再显示ByTagName，这样的方式更易于浏览。

先记录一下

参考资料：

1、http://www.w3schools.com/html5/tag_wbr.asp

2、http://www.quirksmode.org/oddsandends/wbr.html#t01

Tags: wbr

Javascript | 评论:0 | 阅读:14833

CSS 中的黄金分割率

Submitted by gouki on 2011, December 20, 12:15 PM

这是一位叫 Christos Chiotis 的希腊 Web 设计师发表在 CssGlobe 的一篇文章，讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数，大约为 1.6180339887。黄金分割率用在 Web 设计中，可以为设计带来更多视觉上的和谐。

在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。

作者建议，在 Web 排版与布局中可以使用以下基本 CSS 设置

  • line-height = font-size * 1.62
  • paragraph margin = paragraph line-height * 1.62 / 2
  • header’s margin-top = headers line-height * 1.62

不过对中文而言，至少 font-size 和 line-height 之间使用黄金分割率是不适合的，假如中文字体使用 12px 的话，最佳行高是 22px，如果字体使用 14px 的话，行高应该使用 24px - 译者。

另一个例子，在表单中，输入框的宽度应该是标签文字的宽度乘以 1.62。而对于显示在 Web 上矩形来说，它的宽度应该是高度乘以 1.62。

这样一来，Web 设计师同时需要很好的计算能力，至少要在旁边放一台计算器，为了节省时间，作者建议在设计中随时记住一个 62/38 原则，在任何需要分割的地方，都使用 62% 和 38% 作比例。
对于需要分割成三份的场合，可以先按 62%，38%原则分成两份，再将那份大的按 62% 和 38% 的比例分割。

--------

上述文字来自于http://www.newsteng.com/html/2011/web-based_1220/69.html，因为自己不了解设计，所以备份一下。以后除了自己用还可以用来installB之类的

图片附件(缩略图):
大小: 28.8 K 尺寸: 500 x 161 浏览: 2490 次 点击打开新窗口浏览全图

图片附件(缩略图):
大小: 27.32 K 尺寸: 500 x 103 浏览: 2532 次 点击打开新窗口浏览全图

Tags: css, 黄金分割

Javascript | 评论:1 | 阅读:17444

备份：html5 canvas cheat sheet

Submitted by gouki on 2011, December 19, 10:57 PM

纯备份资料,HTML5的canvas资料
大小: 88.14 K 尺寸: 500 x 370 浏览: 2616 次 点击打开新窗口浏览全图

Tags: html5, canvas, cheat sheet

Javascript | 评论:0 | 阅读:18025

Records:305«‹12131415161718192021›»