Как сделать так, чтобы мой генератор случайных чисел выводил определенный фон сайта по заданному c результату - PullRequest
Новая
       0

Как сделать так, чтобы мой генератор случайных чисел выводил определенный фон сайта по заданному c результату

0 голосов
/ 03 марта 2020

Я новичок в веб-программировании и надеялся создать систему, которая будет случайным образом выбирать, кто из учеников принудительно пересматривает рюкзак. Недавно ученик угрожал расстрелять школу, с того события прошло 1 месяц, так что школа вместо проведя поиск по всем учащимся, решил сделать его полностью случайным, поэтому я решил создать веб-страницу, которая именно это и делает.

Однако пожилые люди будут использовать ее, и хотя я разобрал часть кода, Я хотел сделать фон веб-сайта красным, если требуется пересмотр, и зеленым, если результат алгоритма рандомизации равен проходу.

Вот мой код:

HTML: 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SELEC</title>
    <link rel="stylesheet" href="quote.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="container">
        <h2>Random Student Selection System</h2>
            <div id="quoteContainer">
                <p></p>
                <p id="quoteGenius"></p>            
            </div><!--end quoteContainer-->

            <div id="buttonContainer">
                <a href="#" id="quoteButton">GEN</a>
        </div><!--end buttonContainer-->


    </div><!--end container-->
</body>
</html>

JS: 

    $(document).ready(function(){
        var quoteSource=[
        {
            quote: "PASS",
            name:"PASS"
        },
        {
            quote:"REVISION",
            name:"REVISION"
        },

    ];


        $('#quoteButton').click(function(evt){
            //define the containers of the info we target
            var quote = $('#quoteContainer p').text();
            var quoteGenius = $('#quoteGenius').text();
            //prevent browser's default action
            evt.preventDefault();
            //getting a new random number to attach to a quote and setting a limit
            var sourceLength = quoteSource.length;
            var randomNumber= Math.floor(Math.random()*sourceLength);
            //set a new quote
            for(i=0;i<=sourceLength;i+=1){
            var newQuoteText = quoteSource[randomNumber].quote;
            var newQuoteGenius = quoteSource[randomNumber].name;
            //console.log(newQuoteText,newQuoteGenius);
      var timeAnimation = 100;
      var quoteContainer = $('#quoteContainer');
      //fade out animation with callback
      quoteContainer.fadeOut(timeAnimation, function(){
        quoteContainer.html('');
                quoteContainer.append('<p>'+newQuoteText+'</p>'+'<p id="quoteGenius">'+'-                               '+newQuoteGenius+'</p>');
        //fadein animation.
        quoteContainer.fadeIn(timeAnimation);
      });  

            break;

        };//end for loop

    });//end quoteButton function


});//end document ready

и CSS

body{
    font-family: 'Roboto', sans-serif;
    color: #000;
}

#container{
    width:800px;
    margin:50px auto;
    padding: 20px;
    width:50%;
}
#container h2{
    text-align:center;
    color:#045;
}

#quoteContainer{
    width:75%;
    background: #fff;
    padding:10px;
    margin:30px auto;
    text-align: center;
  height:70px;
}
#buttonContainer{
    width: 100%;
    text-align: center;
}
#quoteButton{
    width:200px;
    margin-top: 10px;
    border:2px solid #E8450C;
    color:#045;
    font-family: inherit;
    font-weight: bold;
    padding:5px;
    text-decoration: none;
    text-align: center;
}

#quoteButton:hover{
    cursor:pointer;
    background:#E82B13;
    color: #fff;    
}
#quoteButton:active{
    cursor: pointer;
}
#quoteButton{
    display: inline-block;
}
#quoteGenius{
    font-style: italic;
    font-weight: 600;
    text-align: center;
}


/*MEDIA QUERIES*/
@media screen and(max-width:760px){
    #quoteButton,#addNew{
        display: block;
    }
}

Я только начал изучать это на прошлой неделе. Заранее спасибо. Привет.

Ответы [ 2 ]

0 голосов
/ 03 марта 2020

