Fatal编程技术网
  • javascript/
  • Javascript 按下一次按钮后，如何灰显并禁用按钮？

Javascript 按下一次按钮后，如何灰显并禁用按钮？

javascript html

Javascript 按下一次按钮后，如何灰显并禁用按钮？,javascript,html,Javascript,Html,嗨，我正在尝试灰显和禁用按钮（在div中的每个按钮）后，它被按下一次。这样，用户在刷新页面之前无法再次按下该按钮。希望我的问题是正确的提问方式。。我希望你能理解我。 这是我的HTML页面代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <!--this name will be visible on the tab-->

嗨，我正在尝试灰显和禁用按钮（在div中的每个按钮）后，它被按下一次。这样，用户在刷新页面之前无法再次按下该按钮。希望我的问题是正确的提问方式。。我希望你能理解我。 这是我的HTML页面代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
     <head>
            <!--this name will be visible on the tab-->
           <title>Multiplayer</title>
           <!--this is to link HTML and CSS together-->
             <link rel="stylesheet" type="text/css" href="Hangman.css">
             <script> var currentPlayingWord = "<?php echo $result["word"] ?>" </script>
             <script src="jquery-1.11.3.js"></script>
             <script src="JSforMultiPlayer.js"></script>

     </head>
     <body style="background-color:#00FFFF">
          <!--this is the picture on the webpage-->
          <img id="hangman-image" src="hangmanImage.png" alt="Hangman" style="width:660px;height:618px;" align="right">
          <!--these are the buttons which use to input the words in-->
          <div id="all-the-buttons">
             <div id="first-row" class="row-button">
                   <button type="button">Q</button>
                   <button type="button">W</button>
                   <button type="button">E</button>
                   <button type="button">R</button>
                   <button type="button">T</button>
                   <button type="button">Y</button>
                   <button type="button">U</button>
                   <button type="button">I</button>
                   <button type="button">O</button>
                   <button type="button">P</button>
             </div>
             <div id="second-row" class="row-button" >
                   <button type="button">A</button>
                   <button type="button">S</button>
                   <button type="button">D</button>
                   <button type="button">F</button>
                   <button type="button">G</button>
                   <button type="button">H</button>
                   <button type="button">J</button>
                   <button type="button">K</button>
                   <button type="button">L</button>
            </div>
            <div id="third-row" class="row-button" style="padding-top: 4px;">
                   <button type="button">Z</button>
                   <button type="button">X</button>
                   <button type="button">C</button>
                   <button type="button">V</button>
                   <button type="button">B</button>
                   <button type="button">N</button>
                   <button type="button">M</button>
                   <button id="reset-button" type="button">RESET</button>
            </div>
              <p class="mylives" type="text"></p>
         </div>
          <form>
               <input type="text" id="word-outcome"/>
        </form>
         <form>
               <input type="text" id="wrong-guesses"/>
           </form>
         <form>
             <input type="text" class="hint" style="display:none;" value="Hint: word is computer related." readonly></input>
        </form>
         <TABLE BORDER="5"    WIDTH="20%"   CELLPADDING="5" CELLSPACING="2" id="Score-Board">
          <TR>
              <caption id="table-title">Score Board</caption>
              </TH>
          </TR>
          <TR ALIGN="CENTER">
              <TH colspan="2" id="player1"></TH>
              <TH colspan="2" id="player2"></TH>
          </TR>
          <TR ALIGN="CENTER">
              <TH colspan="2" id="player1Score"></TH>
              <TH colspan="2" id="player2Score"> </TH>
          </TR>
         </TABLE>
     </body>


多人游戏
var currentPlayingWord=“”
Q
W
E
R
T
Y
U
我
O
P
A.
s
D
F
G
H
J
K
L
Z
X
C
v
B
N
M
重置


记分牌
这是我的JavaScript代码：

var wordbank = ['browser', 'binary', 'cache', 'cookie', 'CSS', 'HTML', 'javascript', 'gigabyte', 'google', 'download']
var underscores = "";
var guessCounter = 0;
var score = 1000;
var player1Name;
var player2Name;
$(document).ready(function () {

    getPlayerNames();
    underscores = wordloop(currentPlayingWord);
    wordOutCome(underscores);
    guessCounter = 10;

    $('#all-the-buttons button').click(function () {
        letterPress($(this));
    });


});

