成果链接：https://ruanshaofan.github.io/Test01/html/html8-1.html

任务总觉：

1.这个任务主要是对之前任务八的三个界面添加媒体查询的功能，是页面达到自适应的效果。可以使用bootstrap框架进行页面的布局，应为bootstrap框架本身自带的就有媒体查询的效果。

在特殊情况下可以自己定义创建一个媒体查询，

2. 媒体查询的主要目的就是为了是页面达到响应式设计的效果

可以在HTML中引入meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

今天完成的事：完成任务二玩家数量以及玩家身份进行乱序，

// 随机获取数组中任意个数的函数
function getArrItem(arr, num) {
    var temp_array = new Array();
    for (var index in arr) {
        temp_array.push(arr[index]);
    }
    var return_array = new Array();
    for (var i = 0; i < num; i++) {
        if (temp_array.length > 0) {
            var arrIndex = Math.floor(Math.random() * temp_array.length);
            //将此随机索引的对应的数组元素值复制出来
            return_array[i] = temp_array[arrIndex];
            //然后删掉此索引的数组元素,这时候temp_array变为新的数组
            temp_array.splice(arrIndex, 1);
        } else {
            break;
        }
    }
    return return_array;
}

// 调用getArrItem
 arr=getArrItem(arr,arr.length);

完成任务三页面布局，对任务三的玩家身份进行分配

首先要获取到任务二传递过来的数据。

var users = window.localStorage.users;
var result = JSON.parse(users);//JSON.parse()【从一个字符串中解析出json对象】
console.log(result);
//json格式的字符串，转成数组
for (var i = 0; i < result.length; i++) {
    console.log(result[i]);
}

然后定义两个全局变量

//i用来表示是奇数页，还是偶数页
var i=0;
//k用来表示当前是第几个玩家
var k=0;

定义一个函数，

function lookRoles() {
    i++;
    console.log("是否是奇数页面")
    console.log(i%2 !== 0)
    //奇数页面，展示封面；偶数页面展示身份
    console.log(result.length);

    if(i%2 !== 0 && k<result.length) {
        document.getElementById("check_role").innerHTML="查看"+((i+1)/2)+"号身份";
        document.getElementById("icon").src="fengmian.png";
        k++;
    } else {
        document.getElementById("icon").src="wow.png";
        document.getElementById("check_role").innerHTML="身份是："+result[k].identity;
    }
}

通过点击事件调用这个函数

<div class="footer" id="check_role" onclick="lookRoles()"><strong>查看一号身份</strong></div>

明天计划的事：完成任务三，

遇到的问题：不知道怎样控制显示贫民或者杀手身份的图片，后来通过师兄师姐讲解，可以通过奇偶数来控制图片切换。

收获：通过对玩家数量的奇偶数来判断应该显示那张图片，