2种方法教你轻松完成JavaScript项目
这里有两个 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
注意:在语句末尾书写非常重要,否则,单击按钮时的启动,停止和重置机制将不起作用。