1.项目需求 手写一个时间轴，也可以当进度条用。
2.过程中遇到的问题是 边界值0 100%的处理。解决方法是 通过外层容器 把线条与圆点分离开，并延长线条，达到处理边界的效果。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> 7 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> 8 <title></title> 9 <style> 10 .timeline_box { 11 width: 100%; 12 height: 8rem; 13 /*position: relative;*/ 14 } 15 16 .timeline_container { 17 height: 5.6rem; 18 border: 1px solid transparent; 19 } 20 21 .btn-shadow { 22 -moz-box-shadow: 0px 0px 6px #20A0FF; 23 -webkit-box-shadow: 0px 0px 6px #20A0FF; 24 box-shadow: 0px 0px 6px #20A0FF; 25 } 26 /*线条*/ 27 28 .timeline_inner { 29 display: block; 30 width: 60%; 31 height: 0rem; 32 border: 1px solid transparent; 33 margin: 3.5rem auto 0; 34 position: relative; 35 } 36 37 .timeline { 38 /*height: 1px; 39 background-color: #20A0FF; 40 margin: 1.5rem auto; 41 overflow: visible;*/ 42 position: relative; 43 } 44 45 .lines { 46 height: 1px; 47 background-color: #20A0FF; 48 margin: 0rem auto; 49 overflow: visible; 50 position: absolute; 51 width: calc(100% + 5px); 52 } 53 54 .timeline .dot { 55 position: absolute; 56 top: -4px; 57 left: 0; 58 width: 8px; 59 height: 8px; 60 border-radius: 50%; 61 background-color: #20A0FF; 62 } 63 64 .timeline .dot.right { 65 right: -10px; 66 left: auto; 67 } 68 69 .timeline .curdot { 70 position: absolute; 71 left: 50%; 72 top: -7px; 73 width: 14px; 74 height: 14px; 75 background-color: #FFF; 76 border-radius: 50%; 77 border: 1px solid #20A0FF; 78 } 79 80 .timeline .curdot>.dot { 81 display: block; 82 margin: 3px; 83 position: initial; 84 } 85 /*百分比*/ 86 87 .timeline .dot .period { 88 font-size: 11px; 89 color: #666666; 90 white-space: nowrap; 91 width: auto; 92 -moz-transform: translate(-50%, 100%); 93 -ms-transform: translate(-50%, 100%); 94 -webkit-transform: translate(-50%, 100%); 95 -o-transform: translate(-50%, 100%); 96 transform: translate(-50%, 100%); 97 position: absolute; 98 top: -3px; 99 left: 50%; 100 } 101 /*提示信息*/ 102 103 .cur_tip { 104 position: absolute; 105 /*border: 1px solid red;*/ 106 white-space: nowrap; 107 background-color: #20A0FF; 108 color: #FFF; 109 font-size: 13px; 110 padding: 4px 6px 2px 6px; 111 width: auto; 112 top: -10px; 113 overflow: visible; 114 border-radius: 2px; 115 transform: translate(-50%, -100%); 116 -webkit-transform: translate(-50%, -100%); 117 -moz-transform: translate(-50%, -100%); 118 -o-transform: translate(-50%, -100%); 119 -ms-transform: translate(-50%, -100%); 120 } 121 122 .cur_tip i.arrow { 123 display: block; 124 -webkit-transform: rotate(-45deg); 125 -moz-transform: rotate(-45deg); 126 -ms-transform: rotate(-45deg); 127 -o-transform: rotate(-45deg); 128 transform: rotate(-45deg); 129 border-color: #20A0FF; 130 position: absolute; 131 /*bottom: -10px;*/ 132 left: 55%; 133 top: 91%; 134 z-index: -2; 135 background-color: #20A0FF; 136 } 137 138 .arrow { 139 width: 0.4rem; 140 height: 0.4rem; 141 position: absolute; 142 top: 50%; 143 right: 0.25rem; 144 margin-top: -0.2rem; 145 background: transparent; 146 border: 1px solid #666; 147 border-top: none; 148 border-right: none; 149 z-index: 2; 150 -webkit-border-radius: 0; 151 border-radius: 0; 152 -webkit-transform: rotate(-45deg); 153 -moz-transform: rotate(-45deg); 154 -ms-transform: rotate(-45deg); 155 -o-transform: rotate(-45deg); 156 transform: rotate(-45deg); 157 } 158 </style> 159 </head> 160 161 <body > 162 <div class="timeline_box "> 163 <div class="timeline_container"> 164 <div class="timeline_inner"> 165 <div class="timeline"> 166 <div class="lines"></div> 167 <span class="dot"> 168 <span class="period">0</span> 169 </span> 170 <span class="dot right"> 171 <span class="period">100</span> 172 </span> 173 <!--当前百分比 --> 174 <span class="curdot" style="left:50%"> 175 <i class="dot"></i> 176 <div class="cur_tip"> 177 当前进度 <span id="percent" >50%</span> 178 <i class="arrow"></i> 179 </div> 180 </span> 181 </div> 182 </div> 183 </div> 184 </div> 185 186 <div clas="set" style="margin: 20px auto;text-align: center;"> 187 设置进度 188 <input type="number" name="num" id="num" value="50" max="100" min="0" /> 189 </div> 190 <script> 191 var s = document.getElementById("num"); 192 var ele = document.querySelector(".curdot"); 193 var per = document.querySelector("#percent"); 194 s.addEventListener("change", function() { 195 ele.style.left = num.value + "%"; 196 per.innerHTML = num.value + "%" 197 }) 198 </script> 199 </body> 200 201 </html>