IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

九宫格

1

九宫格

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

div {
    width:30% ;
    padding-bottom:30% ;
    /* border-radius 意思是给图形加圆角 */
    border-radius:20% 
    background-color:rgb(221, 159, 43);
    float:left;
    margin:1%
     height
    
    }

HashMap'类型的对象上找不到属性或字段'timestamp'

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

org.springframework.expression.spel.SpelEvaluationException: EL1008E: Property or field 'timestamp' cannot be found on object of type 'java.util.HashMap' - maybe not public?

为什么利用for循环遍历生成死亡信息时，会出现重复？

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//结束游戏按钮，直接跳转到玩家配比页面
function over() {
    var gameOver = confirm("确认结束游戏吗？")
    if (gameOver == true) {
        sessionStorage.clear()
        window.location.href = '../html/player-ratio.html'
    }

}

var obj = JSON.parse(sessionStorage.getItem("obj"))
// var click = sessionStorage.getItem("click")
var deathObj = JSON.parse(sessionStorage.getItem("deathObj"))
var voteObj = JSON.parse(sessionStorage.getItem("voteObj"))
console.log(deathObj)
console.log(voteObj)
var day = sessionStorage.getItem('day');

for (i = 1; i <= day; i++) {
    $('.process').append('<button class="btnDay"></button><div class="flow"><div class="triangle"></div><p class="killing">杀手杀人</p><p class="deathKill"></p><p class="speaking">亡灵发表遗言</p><p class="discuss">玩家依次发言</p><p class="vote">全民投票</p><p class="deathVote"></p></div>')
    $('.btnDay').eq(i - 1).append('第' + i + '天');
    $('.flow').hide();
    $('.flow').eq(i - 1).show();
    // console.log(day)
    // console.log(i)
}
if (JSON.parse(sessionStorage.getItem('deathObj'))) {
    for (var i = 1; i <= day; i++) {
        $('.deathKill').eq(day - 1).append(deathObj[0].numb + "号被杀死，他的真实身份是" + deathObj[0].name)
    }
}
if (JSON.parse(sessionStorage.getItem('voteObj'))) {
    for (var i = 1; i <= day; i++) {
        $('.deathVote').eq(day - 1).append(voteObj[0].numb + "号被放逐，他的真实身份是" + voteObj[0].name)
    }
}


for (var i = 1; i < day; i++) {
    $('.killing').eq(i - 1).css("background-color", "gray")
    $('.speaking').eq(i - 1).css("background-color", "gray")
    $('.discuss').eq(i - 1).css("background-color", "gray")
    $('.vote').eq(i - 1).css("background-color", "gray")
}
$('.btnDay').click(function () {
    var dayClick = $('.btnDay').index(this)
    $('.flow').eq(dayClick).toggle()
})
if (JSON.parse(sessionStorage.getItem('kilClick'))) {
    kilClick = JSON.parse(sessionStorage.getItem('kilClick'))
} else {
    kilClick = 2
    // console.log(kilClick)
}
// console.log( JSON.parse(sessionStorage.getItem('kilClick')))
if (kilClick == 1) {
    for (var i = 0; i < day; i++) {
        $('.killing').eq(i).css("background-color", "gray")
    }
}
if (JSON.parse(sessionStorage.getItem('flow'))) {
    flow = JSON.parse(sessionStorage.getItem('flow'))
} else {
    flow = 0
}

$('.killing').eq(day - 1).click(function () {
    var killing = 1
    sessionStorage.setItem("killing", killing)
    if (flow == 0) {
        flow = 0
        sessionStorage.setItem('flow', flow)
        window.location.href = '../html/killing.html'
    } else {
        alert(' 请按顺序点击')
    }
})
$('.speaking').eq(day - 1).click(function () {
    if (JSON.parse(sessionStorage.getItem('flow')) == 1) {
        flow = 2
        sessionStorage.setItem('flow', flow)
        alert('请亡灵发表遗言')
        $('.speaking').css("background-color", "gray")
    } else {
        alert('请按顺序点击')
    }
})
$('.discuss').eq(day - 1).click(function () {
    if (JSON.parse(sessionStorage.getItem('flow')) == 2) {
        flow = 3
        sessionStorage.setItem('flow', flow)
        alert('请玩家依次发言')
        $('.discuss').css("background-color", "gray")
    } else {
        alert('请按顺序点击')
    }
})
$('.vote').eq(day - 1).click(function () {
    sessionStorage.removeItem('killing')
    if (JSON.parse(sessionStorage.getItem('flow')) == 3) {
        flow = 0
        sessionStorage.setItem('flow', flow)
        var vote = 1
        sessionStorage.setItem("vote", vote)
        sessionStorage.setItem("day", day)
        window.location.href = '../html/killing.html'
    } else {
        alert('请按顺序点击')
    }
})

测

0

1

通用

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

测

任务一审核3天了

0

1

通用

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

margin 负值会有什么影响

0

1

九宫格

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

https://www.jianshu.com/p/549aaa5fabaa

间距，自适应

1

九宫格

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修真院(jnshu.com)</title>
<style>
div.ex
{
width: 80px;
height: 80px;
background-color: orange;
margin:5px;
float:left
}
div.fx
{
width: 80px;
height: 80px;
background-color: orange;
margin:5px;
float:left
}
.text_line
{
    clear:both;
    margin-bottom:0px;
}

