随身笔记

作者： admin

  • jquery tip提示

    文案提示 气泡 提示

    https://sdeno.com/wp-content/uploads/2020/09/jquery.tip.js

     

    css:

    .tip-wrap {
    position: absolute;
    display: none;
}

.tip-arr-a, .tip-arr-b {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border-style: dashed;
    border-color: transparent;
}
.tip-wrap{
    font-size: 0.6rem;
    line-height: 1rem;
}

     

    <div class="why why3" data-tip-msg="1、每天至少完成一星挑战才算完成当日挑战；<br>2、每天挑战成功最高星级，即为当日的星级；<br>3、连续6天完成当日挑战，可额外获得3颗星；" >
</div>

$('.why3').tips({
 dire:11
});

     

     

  • jquery 滑块 刻度条

    样式：

    .pubr{width: 15%;height: 100%;}
.inputcen{width: 70%;height: 100%;position: relative;}
.inputcen input{display: block;width: 100%;position: absolute;z-index: 2;height: 100%;opacity: 0;}
.lr{background: red;}
.rr{background: red;}
.inputC{display: flex;justify-content: space-between;align-items: center;height: 50px;border: 1px solid #ccc;width:228px;}
.wrap-load{background: #cccccc;height: 100%;position: absolute;top:0px;width: 100%;}
.inner-load{background: pink;height: 100%;position: relative;display: flex;justify-content: center;align-items: center;}
.loadb{height: 10px;width: 10px;background: #000;position: absolute;right: -5px;}

     

    html：

    <div id="num" style="position: absolute;left: 0px;top:0px;"></div>
<div class="inputC">
     <div class="pubr lr">-</div>
     <div class="inputcen">

         <div style="width: 80%;margin: 0 auto;position: relative;height: 100%;">
             <input class="inputload" type="range" min="1" max="30" step="1" value="1">
             <div class="wrap-load">
                 <div class="inner-load">
                     <div class="loadb"></div>
                 </div>
             </div>
         </div>

     </div>
     <div class="pubr rr">+</div>
</div>

     

    js：

    $(function () {
    var $input=$('input.inputload');
    var inputMax=$input[0].max;
    $input.val(1)

    $('.inner-load').css({width:($input.val()/inputMax*100)+'%'})
    $input.on('input',function (e) {
         $('#num').text( $(this).val() );
        $('.inner-load').css({width:($(this).val()/inputMax*100)+'%'})
    });


    $('.pubr.lr').click(function () {
        var getnum=$input.val()

        $input.val(--getnum)
        $('.inner-load').css({width:($input.val()/inputMax*100)+'%'})
        $('#num').text( $input.val() );

    });
    $('.pubr.rr').click(function () {
        var getnum=$input.val()

        $input.val(++getnum)
        $('.inner-load').css({width:($input.val()/inputMax*100)+'%'})
        $('#num').text( $input.val() );
    });

});

     

     

  • Linux核心技能与应用 12章完整版

    https://www.52itjc.com/thread-411-1-1.html

  • 组装电脑|装机

    1，主板 机箱 接线(最难)

    有些机箱提供的线有白色，就是负极，例如：

     

    或者有些背面标记有三角，就是正极，例如：

    机箱都会说明书的，最好也拿来对照下最保险

     

    下面是主板的阵脚，其中机箱灯有两种。如果机箱提供两个孔或者独立孔就插左上那边，提供可容纳3个孔的就插右下，很容易辨认。

     

     

     

    剩下就简单了，对应阵脚插就行

     

     

    2，cpu散热插口

     

     

    2，主要供电接口介绍

    电源基本是为以下设备供电：
    1，cpu
    2，主板
    3，显卡
    4，硬盘

    （1）cpu（cpu基本8pin的居多）

     

    （2）主板，都是24pin，很容易识别

     

    （3）显卡

     

    再来看看电源线

     

  • 常用汇总

     

    //冒泡排序，数字排序

    function bubbleSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j+1]) { //相邻元素两两对比
        var temp = arr[j+1]; //元素交换
        arr[j+1] = arr[j];
        arr[j] = temp;
      }
    }
  }
  return arr;
}
bubbleSort([-1,2,0,-3,5])
//[-3, -1, 0, 2, 5]

     

    //数组，整数去重

    let unique = function(arr) {
  let hashTable = {};
  let data = [];
  for(let i=0,l=arr.length;i<l;i++) {
    if(!hashTable[arr[i]]) {
      hashTable[arr[i]] = true;
      data.push(arr[i]);
    }
  }
  return data
}
unique([1,2,4,4,-1,-2,-1])