亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

什么原因會使 html select 標簽卡??？

什么原因會使 html select 標簽卡??？

慕尼黑5688855 2023-10-17 14:59:42
我用 HTML、CSS 和 JS 構建了一個二進制棋盤游戲，然后添加了一個選擇標簽，該標簽將更改棋盤的級別，這意味著它將在表中添加/刪除行和列問題是選擇標簽被卡住意味著它不會刪除選項標簽列表我不明白為什么它被卡住，所以我刪除了1 個<label></label>標簽2 <select id="levels" onchange="changeLevel()">id & onchange 屬性3<option value="5" selected > Easy </option>取值及選擇屬性但它仍然卡住了我在谷歌上發現一些內容說我的CSS代碼可能會影響它我檢查了它并且它沒有受到CSS代碼的影響我無法預料為什么會發生這種情況，我之前確實多次使用了 select 標簽，但我不明白為什么會發生這種情況
查看完整描述

2 回答

?
楊魅力

TA貢獻1811條經驗 獲得超6個贊

在這里刪除 onmousedown 部分<body onmousedown='return false'>



查看完整回答
反對 回復 2023-10-17
?
料青山看我應如是

TA貢獻1772條經驗 獲得超8個贊

如果你改變：


<body onmousedown='return false'>

到：


<body onkeydown='return false'>

它應該有效！


///////////////////

// DOC variables //

///////////////////


let table = document.querySelector(".table-block");


let buttons= document.querySelectorAll(".node");

buttons.forEach(button => button.addEventListener("click", trueOrFalse));


let goals = document.querySelectorAll(".goal");


let scoreDsipaly = document.querySelector("#score");

let dispalaySeconds = document.querySelector("#seconds");


//////////////////////

// global variables //

//////////////////////


// let roundTime = 20+1;

let roundTime =20000;

let rowLength = table.rows.length -1;

let colLength= table.rows.item(0).cells.length-1;

// added for clarity's sake

let rowGoal=rowLength;

let colGoal=colLength;

let score=0;


///////////////

// functions // 

///////////////


function init(){

    resetVals();


    rowsGoalsGenerater();

    colsGoalsGenerater();

}


function resetVals() {

    //roundTime = 20+1;

    roundTime=20000;

    for (let button = 0; button < buttons.length; button++) {

        buttons[button].classList.remove("node-true");

        buttons[button].innerHTML = 0;

    }


    for (let goal = 0; goal < goals.length; goal++) {

        goals[goal].classList.remove("goal-achived");

    }

}


// turns the value of a node 1/0 or true/ false

function trueOrFalse(){

    let row = this.parentElement.rowIndex;

    let col= this.cellIndex;

    let val= this.innerHTML;


    if(val==1){

        this.classList.remove("node-true");

        this.innerHTML=0;

    }else{

        this.classList.add("node-true");

        this.innerHTML=1;

    }


    checkRow(row);

    checkCol(col);


    if(checkGoals()){

        score+=rowLength;

        scoreDsipaly.innerHTML=score;

        init();

    }

}


// generates rows's goals

function rowsGoalsGenerater(){

    for ( let col=0;col<rowLength;col++){

        let randomNum = Math.floor(Math.random() * (Math.pow(2, rowLength) - 1))+1;

        table.rows.item(col).cells.item(rowGoal).innerHTML= randomNum;

    }

}


// generates columns's goals

// for compatibility's sake, they will be made from rows goals 

function colsGoalsGenerater() {

    let goalsArray = [];// row's goals


    for ( let row =0; row<colLength; row++){

        goalsArray.push(table.rows.item(row).cells.item(rowGoal).innerHTML);

    }


    goalsArray=goalsArray.map((item)=>{

        item=Number(item).toString(2);  


        if( item.length<rowLength){

            let addZeros="0".repeat(rowLength-item.length);

            item=addZeros.concat(item)

        }

        return item.split("")

    })


    for( let col=0; col<colLength; col++){

        let newGoal= []// col goal 

        for( let row=0; row<rowLength; row++){

            newGoal.push(goalsArray[row][col]);

        }

        newGoal = parseInt(newGoal.join(""), 2).toString(10);

        if (newGoal==0){// to avoid zero values on col goals

            setTimeout(init, 10);

        }


        table.rows.item(rowGoal).cells.item(col).innerHTML =newGoal;

    }

}


// checks if nodes values equals the row's goal

function checkRow(row){

    let rowGoal= table.rows.item(row).cells.item(colGoal).innerHTML;

    let userInput=[];


    for ( let column = 0; column< rowLength; column++){

        userInput.push(table.rows.item(row).cells.item(column).innerHTML);

    }


    if(rowGoal== parseInt(userInput.join(""),2).toString(10)){

        table.rows.item(row).cells.item(colGoal).classList.add("goal-achived");

    }else{

        table.rows.item(row).cells.item(colGoal).classList.remove("goal-achived");

    }

}


