jsp编写乘法表_乘法图表-使用JavaScript编写自己的时间表

最新推荐文章于 2022-09-10 07:52:03 发布

cumifi2519

最新推荐文章于 2022-09-10 07:52:03 发布

阅读量400

点赞数

文章标签： java python javascript c++ 游戏 ViewUI

原文链接：https://www.freecodecamp.org/news/multiplication-chart-code-your-own-times-table-using-javascript/

版权

jsp编写乘法表

Learning your times tables is an essential skill and it's a basic part of any math education. A multiplication chart is a handy tool that turns tedious memorization into a fun, logical exercise.

学习时间表是一项基本技能，也是任何数学教育的基本组成部分。 乘法图表是一种方便的工具，可以将繁琐的记忆转换为有趣的逻辑练习。

The chart shows the products of two numbers. Usually, one set of numbers (1-9) is written in the left column, and the other set on the top row. This forms two sides of a visual square. Their products fill the rest of that square. Looking similar to this:

图表显示了两个数字的乘积。通常，一组数字(1-9)写在左列，另一组数字写在第一行。这形成了视觉方块的两侧。他们的产品填补了该广场的其余部分。看起来与此类似：

1个

The visual nature of such a tool enhances learning by using the concept of areas. 2 x 3 equals the number 6 as well as the area of a rectangle with one side of 2 and another of 3.

这种工具的视觉本质通过使用区域概念来增强学习。 2×3等于6的数量以及矩形的具有2一侧和另一3的区域。

There are endless ways of presenting the styling and functionality for multiplication charts. Every author will add their special something. In this article, I'll share one way of designing and writing such a chart.

有无数种方式来表示乘法图表的样式和功能。每个作者都会添加他们的特别之处。在本文中，我将分享设计和编写这种图表的一种方法。

There is one important detail I must mention before getting to the chart description. The blocks of code embedded throughout this article may not be related to each other in any way.

在进入图表说明之前，我必须提到一个重要的细节。本文中嵌入的代码块可能不会以任何方式相互关联。

However, behind the scenes they are placed inside a single <body> element per article. Therefore, make sure you employ id and class attributes that are unique to each block. Otherwise, a class or an id with the shared name across two or more blocks may interfere and negatively affect style and functionality.

但是，在幕后，它们被放置在每篇文章的单个<body>元素内。因此，请确保使用每个块唯一的 id和class属性。否则，在两个或两个以上块中具有共享名称的类或ID可能会干扰并负面影响样式和功能。

如何建立乘法图表 (How to Build a Multiplication Chart)

The HTML part is a modified version of a Roman Numeral Chart. The basic building block is a button. You can also use a general div, but I found the button to be more responsive.

HTML部分是罗马数字图表的修改版本。基本构建块是一个按钮。您也可以使用一般div ，但我发现按钮的响应速度更快。

Buttons are first placed into rows, which in turn are placed into the flex-container.

首先将按钮放入行中，然后将其放入flex容器中。

<div class='flex-table'> 
	<h2 class='table-title'>Multiplication Table</h2> 
    	<div class='table-row'> 
    		<button class='item header'>1</button> 
		<button class='item core' onmouseover='onePlay()'>1</button> 
        	<button class='item core' onmouseover='twoPlay()'>2</button> 
        	<button class='item core' onmouseover='threePlay()'>3</button> 
		.......................................................... 
              	..........................................................
    	</div>
    	 <div class='table-row'> 				       
                ..........................................................
                ..........................................................
        </div>
                ............................................................. 
     <div>

The architecture or element used does not have to be unique, and you can add your own original touch. I applied styling and media queries to allow for comfortable viewing on various devices.

所使用的体系结构或元素不必是唯一的，您可以添加自己的原始风格。我应用样式和媒体查询以允许在各种设备上舒适地查看。

/* Mobile phones */
    @media screen and (max-width: 767px){
       .flex-table {
          transform: scale(0.60);
       }
    }
    /* Tablets and iPads */
    @media screen and (min-width: 768px) and (max-width: 1023px){
       .flex-table {
          transform: scale(0.8);
       }
    }

The visual effects are achieved through CSS. I decided to introduce audio elements using JavaScript. I was glad to find out this editor supported it.

视觉效果是通过CSS实现的。我决定使用JavaScript来介绍音频元素。我很高兴发现这个编辑器支持它。

Each button representing a result of multiplication is wired to a function. A function returns an audio element that plays a sound file unique to that element. A click event serves as a trigger, calling that function.

代表乘法结果的每个按钮都连接到一个功能。函数返回一个音频元素，该音频元素播放该元素唯一的声音文件。点击事件用作触发，调用该函数。

Template literals are not supported here. Thus every function call had to be hard wired into elements and defined individually.

此处不支持模板文字。因此，每个函数调用必须硬连接到元素中并分别定义。

<script>
  
function onePlay() {
  const one = 
  new Audio('https://evolution.voxeo.com/library/audio/prompts/numbers/1.wav')
  one.currentTime = 0
  one.play()
}
function twoPlay() {
  const two = 
  new Audio('https://evolution.voxeo.com/library/audio/prompts/numbers/2.wav')
  two.currentTime = 0
  two.play()
}
   ...............................................................
   ................................................................
   
   </script>

Many thanks to the specialists who created this sound library and maintain it. The complete code can be found as a Github repo by clicking here.

非常感谢创建此声音库并进行维护的专家。单击此处，可以找到完整的代码作为Github存储库。

乘法图。悬停并单击 (Multiplication Chart. Hover and Click)

如何建立乘法游戏 (How to Build a Multiplication Game)

Since practice is the best way to learn and multiplication is no exception, I decided to write a little game, which you can see below.

由于练习是最好的学习方法，乘法也不例外，所以我决定写一个小游戏，您可以在下面看到。

输入答案，然后单击提交 (Enter your answer and click Submit )

( )

正确： (Correct: )

不正确： (Incorrect: )

In the top left window, there is a challenge question. Next to it is an input element that takes an answer. Clicking on the Submit button evaluates that answer and outputs the message indicating if it is correct.

在左上方的窗口中，有一个质询问题。它旁边是一个输入元素，用于回答问题。单击“提交”按钮将评估该答案，并输出指示正确的消息。

Correct answers are added to the green "Correct answers" counter, while Incorrect answers are added to the red one next to it.

正确答案将添加到绿色的“正确答案”计数器中，而错误答案将添加到旁边的红色计数器中。

Once the answer is evaluated, a new challenge question is generated using a random number generator and the cycle repeats. After ten question cycles are over, the game stops and the final result is displayed, accompanied by playing a sound file.

一旦评估了答案，就会使用随机数生成器生成一个新的挑战问题，并重复该循环。十个问题循环结束后，游戏将停止并显示最终结果，同时播放声音文件。

Pressing the Restart button begins a new ten question game. Pressing the Submit button without inputting an answer triggers a warning message and sound.

按下重新启动按钮开始一个新的十问游戏。在没有输入答案的情况下按下“提交”按钮将触发警告消息和声音。

You can easily change the visual design and location of elements within the limitations of the editor. Also, the logic employed here can be applied in designing other games as well. For example, Multiplication can be changed to Movie Trivia and plenty more.

您可以在编辑器的限制范围内轻松更改元素的视觉设计和位置。同样，此处采用的逻辑也可以应用于设计其他游戏。例如，乘法可以更改为Movie Trivia等等。

The Complete code with comments can be accessed as a Github repo by clicking here.

点击此处，可以将带有注释的完整代码作为Github存储库进行访问。