zoukankan      html  css  js  c++  java
  • Javascript: 截取字符串多出来并用省略号[...]显示

    /背景知识/

    substring 方法用于提取字符串中介于两个指定下标之间的字符

    substring(start,end)

    开始和结束的位置,从零开始的索引

    参数描述

    start 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
    stop 可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

    返回值

    一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start。

    说明

    substring 方法返回的子串包括 start 处的字符,但不包括 end 处的字符。


    如果 start 与 end 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。


    如果 start 比 end 大,那么该方法在提取子串之前会先交换这两个参数。

    如果 start 或 end 为负数,那么它将被替换为 0

    /实际应用:截取字符串多出来并用省略号[...]显示/

    在线演示:http://codepen.io/anon/pen/yNXyMX

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>js 截取字符串多出来并用省略号...显示</title>
    	<style type="text/css">
    	.content{
    		 200px;
    	        margin: 100px auto;
    		padding: 15px;
    		background-color: orange;
    		color: #fff;
    	}
    
    	.btn {
    	  float: right;
    	  background-color: #fff;
    	  color: #333;
    	  font-size: 12px;
    	  padding: 4px 8px;
    	  border-radius: 3px;
    	  margin-top: 5px;
    	  text-shadow: 0 0 1px rgba(0,0,0,.25);
    	  box-shadow: 0 0 1px rgba(0,0,0,.25);
         }
    
    .move{
    	 -webkit-transition:all ease-in-out .35s;
    	 transition:all ease-in-out .35s;
    	 -webkit-animation:showIn 1.4s cubic-bezier(0, 0, 0.2, 1);
             animation:showIn 1.4s cubic-bezier(0, 0, 0.2, 1);
             -webkit-animation-fill-mode: backwards;
             -moz-animation-fill-mode: backwards;
             -o-animation-fill-mode: backwards;
              animation-fill-mode: backwards;
         }
    
    
    @keyframes showIn{
        0%{ opacity: .5;}
        60%{transform: scale(1.2);}
        100% { -o-transform: scale(1.0);opacity: 1.0;}
        }
    
    @-webkit-keyframes showIn{
        0%{ opacity: .5;height: 20%;}
        60%{-webkit-transform: scale(1.2);}
        100% { -webkit-transform: scale(1.0);opacity: 1.0;}
       }
    	</style>
    </head>
    <body>
    <div class="content">
     <span>
    substring 方法用于提取字符串中介于两个指定下标之间的字符
    
    substring(start,end)
    
    开始和结束的位置,从零开始的索引
    substring 方法返回的子串包括 start 处的字符,但不包括 end 处的字符。
    如果 start 与 end 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。
    如果 start 比 end 大,那么该方法在提取子串之前会先交换这两个参数。
    如果 start 或 end 为负数,那么它将被替换为 0
    
    
    </span><span class="btn">收缩</span>
    
    </div>
    
    <script type="text/javascript">
    	var oDiv=document.getElementsByTagName('div')[0];
    	var arr_span=document.getElementsByTagName('span');
            var str=arr_span[0].innerHTML;
    	var onOff=true;
           arr_span[1].onclick=function(){
        	if(onOff){
            arr_span[0].innerHTML=str.substring(0,43)+'...';
        	arr_span[1].innerHTML='展开';
    
        	oDiv.classList.add('move');
        	onOff=false;
        	}else{
        	arr_span[0].innerHTML=str;
        	arr_span[1].innerHTML='收缩';
    
        	oDiv.classList.remove('move');
        	onOff=true;
        	}
      
        }
    </script>	
    </body>
    </html>
    

      

  • 相关阅读:
    [转]asp.net页面缓存技术
    UL和LI在div中的高度的IE6下兼容性
    jquery制作的横向图片滚动带横向滚动条TackerScroll
    电脑可以上网,但是qq登陆不上去?
    Introduction to discrete event system学习笔记4.6
    Introduction to Discrete event system学习笔记4.9
    Introduction to discrete event systemsstudy 4.5
    Symbolic synthesis of obserability requirements for diagnosability B.Bittner,M.Bozzano,A.Cimatti,and X.Olive笔记4.16
    Introduction to discrete event system学习笔记4.8pm
    Introduction to discrete event system学习笔记 4.8
  • 原文地址:https://www.cnblogs.com/kevinCoder/p/4565774.html
Copyright © 2011-2022 走看看