// checks if nodes values equals the col's goal

function checkCol(col){

    let colGoal = table.rows.item(rowGoal).cells.item(col).innerHTML;

    let userInput=[];


    for( let row=0; row< colLength; row++){

        userInput.push(table.rows.item(row).cells.item(col).innerHTML)

    }


    if (colGoal == parseInt(userInput.join(""), 2).toString(10)) {

        table.rows.item(rowGoal).cells.item(col).classList.add("goal-achived");

    } else {

        table.rows.item(rowGoal).cells.item(col).classList.remove("goal-achived");

    }

}


function checkGoals(){

    for ( let goal=0;goal< goals.length;goal++){

        if (!goals[goal].classList.contains("goal-achived")) return false;

    }

    return true;

}


function checkStatue(){

    if(roundTime<=0 && !isPlaying){

    }

}


function timeReducer() {

    if (roundTime > 0) {

        roundTime--;

    } else {

        window.location.href = `../game-over-page/game-over.html?score=${score}`;

    }

    dispalaySeconds.innerHTML = roundTime;

}


function changeLevel(){

    alert("fucks")

}



////////////

// runing //

////////////


init();

setInterval(timeReducer, 1000);

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    cursor: default; /* to prevent the cursor to be Text Select when it hovers on score and time counters */

}


body {

    background-color: #272727;

    color: #effffb;

    font-size: 24px;

    font-family: 'Bellota Text', cursive;

}


nav{

    height: 24vh;

    padding: 1rem;

    display: flex;

    justify-content: space-between;

}


.img-logo{

    width: 72px;

    display: block;

    margin: 0.8rem;

    cursor: pointer;

}


.info{

    height: 17vh;

}


.info,

.text-info{

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-start;

}


#seconds,

#score,

.level-label,

.output-info {

    font-family: 'Lato', sans-serif;

    display: inline;

    font-size:1.1rem;

    font-weight: 400;

}


.container {

    width: 100vw;

    height: 76vh;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

}


.table-block{

    transform: translate(0, -20px);

    border-spacing: 15px;

}


.node,

.goal{

    width: 40px;

    height: 40px;

    box-shadow: 0 2px 0 0.3px #000000;

    transition: 0.3s;

}


.goal{

    border: solid 2px #50d890;

}


.goal-achived{

    box-shadow:none;

    background-color: #50d890;

    transform: translate(0 , 2px);

}


.node{

    border: solid 2px #4f98ca;

    cursor: pointer;

}


.node-true{

    box-shadow:none;

    background-color: #4f98ca;

    transform: translate(0, 2px);

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- <link rel="stylesheet" href="styles/style.css">

    <link rel="stylesheet" href="styles/queries.css"> -->

    <link href="https://fonts.googleapis.com/css?family=Bellota+Text&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

    <title>Binary Game</title>

</head>

<body onkeydown = 'return false'  onselectstart = 'return false'>

    <nav>

        <div class="info">

             <div class="selection-block">

                <label class="level-label" for="levels">Level : </label>

                <select id="levels" onchange="changeLevel()">

                    <option value="20" >Easy</option>

                    <option value="14">Meduim</option>

                    <option value="10">Hard</option>

                </select>

            </div> 

          <!--  <div>

                <select>

                    <option >1</option>

                    <option >1</option>

                    <option >1</option>

                </select>

            </div> -->

            <div class="text-info">

                <div class="output-block">

                    <h3 class="output-info">Time Left: </h3>

                    <span id="seconds">20</span>

                </div>

                <div class="output-block">

                    <h3 class="output-info">Score: </h3>

                    <span id="score">0</span>

                </div>

            </div>

        </div>

    </nav>

    <div class="container">

        <table class="table-block" cellspacing="15">

            <tr class="row">

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="goal"></td>

            </tr>

            <tr class="row">

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="goal"></td>

            </tr>

            <tr class="row">

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="goal"></td>

            </tr>

            <tr class="row">

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="goal"></td>

            </tr>

            <tr class="row">

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="node">0</td>

                <td class="goal"></td>

            </tr>

            <tr class="row">

                <td class="goal"></td>

                <td class="goal"></td>

                <td class="goal"></td>

                <td class="goal"></td>

                <td class="goal"></td>

            </tr>    

        </table>

    </div>

    <!--<script src="scripts/script.js"></script>-->

</body>

</html>


查看完整回答
反對 回復 2023-10-17
  • 2 回答
  • 0 關注
  • 159 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號