[散修弟子]PM-1748|2019年03月10日的日报-技能树.IT修真院

发表于： 2019-03-10 21:30:35

1 717

今天完成的事情：

1、因为今天请假出去办了点事情，所以进度方面没有太多的提升，不过也写了一些demo和简单的任务布局。

2、今天看了关于洗牌算法的文章和视频，学到了很多之前不了解的东西。

以下是今天完成的HTML和css代码成果图：

<!DOCTYPE HTML>
<html>
<head>
    <title>法官查看</title>
    <link rel="stylesheet" type="text/css" href="../css/js2.4.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/public.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>
<header>
    <i class="i-1"></i>
    <p class="tc title">法官日记</p>
    <i class="i-2"></i>
</header>
<div class="main">

    <div class="btn">
        <button id="next">开始游戏</button>
    </div>
</div>

<script src="../js/js2.4.js"></script>

</body>
</html>

* {
    max-width: 720px;
    margin: 0 auto; }

header {
    background-color: #29bde0;
    position: relative;
    padding: 1rem;
    border-bottom: 1px solid white; }
header i {
    display: inline-block;
    transform: scale(0.6, 0.6);
    width: 70px;
    height: 70px;
    position: absolute; }
header .i-1 {
    background-image: url(../images/js2-3_1.png);
    left: .5rem;
    top: -.2rem; }
header .i-2 {
    background-image: url(../images/js2-3_2.png);
    right: .5rem;
    top: -.3rem; }
header p {
    font-size: 1.6rem;
    color: white; }

.main {
    background-color: #29bde0;
    width: 100%;
    position: relative;
    min-height: 683.4px; }
.main .box {
    width: 125px;
    height: 125px;
    background-image: url(../images/js2-4_1.png);
    display: inline-block;
    margin: 2% 7.5%;
    border: 2px solid white;
    transform: scale(0.8, 0.8); }
.main .box p {
    position: absolute;
    font-size: 1.4rem;
    margin-left: 1.2rem;
    bottom: 0rem;
    color: white; }
.main .box-killer {
    width: 125px;
    height: 125px;
    background-image: url(../images/js2-4_2.jpg);
    display: inline-block;
    margin: 2% 7.5%;
    border: 2px solid white;
    transform: scale(0.8, 0.8); }
.main .box-killer p {
    position: absolute;
    font-size: 1.4rem;
    margin-left: 1.2rem;
    bottom: 0rem;
    color: black; }
.main .btn {
    position: absolute;
    bottom: 0;
    width: 60%;
    margin-left: 20%; }
.main .btn button {
    background-color: #fbb435;
    font-size: 1.7rem;
    width: 100%;
    padding: 1rem 2rem;
    color: white;
    margin-bottom: 1rem;
    border: none; }

/*# sourceMappingURL=js2-4.css.map */

明天计划的事情：

1、明天的主要计划就是提高任务进度，快点完成人2-4。

2、感觉最近有点图速度而有很多东西学的并不精，明天需要回过头来仔细巩固一下。

遇到的问题：

1、今天没有遇到什么实质性的问题，有问题也都找师哥帮忙解答了。

收获：

‍‍今天学习了洗牌算法，洗牌算法，顾名思义，它的产生是用来解决类似洗牌这种场景的问题的，目的是产生一串等概率的随机列，使得很难去预测牌的顺序，洗牌算法是我们常见的随机问题，在玩游戏，随机排序时经常用到。同时它也是一道经典的面试题。那么，‍‍何为洗牌算法呢？其实简单来说就是‍‍一个1到n的序列，随机打乱，保证每个数出现在任意一个位置的概率相同。那么‍‍有哪些实现洗牌的算法呢？今天学习了一种：一般化算法，‍‍假如要洗牌，那么最随机的做法无疑是从牌堆里随便抽一张出来，然后放在一边，之后从剩下的牌里重复之前的操作，直到所有牌都被抽出来放到了另一堆中。抽象到代码世界，按相同的做法，就是随机从数组里取出一个元素，保存到另一个数组，然后重复之，直到原数组中所有元素都处理掉。‍‍‍‍‍‍

不过这种方法也有缺点，那就是‍‍即使一个序号上的元素已经被处理过了，由于随机函数产生的数是随机的，所有这个被处理过的元素序号可能在之后的循环中不断出现。‍‍

改进方法就是‍‍处理完一个元素后，我们用Array的splice()方法将其从目标数组中移除同时也更新了目标数组的长度，如此一来下次遍历的时候是从新的长度开始，不会重复处理的情况了。‍‍

还有

‍‍缺点：因为调用splice来删除数组元素会导致删除位置之后的所有元素要做shift操作来向前补充，从而达到将数组长度减小的目的，当然这是在后台自动完成的，但这无疑增加了算法的复杂度。

‍‍‍‍‍‍‍‍

算法能否再次优化？

考虑不创建新的数组来保存已经抽取的元素:随机从数组中抽出一个元素，然后与最后个元素交换，相当于把这个随机抽取的元素放到了数组最后面去，表示它已经是被随机过了，同时被换走的那个元素跑到前面去了，会在后续的重复操作中被随机掉。一轮操作过后，下一轮我们只在剩下的n-1个元素也就是数组的前n-1个元素中进行相同的操作，直到进行到第一个。