参考了18055975947，没有用jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.outer {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
margin: 100px auto;
}
.innerBox {
position: absolute;
width: 9999em;
height: 200px;
/* background-color: red; */
}
.inner {
/* position: absolute; */
float: left;
width: 400px;
height: 200px;
font-size:25px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="outer">
<div class="innerBox">
<div class="inner" style="background-color: aqua;">1</div>
<div class="inner" style="background-color: aquamarine;">2</div>
<div class="inner" style="background-color: beige;">3</div>
<div class="inner" style="background-color: red;">4</div>
<div class="inner" style="background-color: blanchedalmond;">5</div>
</div>
</div>
<script>
var count = 0;
var inner = document.getElementsByClassName("inner");
var timer = null;
var innerBox = document.getElementsByClassName("innerBox")[0];
function move() {
innerBox.style.transition = '2s'
innerBox.style.left = -400 * count +'px'
timer = setInterval(function (times) {
count++;
if (count > 4) {
count = 0;
inner[4].style.position = "absolute"
inner[4].style.left = '-400px'
inner[4].style.transition = '2s'
innerBox.style.left = "0px"
innerBox.style.transition = 'none'
} else {
inner[4].style.position = "relative"
inner[4].style.left = "0px"
// inner[0].style.left = "0px"
innerBox.style.transition = '2s'
innerBox.style.left = -400 * count +'px'
}
}, 2000)
}
move()
</script>
</body>
</html>
首先，加密的目的，简而言之就是将明文转换为密文、甚至转换为其他的东西，用来隐藏明文内容本身，防止其他人直接获取到敏感明文信息、或者提高其他人获取到明文信息的难度。
通常我们提到加密会想到密码加密、HTTPS 等关键词，这里从场景和方法分别提一些我的个人见解。场景-密码传输
前端密码传输过程中如果不加密，在日志中就可以拿到用户的明文密码，对用户安全不太负责。
这种加密其实相对比较简单，可以使用 PlanA-前端加密、后端解密后计算密码字符串的MD5/MD6存入数据库；也可以 PlanB-直接前端使用一种稳定算法加密成唯一值、后端直接将加密结果进行MD5/MD6，全程密码明文不出现在程序中。PlanA
使用 Base64 / Unicode+1 等方式加密成非明文，后端解开之后再存它的 MD5/MD6 。PlanB
直接使用 MD5/MD6 之类的方式取 Hash ，让后端存 Hash 的 Hash 。场景-数据包加密
应该大家有遇到过：打开一个正经网站，网站底下蹦出个不正经广告——比如X通的流量浮层，X信的插入式广告……（我没有针对谁）
但是这几年，我们会发现这种广告逐渐变少了，其原因就是大家都开始采用 HTTPS 了。
被人插入这种广告的方法其实很好理解：你的网页数据包被抓取->在数据包到达你手机之前被篡改->你得到了带网页广告的数据包->渲染到你手机屏幕。
而 HTTPS 进行了包加密，就解决了这个问题。严格来说我认为从手段上来看，它不算是一种前端加密场景；但是从解决问题的角度来看，这确实是前端需要知道的事情。Plan
全面采用 HTTPS场景-展示成果加密
经常有人开发网页爬虫爬取大家辛辛苦苦一点一点发布的数据成果，有些会影响你的竞争力，有些会降低你的知名度，甚至有些出于恶意爬取你的公开数据后进行全量公开……比如有些食谱网站被爬掉所有食谱，站点被克隆；有些求职网站被爬掉所有职位，被拿去卖信息；甚至有些小说漫画网站赖以生存的内容也很容易被爬取。
Plan
将文本内容进行展示层加密，利用字体的引用特点，把拿给爬虫的数据变成“乱码”。
举个栗子：正常来讲，当我们拥有一串数字“12345”并将其放在网站页面上的时候，其实网站页面上显示的并不是简单的数字，而是数字对应的字体的“12345”。这时我们打乱一下字体中图形和字码的对应关系，比如我们搞成这样：图形：1 2 3 4 5
字码：2 3 1 5 4这时，如果你想让用户看到“12345”，你在页面中渲染的数字就应该是“23154”。这种手段也可以算作一种加密。
具体的实现方法可以看一下《Web 端反爬虫技术方案》。参考
HTTPS 到底加密了什么？
Web 端反爬虫技术方案
可以说的秘密-那些我们该讨论的前端加密方法
前端加密那点事
关于反爬虫，看这一篇就够了
前端进行密码传输最好也使用不可逆加密
30s多一点
调用wait函数时加上了await修饰符，导致主流程的执行必须要等待wait函数执行完才会陆续执行后续函数，相当于 await wait() => promise -> wait() -> resolve()。
但是wait函数本身又写了一个promise，整个promise会setTimeout才resolve，相当于本身wait函数 => promise -> setTimeout(resolve)。
那么整个串起来，流程有点类似下面这样子，promise的嵌套，只有等内部wait函数的promise -> resolve之后，才会将外部的promise -> resolve掉。然后再去执行下一个wait函数。main -> wait -> promise -> (promise -> setTimeout(resolve))(resolve)
为啥要30s多一点，额，写入微任务队列，微任务队列里再写入任务队列，都是需要时间。
- 共 1 页
- 1
为啥不会重新解析a啊
第 53 题：输出以下代码的执行结果并解释为什么