pc项目的优缺点_java项目自动部署工具「建议收藏」

1.button标签除了IE以外默认的type属性是submit的,做表单提交的时候一定要注意,最好每次书写的时候都加上type=”button”;

2.文本一行显示

    text-overflow:ellipsis;

    white-space:nowrap;

    overflow:hidden; 

3.文本在一定范围显示三行或者四行呢

    text-overflow:ellipsis;

    overflow:hidden;

    display:-webkit-box; 

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3; 

火狐浏览器不认换行解决方式:

给父级盒子(div)先设置
position: relativemargin: 1%; /*决定省略号在文本尾部的位置*/line-height: 2em;height: 4em; /*此处高度决定了显示几行*/overflow: hidden;text-overflow: ellipsis;给盒子(div)设置伪类:after

position:absolute;

right:0;bottom:0;

content:”…”;

padding:0 -40px 0 0;

4.jquery 控制button的disabled属性 

    配合在获取验证码的时候使用

   $(‘#button’).attr(‘disabled’,”true”);添加disabled属性 

   $(‘#button’).removeAttr(“disabled”); 移除disabled属性 

5.在input元素中使用 type=”file” 时，设置cursor：pointer，也就是想要实现鼠标经过时候，指针由“箭头”变为“手型”

在 IE 、Firefox 下测试，鼠标指针是可以变成手型的。 在Opera，谷歌测试下，鼠标指针还是箭头。

    查了一下资料，发现在input元素里面设置 font-size:0; 即可。

6、2个div，点击某个时回到顶部(经典的返回顶部功能实现)

    <div style=”height:1000px”>111111111111111</div> <div id=”top” >top</div> 

    <script type=”text/javascript”>

    $(function(){

      $(“#top”).click(function() {

          $(“html,body”).animate({scrollTop:0}, 500);

      })

     });

7.请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。

8.连写方法;

background-image:url(“1.jpg”),url(“2.jpg”),url(“3.jpg”);

background-repeat: no-repeat, no-repeat, no-repeat; 

background-position: 0 0, 100px 0, 200px 0; 

9.判断checkbox 是否选中  (is判断)

$(“#id”).is(“:checked”);//选中，返回true，没选中，返回false  

设置checkbox为选中状态 

$(“#id”).prop(“checked”,true);  

设置checkbox为不选中状态 

$(“#id”).prop(“checked”,false); 

10.让input或者textarea只显示内容,不能被操作  只需要在标签中添加readyonly就可以设置为只读(适用于条款说明之类的情况);

11.一般在判断登录后返回上一页的功能实现

window.history.go(-1)和window.history.back(不加-1)都可以实现返回上一页,不同的是前者会对页面进行刷新,后者只是相当于浏览器后退功能.      但是在浏览器还是有部分内容没有刷新的情况 比如说登录状态 在返回以后并没有改变 还需要F5一下才会改变 这个时候前两者都不好使了 需要  window.location.href=document.referrer;这个可以获取上一个页面的url,登录重新登录一下上一次页面,好了 一切OK;

附带几个别的功能 window.location.reload()  刷新页面    window.history.go(1)  前进到下一个页面  .

12.有时候在做一些弹窗或者是验证,要弹出遮罩  居中的问题  也就是设置了 fixed属性 居中的问题 css样式设置为{
position:fixed;left:0;right:0;margin:0 auto;}

13.对placeholder样式进行设置:

input::-webkit-input-placeholder{color:#aaa;font-size:2em;}

14.使用定位的方法实现居中操作(尤其是对于div来说),{left:50%;top:50%;-webkit-transform:translate(-50% -50%);transform:translate(-50% -50%);}

15.回车登录小功能实现

document.onkeydown = function(e){

if(!e) e = window.event;

if((e.keyCode || e.which) == 13){

document.getElementById(“login”).click();//默认点击一下

}

}

16.对象长度的获取使用Object.keys来获取

var obj = {“type”:1,”label”:”颜色”,”value”,”橙色”};

var arr = Object.keys(obj);  //将对象中的key值变成数组中的每一项;

var len = arr.length;  //数组的长度就是对象的长度;

17.对于select框动态加载的option 添加事件处理逻辑  可以给select添加方法 select.on(“change”,function({ 处理逻辑}))

18.jquery操作拼接字符串到table时 加在开头还是末尾 

append() – 在被选元素的结尾插入内容

prepend() – 在被选元素的开头插入内容

after() – 在被选元素之后插入内容

before() – 在被选元素之前插入内容

19.类似模态框遮罩层实现

底层遮罩div设置固定定位position:fixed;left:0;right:0;top:0;bottom:0;width:100%;height:100%

遮罩层中写要展示的内容 宽高大小, 防止页面中其他浮窗层级较高 可以设置z-index稍大一些

20.去掉select默认边框和小三角

select{

border:0;

display:block;

white-space:nowrap;

overflow:hidden;

background:transparent;

appearance:none;//去掉小三角

-moz-appearance:none;

-webkit-appearance:none;

}

21.l两个div设置了display：inline-blobk;内容对不齐的问题：

      1>给两个div设置浮动 左浮动 右浮动

      2>设置vertical-align:top;垂直顶部对其

      3>设置display:inline-table;

22.pc 移动端实现拨号功能

  写一个a标签     <a href=”tel:手机号”</a> 

23.个人中心 头像显示 不想压缩图片 可以设置背景图  使用cover来设置

自己vue中的代码

<div v-else id="ptt" style="width:50px;height:50px;border-radius:50%;" :style="{'background':'url('+'http://jingyou.nyjianzhan.com'+init.avatar+') no-repeat center center / cover'}"></div>

23.a标签实现下载功能

直接使用<a href=”文件路径”></a>  但是当下载图片 jpg,png,gif或者.txt文件时 需要<a href=”文件名” download=”可加文件名也可不加”></a>

24. 文本中敲击多个空格只显示一个如何解决?

<p>yihang           zi</p>可以设置样式 white-space:pre-wrap;可以完美解决

25.table手写表格边框留缝如何解决?

给table元素设置 cellspacing=”0″   cellpadding=”0″  就可以完美解决了

26.动态创建a标签,并实现下载功能

      let url = '';
      let doma = document.createElement("a");
      doma.style.target = '_blank';
      doma.href = url;
      doma.setAttribute('id', 'newa');
      if(document.getElementById('newa')) {
        document.body.removeChild(document.getElementById('newa'));
      }
      document.body.appendChild(doma)
      doma.click();

27.echarts图改变柱状图 数据展示效果

{  // series  中
  name: '9999',
  type: 'bar',
  label: {  // 柱状图返回样式
    normal: {
      formatter: function (a) {
        if (a.value === 0) {
          return '--'
        }
      }
    }
  },
  data: data,
  barWidth: 'auto',
  itemStyle: {
    normal: {
      label: {
        show: true, // 柱状图上数字
        position: 'top',
        textStyle: { // 数值样式
          color: '#fff',
          fontSize: 12
        }
      }
    }
  },
  barGap: '0'
}

28、页面通过iframe

嵌套的方式传参 代码转义问题（如'{}\[ ]’等）

传参时：通过 encodeURIComponent(JSON.stringify(obj))

        obj可以是json或者数组

        

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： – _ . ! ~ * ‘ ( ) 。

其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

iframe页面接收参数时：JSON.parse((decodeURIComponent(this.GetUrlParam(“obj”))))

        decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

29、遍历对象的key和value 组成新的json对象；

var tempArr = new Array()
for (const [key, value] of Object.entries(this.tempObj)) {
    let obj = {
      name: key,
      value: value,
      cate: 1
     }
    tempArr.push(obj)
 }

30、js锚点跳转；

document.getElementById('锚点id').scrollIntoView()

31、字符串格式数据转换成数组；

var arr = "[[\"288302015279272710\",\"288323442518791237\",\"288324022947550277\"]]"
// eval方法可转换

let newArr = eval('(' + arr + ')')

// vue 点击事件新页面打开
const { href } = this.$router.resolve({ path: `${url}`, query: { code: code } })
window.open(href,'_blank')

32、json获取符合某个条件的子项；

let array = [{sort:1,a:1},{sort:2,a:2},{sort:3,a:3}]
let max = Math.max.apply(Math,array.map(o=>{return o.sort}))
let min = Math.min.apply(Math,array.map(o=>{return o.sort}))
let lastRoute = array.filter(o=>o.sort == max)
// console.log(lastRoute) // [{sort:3,a:3}]

33、ES6取数组和、取数组最大值；

var data = [1,2,3,4,5,6]
// 1.数组求和 
let num = data.reduce((a,b)=>Number(a)+Number(b))   
// 2.数组求你最大值
let max = data.reduce((a,b)=>{return a=Number(a)>Number(b)?a:b})

34、vue页面监听滚动高度；

mounted() {
   window.addEventListener('scroll',this.scrollTop,true)
},
methods:{
    scrollTop(e){ // 监听滚动高度 悬浮导航栏
        this.$nextTick(()=>{
          var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop;
          if(top>395){
            this.isScroll = true
          }else if(top<375){
            this.isScroll = false
          }
        })
      }
}

34、reduce JSON数组求和；

let JSON = [{qty:1},{qty:2},{qty:13}]
let num = JSON.reduce((a,b)=>a+b.qty,0) // 注意前后数据取值方式a + b.qty ,后边为初始值0（也可以格式化数字类型）
// num = 16

 35、js获取特定字符的索引，截取特定长度

var str = 'GD-23050014-6'
undefined
str.slice(0,str.indexOf('-')+1)
'GD-'
str.lastIndexOf('-') // 倒序获取特定字符 索引
11
str.indexOf('-')
2
str.indexOf('-',str.indexOf('-')+1)  // 正序获取特定字符 索引
11
str.slice(0,11)
'GD-23050014'

今天的文章pc项目的优缺点_java项目自动部署工具「建议收藏」分享到此就结束了，感谢您的阅读。