вот вам go полный код ваш и отредактированный ... 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <style>
            body{
        font-family: 'Roboto', sans-serif;
        color: #000;
    }

    #container{
        width:800px;
        margin:50px auto;
        padding: 20px;
        width:50%;
    }
    #container h2{
        text-align:center;
        color:#045;
    }

    #quoteContainer{
        width:75%;
        background: #fff;
        padding:10px;
        margin:30px auto;
        text-align: center;
      height:70px;
    }
    #buttonContainer{
        width: 100%;
        text-align: center;
    }
    #quoteButton{
        width:200px;
        margin-top: 10px;
        border:2px solid #E8450C;
        color:#045;
        font-family: inherit;
        font-weight: bold;
        padding:5px;
        text-decoration: none;
        text-align: center;
    }

    #quoteButton:hover{
        cursor:pointer;
        background:#E82B13;
        color: #fff;    
    }
    #quoteButton:active{
        cursor: pointer;
    }
    #quoteButton{
        display: inline-block;
    }
    #quoteGenius{
        font-style: italic;
        font-weight: 600;
        text-align: center;
    }


    /*MEDIA QUERIES*/
    @media screen and(max-width:760px){
        #quoteButton,#addNew{
            display: block;
        }
    }
        </style>
        <title>Document</title>
    </head>
    <body>

        <div id="container">
            <h2>Random Student Selection System</h2>
                <div id="quoteContainer">
                    <p></p>
                    <p id="quoteGenius"></p>            
                </div><!--end quoteContainer-->

                <div id="buttonContainer">
                    <a href="#" id="quoteButton">GEN</a>
            </div><!--end buttonContainer-->


        </div><!--end container-->

        <script>
                $(document).ready(function(){
            var quoteSource=[
            {
                quote: "PASS",
                name:"PASS"
            },
            {
                quote:"REVISION",
                name:"REVISION"
            },

        ];


            $('#quoteButton').click(function(evt){
                //define the containers of the info we target
                var quote = $('#quoteContainer p').text();
                var quoteGenius = $('#quoteGenius').text();
                //prevent browser's default action
                evt.preventDefault();
                //getting a new random number to attach to a quote and setting a limit
                var sourceLength = quoteSource.length;
                var randomNumber= Math.floor(Math.random()*sourceLength);
                //set a new quote
                for(i=0;i<=sourceLength;i+=1){
                var newQuoteText = quoteSource[randomNumber].quote;
                var newQuoteGenius = quoteSource[randomNumber].name;
                // console.log(newQuoteText,newQuoteGenius);
                //change the color of the page body
                if(newQuoteText =="PASS"){
                    document.body.style.backgroundColor = "green"; 

                }
                if(newQuoteText =="REVISION"){
                    document.body.style.backgroundColor = "red"; 

                }



          var timeAnimation = 100;
          var quoteContainer = $('#quoteContainer');
          //fade out animation with callback
          quoteContainer.fadeOut(timeAnimation, function(){
            quoteContainer.html('');
                    quoteContainer.append('<p>'+newQuoteText+'</p>'+'<p id="quoteGenius">'+'-                               '+newQuoteGenius+'</p>');
            //fadein animation.
            quoteContainer.fadeIn(timeAnimation);
          });  

                break;

            };//end for loop

        });//end quoteButton function


    });//end document ready
        </script>
    </body>
    </html>
0 голосов
/ 03 марта 2020

По сути, сначала в вашем CSS вы можете создать 2 класса, таких как .pass { background-color: green; } и .revision { background-color: red; }, а затем в вашем javascript, проверить результат генератора случайных чисел, и если результат равен "pass", то добавьте класс .pass к вашему <body> элементу, в противном случае, если это "пересмотр", добавьте класс .revision к вашему <body> элементу.

Вот модификация вашего кода, чтобы это произошло : (Выполнить фрагмент кода) 

$(document).ready(function(){
        var quoteSource=[
        {
            quote: "PASS",
            name:"PASS"
        },
        {
            quote:"REVISION",
            name:"REVISION"
        },

    ];


        $('#quoteButton').click(function(evt){
            //define the containers of the info we target
            var quote = $('#quoteContainer p').text();
            var quoteGenius = $('#quoteGenius').text();
            //prevent browser's default action
            evt.preventDefault();
            //getting a new random number to attach to a quote and setting a limit
            var sourceLength = quoteSource.length;
            var randomNumber= Math.floor(Math.random()*sourceLength);
            //set a new quote
            for(i=0;i<=sourceLength;i+=1){
            var newQuoteText = quoteSource[randomNumber].quote;
            var newQuoteGenius = quoteSource[randomNumber].name;
            //console.log(newQuoteText,newQuoteGenius);
      var timeAnimation = 100;
      var quoteContainer = $('#quoteContainer');
      //fade out animation with callback
      quoteContainer.fadeOut(timeAnimation, function(){

          // BACKGROUND COLOR LOGIC HERE
          if (newQuoteText === 'PASS') {
              document.body.className = 'pass';
          } else {
              document.body.className = 'revision';
          }
        quoteContainer.html('');
                quoteContainer.append('<p>'+newQuoteText+'</p>'+'<p id="quoteGenius">'+'-                               '+newQuoteGenius+'</p>');
        //fadein animation.
        quoteContainer.fadeIn(timeAnimation);
      });  

            break;

        };//end for loop

    });//end quoteButton function


});//end document ready
body{
    font-family: 'Roboto', sans-serif;
    color: #000;
    transition: background-color 500ms ease;
}

#container{
    width:800px;
    margin:50px auto;
    padding: 20px;
    width:50%;
}
#container h2{
    text-align:center;
    color:#045;
}

#quoteContainer{
    width:75%;
    background: #fff;
    padding:10px;
    margin:30px auto;
    text-align: center;
  height:70px;
}
#buttonContainer{
    width: 100%;
    text-align: center;
}
#quoteButton{
    width:200px;
    margin-top: 10px;
    border:2px solid #E8450C;
    color:#045;
    font-family: inherit;
    font-weight: bold;
    padding:5px;
    text-decoration: none;
    text-align: center;
}

#quoteButton:hover{
    cursor:pointer;
    background:#E82B13;
    color: #fff;    
}
#quoteButton:active{
    cursor: pointer;
}
#quoteButton{
    display: inline-block;
}
#quoteGenius{
    font-style: italic;
    font-weight: 600;
    text-align: center;
}


/*MEDIA QUERIES*/
@media screen and(max-width:760px){
    #quoteButton,#addNew{
        display: block;
    }
}

.pass {
    background-color: green;
}

.revision {
    background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
        <h2>Random Student Selection System</h2>
            <div id="quoteContainer">
                <p></p>
                <p id="quoteGenius"></p>            
            </div><!--end quoteContainer-->

            <div id="buttonContainer">
                <a href="#" id="quoteButton">GEN</a>
        </div><!--end buttonContainer-->


    </div><!--end container-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...