一开始接触到promise的时候也是比较懵逼的,不太理解他们的奥秘在哪儿,以及我们为什么要使用它,随着深入的了解,觉得他很大程度了解决了我们之前的回调地域的问题,还有关于数据请求异步的方式,promise极大程度的解决了我们的代码多层嵌套难以阅读理解的问题。
接着入正题,现在我们要实现一个边框的划入效果。这个效果实现起来也是很容易的,css3基本上就能够实现了,这里我们不讨论css3.只讨论js的使用。下面贴代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 100px; height: 100px; background-color: red; margin: 100px; position: relative; } li { list-style: none; width: 100px; position: absolute; } .box ul li:first-child { left: -3px; bottom: -3px; width: 1px; height: 0px; background-color: black; } .box ul li:nth-child(2) { right: -3px; top: -3px; width: 1px; height: 0px; background-color: black; } .box ul li:nth-child(3) { left: -3px; top: -3px; width: 0px; height: 1px; background-color: black; } .box ul li:nth-child(4) { bottom: -3px; width: 0px; height: 1px; background-color: black; right: -3px; } </style> </head> <body> <div class="box"> <ul> <li class="box_left"></li> <li class="box_right"></li> <li class="box_top"></li> <li class="box_bottom"></li> </ul> </div> <script> function $_(name) { return document.querySelector(name); } function getStyle(obj, attr) { return getComputedStyle(obj)[attr]; } function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var bstop = true; for (var key in json) { var icur; if (key == "opacity") { icur = Math.round(getComputedStyle(obj)[key] * 100); } else { icur = parseInt(getComputedStyle(obj)[key]); } var speed = (parseInt(json[key]) - icur) / 6; if (speed !== 0) { bstop = false; } speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (key == "opacity") { obj.style[key] = (icur + speed) / 100; } else { obj.style[key] = icur + speed + "px"; } } if (bstop) { clearInterval(obj.timer); fn && fn() } }, 30) } animate($_(".box ul li:first-child"), { height: "106px" },function(){ animate($_(".box ul li:nth-child(3)"),{ width:"106px" },function(){ animate($_(".box ul li:nth-child(2)"),{ height:"106px" },function(){ animate($_(".box ul li:nth-child(4)"),{ width:"106px" }) }) }) }) </script> </body> </html>
效果演示如下