手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆

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

首页 > Javascript >

一段未优化过的无聊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
浏览: 529 次
点击打开新窗口浏览全图




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):