Javascript 如何让我的随机生成器输出特定网站背景上的特定结果_Javascript_Html_Css

Javascript 如何让我的随机生成器输出特定网站背景上的特定结果

javascript html css

Javascript 如何让我的随机生成器输出特定网站背景上的特定结果,javascript,html,css,Javascript,Html,Css,我是网络编程新手，希望能创建一个系统，随机选择哪些学生进行背包修订最近，一名学生威胁要枪杀学校，距离那次事件已经一个月了，所以学校没有对所有学生进行搜索，而是决定将其完全随机，所以我决定创建一个这样做的网页然而，老年人会使用它，尽管我整理了一些代码，但如果需要修改，我想将网站背景设置为红色，如果随机算法的结果等于通过，则设置为绿色以下是我目前的代码： HTML: 我上周才开始学这个。提前谢谢。关于。基本上，首先在CSS中可以创建两个类，比如.pass{background color:

我是网络编程新手，希望能创建一个系统，随机选择哪些学生进行背包修订最近，一名学生威胁要枪杀学校，距离那次事件已经一个月了，所以学校没有对所有学生进行搜索，而是决定将其完全随机，所以我决定创建一个这样做的网页

然而，老年人会使用它，尽管我整理了一些代码，但如果需要修改，我想将网站背景设置为红色，如果随机算法的结果等于通过，则设置为绿色

以下是我目前的代码：

HTML:

我上周才开始学这个。提前谢谢。

关于。

基本上，首先在CSS中可以创建两个类，比如

.pass{background color:green；}

和

.revision{background color:red；}

，然后在javascript中，测试随机生成器的结果，如果结果是“pass”，那么将class

.pass

添加到

元素中，另一方面，如果是“revision”，则将类

.revision

添加到

元素中

下面是对代码的修改以实现这一点：（运行代码片段）

$（文档）.ready（函数（）{
var报价来源=[
{
引用：“通行证”，
姓名：“通行证”
},
{
引述：“修订”，
名称：“修订版”
},
];
$（“#quoteButton”）。单击（函数（evt）{
//定义我们目标信息的容器
var quote=$（'#quoteContainer p'）.text（）；
var quoteGenius=$（'#quoteGenius'）.text（）；
//阻止浏览器的默认操作
evt.preventDefault（）；
//获取要附加到报价的新随机数并设置限制
var sourceLength=quoteSource.length；
var randomNumber=Math.floor（Math.random（）*sourceLength）；
//设定新报价
对于（i=0；i
在这里，你去你的完整代码和编辑
<!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>


身体{
字体系列：“Roboto”，无衬线；
颜色：#000；
}
#容器{
宽度：800px；
保证金：50px自动；
填充：20px；
宽度：50%；
}
#容器h2{
文本对齐：居中；
颜色：#045；
}
#引用容器{
宽度：75%；
背景：#fff；
填充：10px；
保证金：30像素自动；
文本对齐：居中；
高度：70像素；
}
#钮扣容器{
宽度：100%；
文本对齐：居中；
}
#报价按钮{
宽度：200px；
边缘顶部：10px；
边框：2个实心#E8450C；
颜色：#045；
字体家族：继承；
字体大小：粗体；
填充物：5px；
文字装饰：无；
文本对齐：居中；
}
#quoteButton:悬停{
光标：指针；
背景:"E82B13,；
颜色：#fff；
}
#quoteButton：活动{
光标：指针；
}
#报价按钮{
显示：内联块；
}
#格特涅乌斯{
字体：斜体；
字号：600；
文本对齐：居中；
}
/*媒体查询*/
@媒体屏幕和屏幕（最大宽度：760像素）{
#quoteButton，添加新的{
显示：块；
}
}
文件
随机学生甄选制度


$（文档）.ready（函数（）{
var报价来源=[
{
引用：“通行证”，
姓名：“通行证”
},
{
引述：“修订”，
名称：“修订版”
},
];
$（“#quoteButton”）。单击（函数（evt）{
//定义我们目标信息的容器
var quote=$（'#quoteContainer p'）.text（）；
var quoteGenius=$（'#quoteGenius'）.text（）；
//阻止浏览器的默认操作
evt.preventDefault（）；
//获取要附加到报价的新随机数并设置限制
var sourceLength=quoteSource.length；
var randomNumber=Math.floor（Math.random（）*sourceLength）；
//设定新报价
对于（i=0；i您的意思是什么，何时“修订到期”？如果数据在服务器上更新，则应立即反映在客户端上。太棒了，很高兴我能提供帮助！：）如果它解决了您的问题，您介意将其标记为已接受的答案吗？（答案左侧的复选标记），谢谢！：）
    $(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


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;
    }
}

<!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>