/背景知识/
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
/实际应用：截取字符串多出来并用省略号[...]显示/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 截取字符串多出来并用省略号...显示</title>
<style type="text/css">
.content{
width: 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>
时间： 2024-10-10 15:13:12