这里有两个 JavaScript 项目，只要对 JavaScript 有一个大致的了解，你就可以轻松完成。
1.使用颜色选择器更改背景颜色
第一个非常容易制作。因此，该项目是您可以将颜色作为输入并更改背景颜色，在本例中为body标签。输入由颜色选取器通过将标记的 type 属性设置为“颜色”来获取。是的，标记有颜色类型。请参阅以下笔。inputinput
如您所见，首先，我们定义了一个变量来选择作为颜色选择器的标签(类型属性设置为“颜色”的标签会自动创建颜色选择器)。我们定义它是为了获取值，作为将来作为输入给出的颜色。color_pickerinputinput
现在，我们将输入事件侦听器设置为具有函数的输入，这意味着每当给定输入(此处输入表示标记)时，都会触发该函数。changecolor()inputchangecolor()
现在，让我们定义函数。首先，我们将采用语句在输入中选择的颜色，并将其存储在变量中。然后，我们通过语句选择正文标记。基本上获取所有具有已定义标记名称的标记并将其存储到数组中，并且通过使用 之后的 ，我们选择第一个标记名称为“body”的标记。由于整个HTML文档中只有一个“body”标签，我们可以准确地选择body标签，这种方法可能对选择某个标签很有用，但该方法的混乱程度较低。现在，为了方便起见，您可以将 存储在变量中，但这不是强制性的。
changecolor()color_picker.valueselected_colordocument.getElementsByTagName("body")[0]document.getElementsByTagName[0]document.getElementsByTagName("body")document.getElementByIddocument.getElementsByTagName("body")
现在，通过 将变量中存储的所选颜色设置为背景色属性。这是你的第一个项目。selected_colordocument.getElementsByTagName("body")[0].style.backgroundColor = selected_color;
2. 定时器或秒表
现在对于第二个项目，它是计时器或秒表。许多程序员发现制作计时器令人生畏和困惑，但相信我，这是一个很容易制作的项目。这个项目的解释很长，因为如果你没有足够的信息，某些事情会让你担心。首先，请参阅下面的笔并尝试理解代码。
首先，您可以按照自己的喜好制作计时器的布局，但要单独制作每个数字。现在为每个数字提供不同的ID，以便我们可以单独选择每个数字。
现在，通过该方法将所有数字存储在变量中，并且还使用该方法将所有数字存储在变量中。是您用于存储数字的变量的名称，您应该使用，因为 返回一个字符串，并且您无法递增字符串，因此它会将字符串转换为数字，以便我们可以递增它。
document.getElementByIdparseFloat(variable_name_of_the_digit.innerHtml)variable_name_of_the_digitparseFloat.innerHtml
现在创建一个函数来递增秒的第一个数字(右边的数字)。首先，编写语句以递增秒的第一位数字。是用于存储秒的第一个数字的变量名称。变量名称后面的 将递增(向其添加 1)该数字。现在，将秒的第一个数字设置为 。这意味着秒的第一个数字将每秒向上移动 1。
variable_name_of_the_innerHtml_of_the_first_digit_of_seconds++;variable_name_of_the_innerHtml_of_the_first_digit_of_secondsinnerHtml++innerHtmlvariable_name_of_the_innerHtml_of_the_first_digit_of_seconds
现在继续将秒的第一个数字更改为 0，并每隔 10 秒递增秒的第二个数字。我们将首先使用一个语句来检查第二个数字的第一个数字是否为 9。然后在 里面，我们将 设置为 -1。不要将其设置为 0，因为在接下来的一秒中，它将被递增为 1，数字将显示 1 而不是 0，但对于 -1，它将显示 0 而不是 1。
if if variable_name_of_the_innerHtml_of_the_first_digit_of_seconds
接下来，我们将增加秒的第二个数字(左边一个)的值，然后设置第二个数字的值。
variable_name_of_the_innerHtml_of_the_second_digit_of_seconds++innerHtml
现在，要每60秒更改秒0的两位数字，我们将首先使用一个语句，对于语句的条件，我们将传递条件：秒的第一个数字(右边的数字)是9，秒的第二个数字(左边的)是5。然后在语句内部仅设置为-1(再次不要将其设置为0)。没有必要将其设置为第二个数字的第二个数字，因为前面的语句就是这样做的。现在秒机制的功能已经完成。ifififvariable_name_of_the_innerHtml_of_the_second_digit_of_secondsinnerHtmlif
现在，对于分钟的机制，只需复制我们制作的函数几秒钟，并将秒的变量名称更改为分钟，并将函数的名称更改为分钟。现在，该机制的功能就这样完成了。
对于小时，再次只需复制相同的函数，将用于分钟数的变量的名称更改为小时，只需删除将两个数字重置为0的语句，因为计时器中没有天。if
注： 不要更改所有函数中语句的顺序。
现在要启动计时器，只需创建一个按钮并为其提供ID即可。然后创建一个变量以使用方法选择该按钮，然后声明三个变量来存储三个函数，但将这些变量声明到任何函数之外，并且仅声明。我们稍后会将这些变量存储在函数中，用于计时器的启动、停止和重置机制。document.getElementByIdsetIntervalsetInterval
声明这些变量后，只需创建一个函数。在此函数中编写一个语句，条件应该是按钮等于按钮内的文本，当计时器为0时，在我的情况下它是“开始计时器”。然后，在此语句中，使用 初始化要存储三个函数的三个变量，对于第二个函数、分钟函数和小时函数，其中 和 是您只为秒函数、分钟函数和小时函数声明的变量的名称，并且 并且是函数的名称，不带括号，分别表示秒、分钟和小时。然后在当前语句中，将开始，停止和重置按钮设置为当按钮用于停止计时器时所需的文本，然后写入。
if innerHtmlifsetIntervalvariable_name_for_setInterval_of_second_function = setInterval(function_name_for_second, 1000);variable_name_for_setInterval_of_minute_function = setInterval(function_name_for_minute, 60000);variable_name_for_setInterval_of_hour_function = setInterval(function_name_for_hour, 3600000);variable_name_for_setInterval_of_second_functionvariable_name_for_setInterval_of_minute_functionvariable_name_for_setInterval_of_hour_functionsetIntervalfunction_name_for_secondfunction_name_for_minutefunction_name_for_hourifinnerHtmlreturn
然后写另一个语句，其中的条件是按钮等于您想要的文本，当按钮用于停止计时器时，在我的情况下它是“停止计时器”。在此语句中，只需使用 清除前一语句中的三个函数，并分别清除秒、分钟和小时函数。之后，只需将按钮设置为文本，当按钮准备好重置计时器时，您将选择在我的情况下它是“重置计时器”，在此语句之后写入 。
if innerHtmlifsetIntervalifclearInterval(variable_name_for_setInterval_of_second_function)clearInterval(variable_name_for_setInterval_of_minute_function)clearInterval(variable_name_for_setInterval_of_hour_function)setIntervalsetIntervalreturn
现在，对于重置计时器，定义另一个语句，这次的条件是按钮等于您选择的文本，当按钮准备好重置计时器时，该语句只需将所有数字设置为0。ifinnerHtmlif
现在，通过使用 HTML 中的属性或使用 JavaScript 中的 on 按钮，将用于启动、停止和重置计时器的函数添加到按钮中。onclickaddEventListener
注意：在语句末尾书写非常重要，否则，单击按钮时的启动，停止和重置机制将不起作用。
京公网安备 11010802030320号