</style>
</head>
<body>

<div class="ex"></div>
<div class="ex"></div>
<div class="ex"></div>
<h3 class="text_line"></h3>
<div class="fx" ></div>
<div class="fx" ></div>
<div class="fx" ></div>
<h3 class="text_line"></h3>
<div class="fx" ></div>
<div class="fx" ></div>
<div class="fx" ></div>
</body>
</html>

一开始设置的是杀手跟平民有一方全部死亡才结束，后来换了杀手与平民同数量即杀手胜

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

sessionStorage.removeItem("dayNumberTF");
var square = document.getElementsByClassName("square");
var square1 = document.getElementsByClassName("square-1");
var square2 = document.getElementsByClassName("square-2");
var lenSquare = JSON.parse(localStorage.kCArray).length;
var squareArray = JSON.parse(localStorage.kCArray);
var dieNA = new Array();
var dieNumber;
if (sessionStorage.speak == undefined) {
    document.getElementsByClassName("speak")[0].innerHTML = "杀手请选择要杀死的目标";
    sessionStorage.speak = true;
}
else {
    document.getElementsByClassName("speak")[0].innerHTML = "大家请投票";
    sessionStorage.removeItem("speak");
}
for (var i = 1; i < lenSquare; i++) {
    var newSquare = square[0].cloneNode(true);
    square[0].parentNode.appendChild(newSquare);
}
for (x in squareArray) {
    square1[x].innerHTML = squareArray[x];
    square2[x].innerHTML = 1 + Number(x);
}
for (let i = 0; i < lenSquare; i++) {
    document.getElementsByClassName("square")[i].addEventListener("click", function () {
        for (let n = 0; n < lenSquare; n++) {
            document.getElementsByClassName("hover-pen")[n].style.display = "none";
        }
        if (JSON.parse(sessionStorage.dieNAS).indexOf(i) == -1) {
            document.getElementsByClassName("hover-pen")[i].style.display = "block";
        }
        dieNumber = i;
    });
}
if (sessionStorage.undefined == undefined) {
    sessionStorage.dieNAS = JSON.stringify(dieNA);
    sessionStorage.undefined = "aaa";
}
if (sessionStorage.a) {
    for (x in JSON.parse(sessionStorage.dieNAS)) {
        document.getElementsByClassName("square-1")[JSON.parse(sessionStorage.dieNAS)[x]].style.background = "gray";
        document.getElementsByClassName("square-2")[JSON.parse(sessionStorage.dieNAS)[x]].style.background = "gray";
        document.getElementsByClassName("square-2")[JSON.parse(sessionStorage.dieNAS)[x]].style.color = "black";
    }
}
function titleR() {
    window.location.href = "../html/task13-3.html";
    sessionStorage.clear();
    localStorage.killer = 2;
    localStorage.civilian = 6;
}
function startGame() {
    if (dieNumber == undefined) {
        alert("请选择一个人");
    }  
    else if (squareArray[dieNumber] == "杀手" && sessionStorage.killerCK) {
        alert("不能选择自己");
    } 
    else if (sessionStorage.dieNAS.indexOf(dieNumber) != -1) {
        alert("不能杀死已死亡的人");
    } 
    else if (sessionStorage.dieNAS.indexOf(dieNumber) == -1) {
        dieNA.push(dieNumber);
        sessionStorage.dieNAS = JSON.stringify(JSON.parse(sessionStorage.dieNAS).concat(dieNA));
        for (x in JSON.parse(sessionStorage.dieNAS)) {
            squareArray.splice(JSON.parse(sessionStorage.dieNAS)[x],1);
            squareArray.splice(JSON.parse(sessionStorage.dieNAS)[x],0,"0");
        }
        if (squareArray.indexOf("杀手") == -1) {
            location.href = "task13-2.html";
            sessionStorage.civilianVictory = true; 
        }
        

        for (var y = 0; squareArray.indexOf("杀手") >= 0; y++) {
            squareArray.splice(squareArray.indexOf("杀手"),1);
        }
        for (var yy = 0; squareArray.indexOf("平民") >= 0; yy++) {
            squareArray.splice(squareArray.indexOf("平民"),1);
        }
        sessionStorage.killerRemains = y;
        sessionStorage.civilianRemains = yy;   
        if (y == yy) {
            location.href = "task13-2.html";
            sessionStorage.killerVictory = true;
        }
        else {
            location.href = "task4.html";
        }
    }
}

盒子一直不能自适应。

0

1

九宫格

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.swag{
  padding-left:31%;
  padding-bottom: 31%;
  margin:1%;
  border-radius: 20%;
  background: orange;
  float:left;
}

链接跳转问题；做九宫格的时候，为什么会用到字体尺寸

1

属性

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<style type="text/css">
        *{padding: 0;margin: 0;}
        ul{
         font-size: 0;
        }
        li{
            background: yellow;
            width: 31.3%;
            padding-bottom: 31.3%;
            border-radius: 10%;
            margin: 1%;
            list-style-type: none;
            display: inline-block;
        }
    </style>