一、手写算法


https://leetcode-cn.com/problems/rotate-list/

思路

  • 找到移动的位数k%len（len为链表长度）
  • 标记头节点、尾结点

  • 以k为中心，分为两半，k的下一个节点为新的头节点，k的指针为null，原链表尾结点指向原头节点

    代码

    1. /**
    2. * Definition for singly-linked list.
    3. * function ListNode(val, next) {
    4. *     this.val = (val===undefined ? 0 : val)
    5. *     this.next = (next===undefined ? null : next)
    6. * }
    7. */
    8. /**
    9. * @param {ListNode} head
    10. * @param {number} k
    11. * @return {ListNode}
    12. */
    13. var rotateRight = function(head, k) {
    14.   if(!head || !k){
    15.       return head;
    16.   }
    17.   var len = 1;
    18.   var current = head;
    19.   var tail = current;
    20.   while(current.next){
    21.       current = current.next;
    22.       tail = current
    23.       len++;
    24.   }
    25.   var c = k % len;// 移动位置
    26.   var curentLen = len - c; // 前n个元素的
    27.   while(curentLen === len){
    28.       return head;
    29.   }
    30.    var p = head; // 头节点
    31.   for(var i =0;i<=curentLen-1;i++){
    32.       if(i == curentLen - 1){ // 前n个元素的最后一个元素开始指向null,
    33.           tail.next = head; // 原尾结点指向原头节点
    34.           head = p.next;// 现头节点指向移动位置开始的节点
    35.           p.next = null;// 前n个元素最后一个元素指向null
    36.       }
    37.       p = p.next; //找下一个节点
    38.   }
    39.  return head;
    40. };

    复杂度分析

  • 时间复杂度：O(N)

  • 空间复杂度：O(N)

二、编程题

  1. // 手写题：请用你全部能展现能力的纯CSS+Vue3代码实现该设计稿件（注：loading条根据初始化数据动态展现，且需完成动画部分同时请注意边框细节）
  1.  <div class="container">
  2.         <div class="line"></div>
  3.         <div class="nav">
  4.             <div class="item active">选项卡1</div>
  5.             <div class="item">选项卡2</div>
  6.         </div>
  7.         <div class="content nav">
  8.             <div class="sub">
  9.                 <div class="pr progress1"></div>
  10.                 <div class="pr progress2"></div>
  11.                 <div class="pr progress3"></div>
  12.             </div>
  14.         </div>
  15.     </div>
.container {
  padding: 100px;
  position: relative;
}
.content {
  background: #22222e;
  width: 960px;
  height: 649px;
  margin: 0px auto;
  border-radius: 0 15px 15px;
  -webkit-border-radius: 0 15px 15px;
  -moz-border-radius: 0 15px 15px;
  -ms-border-radius: 0 15px 15px;
  -o-border-radius: 0 15px 15px;
  background: linear-gradient(rgba(148, 88, 255, 1) 0%, #22222e 20%);
  box-shadow: 0 -2px 0px 0px #b04dff;
}
.sub {
  box-sizing: border-box;
  border-top-right-radius: 15px;
  flex-grow: 1;
  width: 956px;
  background-color: #22222e;
  padding: 75px;
  margin: 0 auto;
}

.pr {
  background: linear-gradient(to right, #385df2 0%, #c815ff 100%);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  margin-bottom: 82px;
}

.progress1 {
  width: 261px;
  height: 10px;
}
.progress2 {
  width: 669px;
  height: 10px;
}
.progress3 {
  width: 387px;
  height: 10px;
}
.nav {
  width: 960px;
  margin: 0 auto;
}

.nav > .item {
  position: relative;
  display: inline-block;
  padding: 0.3em 1em 0;
  color: #fff;
  width: 230px;
  text-align: center;
  height: 62px;
  line-height: 62px;
  box-sizing: border-box;
}
.nav > .item::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  background: #22222e;
  border-radius: 1.5em 1em 0 0;
  box-shadow: 0 0.04em #b04dff inset;
  transform: perspective(1em) rotateX(1.7deg);
  transform-origin: left;
}
.nav > .item.active {
  color: #c815ff;
}
.nav > .item.active::before {
  border: 2px solid #c815ff;
  border-bottom: none;
  z-index: -1;
}
.line {
  position: absolute;
  height: 2px;
  background: #22222e;
  width: 239px;
  top: 160px;
  left: 226.5px;
}