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

Question

I'm very new to JS and I'm working on a project.我对 JS 很陌生，我正在做一个项目。 This is the website so far ( http://irie.rf.gd/rw/ ) When you click on the equal sign, it generates a random quote.这是目前为止的网站（ http://irie.rf.gd/rw/ ）当你点击等号时，它会生成一个随机报价。

How do I increase the font-size of the quotes and center the text?如何增加引号的字体大小并使文本居中？

I also want the color of the quotes to change every time a new quote is generated but I have no idea how.我还希望每次生成新报价时报价的颜色都会改变，但我不知道如何。 Its an assignment, so if anyone knows how to do this with loops I would appreciate it (I get a higher grade).这是一项作业，所以如果有人知道如何使用循环来做到这一点，我将不胜感激（我得到了更高的成绩）。 Thanks in advance.提前致谢。

 <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\'sa 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\'ma 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

Answer 1

Add this font-size: 30px;添加这个font-size: 30px; to #randomquotegenerater in css:到#randomquotegenerater中的 #randomquotegenerator：

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

To add random color:添加随机颜色：

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

Now, why we multiply it by `16777215` .现在，为什么我们将它乘以`16777215` 。

16777215 is the number that is equal to the white color. 16777215是等于白色的数字。 If you console.log it like this:如果你 console.log 像这样：

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

And if you notice the rgb value of white , you will see it is rgb(255, 255, 255) .如果你注意到white的rgb值，你会看到它是rgb(255, 255, 255) 。 Here of all colors 255 is the max value for all - red, blue, green .这里 colors 255是所有的最大值 - red, blue, green 。

So when we multiply Math.floor(Math.random() * 16777215) with this number will get a number that is less than of white because white is max.因此，当我们将Math.floor(Math.random() * 16777215)与这个数字相乘时，将得到一个小于白色的数字，因为白色是最大的。

Now what does `.toString(16)` do现在`.toString(16)`做了什么

This is a tricky one.这是一个棘手的问题。 toString converts a number to a string. toString将数字转换为字符串。 The 16 here is the base, which can be from 1 to 32.这里的16是基数，可以是 1 到 32。

If you want to know more about number.toString(base) you can read the official ECMAScript documentation below: https://262.ecma-international.org/5.1/#sec-9.8.1如果您想了解有关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\'sa 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\'ma 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>

Answer 2

In your javascript code where you add a new quote, you need to also add code to change the css text-color property of the element as well.在您添加新报价的 javascript 代码中，您还需要添加代码以更改元素的 css 文本颜色属性。 You can use random numbers, which you've used elsewhere in your code.您可以使用在代码中其他地方使用过的随机数。

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

问题描述

2 个解决方案

解决方案1
1 2021-03-23 21:11:56

Now, why we multiply it by `16777215` .现在，为什么我们将它乘以`16777215` 。

Now what does `.toString(16)` do现在`.toString(16)`做了什么

解决方案2
-1 2021-03-23 21:10:57

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

问题描述

2 个解决方案

解决方案1 1 2021-03-23 21:11:56

Now, why we multiply it by 16777215 .现在，为什么我们将它乘以16777215 。

Now what does .toString(16) do现在.toString(16)做了什么

解决方案2 -1 2021-03-23 21:10:57

解决方案1
1 2021-03-23 21:11:56

Now, why we multiply it by `16777215` .现在，为什么我们将它乘以`16777215` 。

Now what does `.toString(16)` do现在`.toString(16)`做了什么

解决方案2
-1 2021-03-23 21:10:57