时间戳

首页 > 解决方案 > 如何更改此代码块中的字体大小和字体颜色？

javascript - 如何更改此代码块中的字体大小和字体颜色？

问题描述

我对 JS 很陌生，我正在做一个项目。这是目前为止的网站 ( http://irie.rf.gd/rw/ ) 当您单击等号时，它会生成一个随机报价。

如何增加引号的字体大小并使文本居中？

我还希望每次生成新报价时报价的颜色都会改变，但我不知道如何。这是一项作业，所以如果有人知道如何使用循环来做到这一点，我将不胜感激（我得到了更高的成绩）。提前致谢。

 <script>

            //Shows a dropdown list when selected
            //Clicking this button reveals and hides all four math operators
            //Users can select whichever operator they like

            function selectOperator() {
                var menuList = document.getElementById("menuList")
                document.getElementById("listings").value = menuList.options[menuList.selectedIndex].text;
            }



            //The following quotes will be displayed when the equal sign is clicked.
            var quotes = [
                'Try not to talk in circles. There\'s just no point.', 
                'You clicked on the equal sign. He\'s so humble. He\'s not less than or geater than anyone else.',
                'My dad spent all summer at the beach. He\'s a Tan Gent.',
                'The 2 fours skipped lunch because they already 8, silly!',
                'Ok, so clearly, math just isn\'t your thing. Its ok. No need to cry.',
                'Don\'t feel too bad for parallel lines since they will never meet. They are experts in social distancing.',
                'Check your angles. They weren\'t able to get a loan since their parents won\'t cosine.',
                'Oh I see! Your plants hate math because you told them math will give them square roots.',
                'You keep checking one math book after another. Bad idea. They have their own problems!',
                'This website is like an obtsue triangle. Its never right!',
                'Be wary of anyone with a graph paper. Those people are always plotting something.',
                'Rumor has it that old math teacher of yours has a favorite snake. Its a pi-thon.',
                'Meet my baby twins. Both their names are parabolas and they only drink quadratic formula.',
                'What did one dessert say to the other? I\'m a cute 3.14.',
            ]
            

            //This generates random quotes.
            function nextQuote() {
                var randonNumber = Math.floor(Math.random() * (quotes.length));
                document.getElementById('randomquotegenerater').innerHTML = quotes[randonNumber];
            }
        </script>
body {
    background-color: #eae7dc
}


h1 {
    color: #e85a46;
    text-align: center;
    margin-bottom: 120px;
}


#section1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: 40px;    
}

#randomquotegenerater {
    width: 80%;
    height: 150px;
    background-color: #e98074;
    margin-left: 120px;
    align-items: center;
}

#box1 {
    width: 300px;
    height: 100px;
    border: 1px solid black;
}

#box2 {
    width: 300px;
    height: 100px;
    border: 1 px solid black;
}

#menuList {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    justify-content: center;
}


.dropdownmenu {
    display: inline;
    position: relative;
}


.choices {
    display: none;
    position:absolute;
    background-color: lightgray;
    overflow: auto;
    z-index: 1;
}


#menuList option {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


#quotebutton {
    margin-left: 48%;
    margin-bottom: 20px;
    width: 80px;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Can you solve this?</title>
        <meta charset="UTF-8">
        <meta name="description" content="(This is a useless website">
        <link href="css/style.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <h1>Free online math solutions</h1>

        <div id="section1">
            <div>
                <!--Users can enter any whole number of their choice--> 
                <input type="number" id="box1" name="box1" placeholder="enter a valid integer">
            </div>

            <form class="dropdownmenu">
                <select id="menuList" onchange = "selectOperator()">
                    <option>Select an operator</option>
                    <option class="choices">+</option>
                    <option class="choices">-</option>
                    <option class="choices">x</option>
                    <option class="choices">/</option>
                </select>
            </form>


            <div>
                <!--Users can enter any whole number of their choice--> 
                <input type="number" id="box2" name="box2" placeholder="enter a valid integer">
            </div>
            </div>
      
       

        <button onclick="nextQuote()" id="quotebutton">=</button>
        


        <div id="randomquotegenerater">
            <!--Random quote will show up here-->

        </div>       
    </body>
</htm

标签： javascript

解决方案

将此添加font-size: 30px;到#randomquotegeneratercss 中：

#randomquotegenerater {
  width: 80%;
  height: 150px;
  background-color: #e98074;
  margin-left: 120px;
  align-items: center;
  font-size: 30px;
}

添加随机颜色：

