今天完成的事情：

重点参考了狗哥的代码，写完了JS的部分，点击设置可以弹出相应的角色分配，如下图所示：

看了与table-cell相关的布局，获益匪浅

明天计划的事情：

虽然写出了ＪＳ部分，但是感觉还是无法独立完成代码，因而需要在深入思考一下

遇到的问题：

首先先把静态效果写好了。如上图的角色分配，然后用ＪＳ来写动态效果，因而要删除角色分配的ｌｉ部分。结果导致由于右边部分由于没有内容，破坏了talbe-cell布局。使得本来左边“玩家配比”部分分配宽度为20%，右边为80%。结果导致左边宽度收缩，宽度由文字撑开，进而导致右边部分宽度收缩，虽然宽度还是为原来的80%。但是，这样，就破坏了table-cell的布局效果。最后，通过谷歌，很快就找到了table-cell的布局。这是链接：https://segmentfault.com/a/1190000007007885再继续深入思考，找到了相关的帖子：https://csspod.com/table-width-algorithms/。通过阅读帖子，才发现talbe布局的宽度有auto和fixed这两种属性。只有设为fixed时，才能精准的实现宽度分配。详细的细节，我已经在https://segmentfault.com/a/1190000007007885这篇帖子的评论区后面做了说明。

做JS的时候，遇到的主要问题就是随机排序问题。感觉这个和产生随机数很像，但是又有一些不同。随机排序要求把本来的序列进行打乱。可以用随机取数产生一个新序列，但是要求产生的数字是不能重复的，同时要求每个数字都要出现一遍。这么看来，随机排序就略显复杂了。于是，我重点参考了狗哥的代码，但还是看不懂。于是暂时把他的代码放到我的JS里面，自己写了剩余的部分，成功实现了JS动画效果。点击“设置”按纽，就会分配角色了。打算明天自己再 研究研究随机排序，争取写出自己的随机排序。

收获：

1、学会了table-cell的布局知识，愈发感觉table-cell布局是可以取代inline-block布局的；

2、学会了用JS写随机排序算法；

3、知晓了HTML的内容其实也可以用JS来写的。