var wordloop = function (word) {
    var wordcount = 0
    var underscores = "";
    while (wordcount < word.length) {
        underscores = underscores + "_";
        wordcount++;
    }
    return underscores;
}

var randomNumber = function () {
    var random = Math.floor((Math.random() * 9) + 0);
    return random;
}

var wordOutCome = function (underscores) {
    var wordoutcome = document.getElementById('word-outcome');
    wordoutcome.value = underscores;
}

function letterPress(button) {
    var text = button.text();
    if ("RESET" === text) {
        resetButton();
    }
    else {
        var result = isLetterInWord(text, currentPlayingWord);
        if (result == true) {
            increaseScore();
            replaceDashesForLetter(text);
            var hasDashes = noMoreDashes();
            if (hasDashes == true) {
                navigateToWinnerPage();
            }

        }
        else {
            decreaseGuessCount();
            decreaseScore();
            noMoreGuesses();
            addIncorrectGuessToWrongGuesses(text);
            noMoreLives();
        }


        $('#word-outcome').val(underscores);

    }
}

function isLetterInWord(guess, word) {
    var uppercaseGuess = guess.toUpperCase();
    var uppercaseWord = word.toUpperCase();
    for (var i = 0; i < uppercaseWord.length; i++) {
        console.log(i);
        if (uppercaseWord[i] === uppercaseGuess) {
            return true;
        }
        //get letter from word
        //is letter from word the same as guess
        //if letter from word is the same as guess return true
        //return false if guess is not in the word
    }
    return false;
}

function replaceDashesForLetter(letter) {
    for (var i = 0; i < currentPlayingWord.length; i++) {
        console.log(currentPlayingWord);
        var playingLetter = currentPlayingWord[i];
        var upperCaseCurrentLetter = playingLetter.toUpperCase();
        if (upperCaseCurrentLetter == letter) {
            underscores = setCharAt(underscores, i, letter);
        }
    }
//for each letter in current word being played
//does letter guessed match the letter in the current word
//if letter guessed matches the letter in the current word - then replace the dash at the index (count in loop) with the letter guessed
//for each of the letters in the word being played there is a dash
//if the letter is at the index of a dash then replace that dash with the letter (which is the users guess)
}

function setCharAt(str, index, chr) {
    //get first part of word up to character we want to replace
    var first = str.substr(0, index);
    //get second part of word ONE letter AFTER character we want to replace
    var second = str.substr(index + 1);
    //result is the first part plus the character to replace plus the second part
    return first + chr + second;
}

var addIncorrectGuessToWrongGuesses = function (guess) {
    var currentText = document.getElementById("wrong-guesses").value;
    document.getElementById("wrong-guesses").value = currentText + guess;
    //As the guess is wrong
    //add the guess to the list of incorrect guesses displayed on the screen
}

var greyOutButton = function (button) {
    //grey out the button
    //make sure that the user cannot press the button anymore
}

function resetButton() {
    location.href = "HangmanHomePage.php";
    //Send user to the home page
}

var decreaseGuessCount = function () {
    guessCounter = guessCounter - 1;
    if (guessCounter === 3) {
        showHint();
    }
//guess count should be decreased by one
}

var noMoreGuesses = function () {
    if (guessCounter === 0) {
        location.href = "Looser Page.php";
    }
    //do something when no more guesses (navigate to loser page)
}

var noMoreDashes = function () {
    var i = underscores.indexOf("_");
    if (i > -1) {
        return false;
    }
    return true;
    //if index of '_' is not -1 then there are dashes
}

var navigateToWinnerPage = function () {
    location.href = "Winner Page.php?score="+score;
}

var noMoreLives = function () {
    var showLives = "You have " + guessCounter + " lives";
    var test = document.getElementsByClassName("mylives");
    test.textContent = showLives;
}

function showHint() {
    document.getElementsByClassName('hint').style.display = "block";
}
function increaseScore(){
    score = score + 100;
    console.log(score);
    var showScore = $("#player1Score");
    showScore.text(score);
}
function decreaseScore(){
    score = score - 100;
    console.log(score);
    var showScore = $("#player1Score");
    showScore.text(score);
}