function nextQuote() {
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
  var randonNumber = Math.floor(Math.random() * (quotes.length));
  document.getElementById('randomquotegenerater').innerHTML = `<span style="color:#${randomColor};">${quotes[randonNumber]}</span>`;
}

现在，为什么我们将它乘以16777215.

16777215是等于白色的数字。如果你 console.log 像这样：

console.log((16777215).toString(16)); //ffffff

如果你注意到 的rgb值white，你会发现它是rgb(255, 255, 255)。这里的所有颜色255是所有颜色的最大值 - red, blue, green。

所以当我们乘以Math.floor(Math.random() * 16777215)这个数字会得到一个小于白色的数字，因为白色是最大的。

现在做.toString(16)什么

这是一个棘手的问题。toString将数字转换为字符串。这里16是基数，可以是 1 到 32。

如果您想了解更多信息number.toString(base)，可以阅读下面的官方 ECMAScript 文档：https ://262.ecma-international.org/5.1/#sec-9.8.1

//Shows a dropdown list when selected
//Clicking this button reveals and hides all four math operators
//Users can select whichever operator they like

function selectOperator() {
  var menuList = document.getElementById("menuList")
  document.getElementById("listings").value = menuList.options[menuList.selectedIndex].text;
}


//The following quotes will be displayed when the equal sign is clicked.
var quotes = [
  'Try not to talk in circles. There\'s just no point.',
  'You clicked on the equal sign. He\'s so humble. He\'s not less than or geater than anyone else.',
  'My dad spent all summer at the beach. He\'s a Tan Gent.',
  'The 2 fours skipped lunch because they already 8, silly!',
  'Ok, so clearly, math just isn\'t your thing. Its ok. No need to cry.',
  'Don\'t feel too bad for parallel lines since they will never meet. They are experts in social distancing.',
  'Check your angles. They weren\'t able to get a loan since their parents won\'t cosine.',
  'Oh I see! Your plants hate math because you told them math will give them square roots.',
  'You keep checking one math book after another. Bad idea. They have their own problems!',
  'This website is like an obtsue triangle. Its never right!',
  'Be wary of anyone with a graph paper. Those people are always plotting something.',
  'Rumor has it that old math teacher of yours has a favorite snake. Its a pi-thon.',
  'Meet my baby twins. Both their names are parabolas and they only drink quadratic formula.',
  'What did one dessert say to the other? I\'m a cute 3.14.',
]


//This generates random quotes.
function nextQuote() {
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
  var randonNumber = Math.floor(Math.random() * (quotes.length));
  document.getElementById('randomquotegenerater').innerHTML = `<span style="color:#${randomColor};">${quotes[randonNumber]}</span>`;
}
body {
  background-color: #eae7dc
}

h1 {
  color: #e85a46;
  text-align: center;
  margin-bottom: 120px;
}

#section1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  width: 100%;
  margin-bottom: 40px;
}

#randomquotegenerater {
  width: 80%;
  height: 150px;
  background-color: #e98074;
  margin-left: 120px;
  align-items: center;
  font-size: 30px;
}

#box1 {
  width: 300px;
  height: 100px;
  border: 1px solid black;
}

#box2 {
  width: 300px;
  height: 100px;
  border: 1 px solid black;
}

#menuList {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  justify-content: center;
}

.dropdownmenu {
  display: inline;
  position: relative;
}

.choices {
  display: none;
  position: absolute;
  background-color: lightgray;
  overflow: auto;
  z-index: 1;
}

#menuList option {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#quotebutton {
  margin-left: 48%;
  margin-bottom: 20px;
  width: 80px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Can you solve this?</title>
  <meta charset="UTF-8">
  <meta name="description" content="(This is a useless website">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <h1>Free online math solutions</h1>

  <div id="section1">
    <div>
      <!--Users can enter any whole number of their choice-->
      <input type="number" id="box1" name="box1" placeholder="enter a valid integer">
    </div>

    <form class="dropdownmenu">
      <select id="menuList" onchange="selectOperator()">
        <option>Select an operator</option>
        <option class="choices">+</option>
        <option class="choices">-</option>
        <option class="choices">x</option>
        <option class="choices">/</option>
      </select>
    </form>


    <div>
      <!--Users can enter any whole number of their choice-->
      <input type="number" id="box2" name="box2" placeholder="enter a valid integer">
    </div>
  </div>



  <button onclick="nextQuote()" id="quotebutton">=</button>



  <div id="randomquotegenerater">
    <!--Random quote will show up here-->

  </div>
</body>

</html>

推荐阅读