js常用工具方法

最新推荐文章于 2024-04-24 15:49:36 发布

互联网热心网友

最新推荐文章于 2024-04-24 15:49:36 发布

阅读量74

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_44105087/article/details/110251130

版权

// 限制输入框 只能输入数字和小数
this.listQuery.maxPer = this.listQuery.maxPer.replace(/[^\d.]/g,'')
// 限制输入框最大值为 50
if (this.listQuery.maxPer > 50) {
	this.listQuery.maxPer = 50
}


/*限制输入框 只能输入数字*/
this.listQuery.maxPer = this.listQuery.maxPer.replace(/[^0-9]/g,'')
      
      
    // 排序 方法
      toSort(property,desc) {
      	return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        if(desc==true){
          // 升序排列
          return value1 - value2;
        }else{
          // 降序排列
          return value2 - value1;
        }
      }
    },
// 排序调用 
this.newAppItem1.sort(this.toSort("socre", false))


// created 同级 filters过滤器 如果字符串大于7截取用省略替代截取的部分
  filters: {
      ellipsis(value) {
        if (!value) return ''
        if (value.length > 7) {
          return value.slice(0, 7) + '...'
        }
        return value
      }
    },
    // 引用 
    {{item.name | ellipsis}}

<!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>

互联网热心网友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js常用工具方法

// 限制输入框只能输入数字和小数this.listQuery.maxPer = this.listQuery.maxPer.replace(/[^\d.]/g,'')// 限制输入框最大值为 50if (this.listQuery.maxPer > 50) { this.listQuery.maxPer = 50}/*限制输入框只能输入数字*/this.listQuery.maxPer = this.listQuery.maxPer.replace(/[^0-9]/g,'')
复制链接

扫一扫