function navigateToDifficultyForMultiPlayer() {
    //set player names in session
    setPlayerNames();
    //navigate to DifficultyForMultiPlayer page
    location.href = "DifficultyForMultiPlayer.html";
}

function setPlayerNames() {
    var firstPlayerName = document.getElementById("playerOneName").value;
    var secondPlayerName = document.getElementById("playerTwoName").value;
    console.log(firstPlayerName + " " + secondPlayerName);
    sessionStorage.setItem("Player1Name", firstPlayerName);
    sessionStorage.setItem("Player2Name", secondPlayerName);
}
function getPlayerNames(){
    player1Name = sessionStorage.getItem("Player1Name");
    player2Name = sessionStorage.getItem("Player2Name");
    console.log(player1Name + " " + player2Name);
    document.getElementById("player1").innerHTML = player1Name;
    document.getElementById("player2").innerHTML = player2Name;
}
function displayScore () {
    var playerOneScore = score;

}

var wordbank=['browser'、'binary'、'cache'、'cookie'、'CSS'、'HTML'、'javascript'、'gigabyte'、'google'、'download']
var下划线=”；
var计数器=0；
var得分=1000；
变量player1Name；
变量player2Name；
$（文档）.ready（函数（）{
getPlayerNames（）；
下划线=字循环（currentPlayingWord）；
文字结果（下划线）；
猜测计数器=10；
$（“#所有按钮”）。单击（函数（）{
活版印刷（$（本））；
});
});
var wordloop=函数（字）{
var wordcount=0
var下划线=”；
while（字数<字长）{
下划线=下划线+“\”；
字数++；
}
返回下划线；
}
var randomNumber=函数（）{
var random=Math.floor（（Math.random（）*9）+0）；
返回随机；
}
var wordoutput=函数（下划线）{
var-wordoutput=document.getElementById（'word-output'）；
wordoutput.value=下划线；
}
功能活版印刷（按钮）{
var text=button.text（）；
如果（“重置”==文本）{
重置按钮（）；
}
否则{
var结果=IsleterInWord（文本，当前PlayingWord）；
如果（结果==真）{
增加分数（）；
替换字母DashesforLetter（文本）；
var hasDashes=noMoreDashes（）；
if（hasDashes==true）{
导航WinnerPage（）；
}
}
否则{
减少猜测计数（）；
降低分数（）；
noMoreGuesses（）；
将正确猜测添加到错误猜测（文本）；
nomorelifes（）；
}
$（“#单词结果”）.val（下划线）；
}
}
函数（猜测，单词）{
var uppercaseGuess=guess.toUpperCase（）；
var uppercaseWord=word.toUpperCase（）；
for（var i=0；i-1）{
返回false；
}
返回true；
//如果‘‘’的索引不是-1，则存在

$("button").click(function() {
var buttonId = this.id;
document.getElementById("buttonId").disabled = true; //OR
document.getElementById("buttonId").readOnly= true;
});



$scope.letters = "qwertyuiopasdfghjklzxcvbnm";
$scope.lettersArray = [];
for (var i=0 ; i<$scope.letters.length ; i++) {
    $scope.lettersArray.push($scope.letters[i];
}

$scope.disableMe = function(event) {
    $(event.currentTarget).css('disabled', 'true');
}



<div ng-repeat="letter in lettersArray">
    <button type="button" ng-click="disableMe($event)">{{letter}}</button>
</div>



$('#all-the-buttons button').click(function (e) {
    if ($(this).is(':disabled')) e.preventDefault();
    else letterPress($(this));
});

var greyOutButton = function (button) {
   button.prop('disabled', true);
}



button:disabled {
    background: #F5F5F5;
    color : #C3C3C3;
}



$(document).ready(function () {
        $("button").attr("disabled", "disabled").css("cursor", "not-allowed");
    });



  document.getElementsByTagName("button")[0].setAttribute("disabled", "disabled");



<script type="text/javascript">

        $(document).on('click', ':button', function (e) {

            var btn = $(e.target);
            btn.attr("disabled", "disabled"); // disable button

            window.setTimeout(function () {
                btn.removeAttr("disabled"); // enable button
            }, 2000 /* 2 sec */);
        });

</script>



<script type="text/javascript">

        $(document).on('click', ':button', function (e) {

            var btn = $(e.target);
            btn.attr("disabled", "disabled"); // disable button

        });

</script>