[西安|结业弟子]JS-刘思安|2020年04月22日的日报-技能树.IT修真院

发表于： 2020-04-22 22:58:10

1 1410

今日完成

修改task2代码

找出规律不用 if else 判断杀手数量且不需要写两遍代码

 if (totalNum < 14) {
    killerNum = Math.floor(totalNum / 3);
  } else if (totalNum <= 18) {
    killerNum = Math.floor((totalNum - 1) / 3);
  }

直接getElement获取到杀手数量

学习正则表达式并应用

<input type="text" name="name" id="count" value="4" oninput="
                value=value.replace(/[^\d]/g,'');
                if(value.length>2)value=value.slice(0,2);
                myInput();

输入框匹配到所有非字符替换为空字符串

并且限制输入数字长度为2位

学习通过本地储存，跨页面获取储存的数据

// 页面跳转
function jump() {
  window.location.href = "page1.html";
}

//
function myInput() {
  var totalNum, killerNum, civilianNum;
  if (document.getElementById("count").value.length > 2) {
    document.getElementById("count").value = document
      .getElementById("count")
      .value.slice(0, 2);
  }
  // 实时获取输入的数值
  totalNum = document.getElementById("count").value;
  // 计算杀手人数
  if (totalNum < 14) {
    killerNum = Math.floor(totalNum / 3);
  } else if (totalNum <= 18) {
    killerNum = Math.floor((totalNum - 1) / 3);
  }
  // 计算得平民人数
  civilianNum = totalNum - killerNum;
  // 人数实时变化
  if (killerNum > 0) {
    document.getElementById("killerNum").innerHTML = killerNum;
    document.getElementById("civilianNum").innerHTML = civilianNum;
  } else {
    document.getElementById("killerNum").innerHTML = "";
    document.getElementById("civilianNum").innerHTML = "";
  }
}
// 洗牌算法
function shuffle(array) {
  var m = array.length,
    i,
    t;
  while (m) {
    i = Math.floor(Math.random() * m--);
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }
  return array;
}
//
function startGame() {
  var totalNum,
    killerNum,
    civilianNum,
    identifyArr = [];
  totalNum = document.getElementById("count").value;
  killerNum = document.getElementById("killerNum").innerHTML;
  civilianNum = document.getElementById("civilianNum").innerHTML;
  // console.log(totalNum);
  // console.log(killerNum);
  // console.log(civilianNum);
  // 判断输入值
  for (var i = 0; i < killerNum; i++) {
    identifyArr.push("杀手");
  }
  for (var j = 0; j < civilianNum; j++) {
    identifyArr.push("平民");
  }
  // 洗牌
  shuffle(identifyArr);
  localStorage.setItem("identifyArr", identifyArr);
}

查看身份页面使用jQ完成

$(document).ready(function () {
  // 发牌
  $("#licensing").click(function () {
    var totalNum = $("#count").val();
    if (!(totalNum >= 4 && totalNum <= 18)) {
      $("#popupNum").fadeIn();
    } else {
      $(location).attr("href", "../task3/page2.html");
    }
  });
  //  弹窗隐藏
  $("#popupNum")
    .find("button")
    .click(function () {
      $("#popupNum").fadeOut();
    });
  // 通过本地储存获得 数组
  var identifyArr = localStorage.getItem("identifyArr");
  //   字符串转数组
  identifyArr = identifyArr.split(",");
  console.log(identifyArr);

  //   点击计数器
  var clickTimes = 0;
  //传递身份点击时间方法
  $("#passId").click(function () {
    //   点击计数器
    clickTimes++;
    console.log(clickTimes);

    var playerNum = Math.ceil((clickTimes + 1) / 2);

    // 判断条件

    // 切换显示隐藏
    $(".identify_hidden").toggle();
    $(".identify_show").toggle();
    $("#passId").find(".passId_hidden").toggle();
    $("#passId").find(".passId_show").toggle();
    // 改变文字
    $(".identify_title").text(playerNum);
    $(".passId_show").find("span").text(playerNum);
    $(".passId_hidden")
      .find("span")
      .text(playerNum + 1);
    $(".identify_content").text(identifyArr[playerNum - 1]);
    //满足条件显示法官查看
    if (clickTimes >= identifyArr.length * 2 - 1) {
      // 切换显隐状态
      $(".passId_hidden").hide();
      $(".passId_show").hide();
      $(".passId_last").show();
    }
    // console.log(identifyArr.length);

    // 页面跳转
    if (clickTimes == identifyArr.length * 2 + 1) {
      $(location).attr("href", "./page3.html");
    }
  });
});