[郑州|结业弟子]JS-王薇霖|2020年07月21日的日报-技能树.IT修真院

发表于： 2020-07-21 22:09:44

1 1290

今天完成的事情：

做js任务

任务4进度

杀人界面

//将数组取出并转化成对象
var kipeArrName = JSON.parse(localStorage.getItem("kipeArr"));

//点击弹出提示框
var quit = document.getElementById("quit");//取出返回键值
quit.onclick = function (){
    var box = confirm("确认退出游戏吗？");
    if(box == true){//判断是否退出游戏
        location.href="2.html";
    }
}

//获取子节点的父节点
var main = document.querySelector("main");
//遍历所有动态添加div
for (var i = 0;i< kipeArrName.length;i++){
    var box = document.createElement("div");//添加子节点
    box.className = "tips";//获取css属性
    main.appendChild(box);//把box添加到父级中
    var boxspan = document.createElement("span");//添加文字节点
    boxspan.id = "spans"
    box.appendChild(boxspan);
    boxspan.innerHTML = kipeArrName[i];//添加玩家信息
    var boxm = document.createElement("div");//添加节点的子节点
    boxm.className = "tips-1";
    box.appendChild(boxm);
    boxm.innerHTML = i + 1;//添加玩家对应的个数
    var img = document.createElement("img");//添加图片节点
    img.className = "img1";
    img.src ="13w/雪碧图组.png";//添加图组
    box.appendChild(img);
    img.style.display = "none";
}

//获取元素集合
var imgs = document.querySelectorAll(".img1");
var boxs = document.querySelectorAll(".tips");
var spans = document.querySelectorAll("#spans");
var boxms = document.querySelectorAll(".tips-1");

//使用排他思想
for (var i = 0;i< boxs.length;i++){
    boxs[i].index = i;
    boxs[i].addEventListener('click',function(){
        for (var j = 0; j< boxs.length;j++){
            imgs[j].style.display = "none";
            boxs[j].style.background = "";
        }
        imgs[this.index].style.display = "block";
        this.style.background = "#f5c97b";
        localStorage.boxm = boxms[this.index].innerHTML;
        localStorage.boxspan = spans[this.index].innerHTML;
        boxArr = [this.index];//获取被点击元素的索引
    })
}
var boxArr = [];
var tips = [];
var btn = document.querySelector("button");
btn.onclick = function(){
    tips.push(boxArr[0]);//将获取索引的数组值添加在新数组
    localStorage.setItem("tipsArr",JSON.stringify(tips));//保存新数组到本地
    console.log(tips);
    //location.href = "2-4.html";
}

流程界面

//点击弹出提示框
var quit = document.getElementById("quit");//取出返回键值
quit.onclick = function (){
    var box = confirm("确认退出游戏吗？");
    if(box == true){//判断是否退出游戏
        location.href="2.html";
    }
}

//获取下拉框属性
var ul = document.querySelector("ul").style;
ul.display = "block";//初始为显示
function titled(){
    if(ul.display == "block"){//如果为显示则点击隐藏
        ul.display = "none";
    }else if(ul.display == "none"){//如果为隐藏则点击显示
        ul.display = "block"
    }
}

//获取下拉框点击内容
var li0 = document.getElementsByTagName("li")[0];
var li1 = document.getElementsByTagName("li")[1];
var li2 = document.getElementsByTagName("li")[2];
var li3 = document.getElementsByTagName("li")[3];
li0.onclick = function(){
    if(li0.style.background == ""){//背景颜色未变则触发事件
        alert("杀手请杀人");
        localStorage.color0 = "#6f949d";//点击后数据本地保存
        location.href = "2-5.html";
    }
}
li0.style.background = localStorage.color0;//本地保存的数据赋值
li1.onclick = function(){
    if(li0.style.background == ""){//上个事件未触发则不能继续
        alert("请按照流程顺序进行游戏");
    }else if(li1.style.background == ""){
        alert("死者亮明身份并发表遗言");
        localStorage.color1 = "#6f949d";
        li1.style.background = "#6f949d";
    }
}
li1.style.background = localStorage.color1;
li2.onclick = function(){
    if(li1.style.background == ""){
        alert("请按照流程顺序进行游戏");
    }else if(li2.style.background == ""){
        alert("玩家依次发言讨论");
        localStorage.color2 = "#6f949d";
        li2.style.background = "#6f949d";
    }
}
li2.style.background = localStorage.color2;
li3.onclick = function(){
    if(li2.style.background == ""){
        alert("请按照流程顺序进行游戏");
    }else if(li3.style.background == ""){
        localStorage.color3 = "#6f949d";
        location.href = "2-5.html";
    }
}
li3.style.background = localStorage.color3;

//获取按钮属性
var btn = document.querySelectorAll("button");
btn[1].onclick = function(){
    location.href = "2-3.html";
}
//console.log(localStorage.getItem("color"));