发表于： 2020-09-04 23:47:05
1 1350
今天完成的事情：
解决图片上数字同步问题
完成任务3的点击效果
做任务4,完成css的布局
html:
<header>
<div class="nav">
<img src="./images/js/设置页面_01.png" class="nav-one">
<div>查看身份</div>
<img src="./images/翻牌_01.png" class="nav-three">
</div>
</header>
<main>
<!-- 翻牌页面1 -->
<div class="boxs" id="box1">
<div id="figure">1</div>
<div class="picture" id="pic1"></div>
</div>
<!-- 翻牌页面2 -->
<div class="boxs" id="box2" style="display: none;">
<div id="figure2">1</div>
<div class="bg">
<div class="picture" id="pic2"></div>
<div id="player">角色：</div>
<div id="group">词组：</div>
</div>
</div>
</main>
<footer class="last">
<button type="button" id="btn">查看1号身份</button>
</footer>
js
// 获取按钮button节点
var button = document.querySelector('button');
// 获取传递玩家身份的数组allnum
var allnum = localStorage.getItem("allnum");
// console.log(localStorage.getItem("allnum"));
// 将字符串转换为数组,获取杀手，平民
var arr = allnum.split(",")
// 查看身份数组
console.log(allnum)
// 查看身份数组的元素
console.log(arr[0])
// 查看数组的长度
console.log(arr.length);
var index = 0;
// console.log(index);
var number = 2;
// console.log(number);
// 绑定btn点击事件
btn.onclick = function () {
if (number < arr.length + 1) {
// 判断偶数
if (index % 1 == 0) {
// 页面1点击事件
document.getElementById("box1").style.display = ""
document.getElementById("box2").style.display = "none"
// 查看身份
button.textContent = "查看" + number + "号身份";
// 设置角色身份
document.getElementById('player').innerHTML = "角色:" + arr[index];
// 数字文本
document.getElementById('figure').innerHTML = number;
index = index + 0.5;
number++;
console.log(arr);
console.log(index);
console.log(number);
console.log(btn);
} else {
// 页面2点击事件
document.getElementById("box1").style.display = "none"
document.getElementById("box2").style.display = ""
// 隐藏传递
button.textContent = "隐藏并传递给" + number + "号";
// 数字文本
document.getElementById('figure2').innerHTML = number;
index = index + 0.5;
console.log(arr);
console.log(index);
console.log(number);
console.log(btn);
}
}
}
问题：
点击缺 ”隐藏2号“，“隐藏8号”两页，请问师兄如何修改判断语句
返回列表
评论