使用 JavaScript 的动态按钮 UI onclick

第三天

#100daysofmiva 编码挑战已经过去三天了。 ???

今天，我没有在后端做任何事情。我需要加强我的前端技能。我将使用 javascript 进行简单的按钮用户体验设计。您是否曾经在任何网站或应用程序上提交过表单，而不仅仅是等待响应，您可以看到这些精美的文本在您单击的按钮上发生变化。

这就是我今天要编码的内容。走吧！???

我们将使用基本的 html 和动态 js 开发客户端（也称为前端）。

立即学习“Java免费学习笔记（深入）”；

超文本标记语言

对于 html，我编写了一个带有一个输入和一个提交按钮的基本表单。

<div>    <h2>button ui</h2>    <div id="message"></div>     <form id="linkform" onsubmit="submitform(event)">          <label for="rand_word">enter random word</label>             <input type="text" id="rand_word" name="rand_word" placeholder="e.g what is life?" required><button type="submit" id="submitbutton">submit</button>     </form></div>

此表单是一个简单的 html 结构，允许用户输入随机单词并提交。以下是每个元素的细分：

1.

3.

4.

属性：

5. 输入随机词

6.

属性：

7. submit

属性：

html 概要

javascript

<!-- JavaScript Code -->    <script>      function submitForm(event) {          event.preventDefault(); // Prevent the form from submitting the default way    const formData = new FormData(document.getElementById('linkForm'));           const submitButton = document.getElementById('submitButton');            const message = document.getElementById('message');            const randWord = formData.get('rand_word'); // Get the value of the rand_word field    let dotCount = 0;            const updateDots = () => {                dotCount = (dotCount + 1) % 4;                   return '.'.repeat(dotCount);           };    const baseMessages = [                   "Submitting",                   "Still working on it",                   "Hold on",                   "Almost done"            ];    submitButton.innerText = `${baseMessages[0]}${updateDots()}`;            submitButton.classList.add('submitting');            submitButton.disabled = true;            message.style.display = 'none'; // Hide the message box initially        // Generate a random delay between 1 and 10 seconds        const delay = Math.floor(Math.random() * 9000) + 1000;        if (delay > 2000) {                    let messageIndex = 0;                                    const messageInterval = setInterval(() => {                            submitButton.innerText = `${baseMessages[messageIndex]}${updateDots()}`;                              if (dotCount === 0) {                                  messageIndex = (messageIndex + 1) % baseMessages.length;                              }                        }, 500);   // Clear the interval after the delay to stop the loop                        setTimeout(() => clearInterval(messageInterval), delay - 500);                    }        // Simulate a wait time of random delay                setTimeout(() => {            message.innerText = 'You typed: ' + randWord; // Show the submitted data in the message box                    message.style.display = 'block';            submitButton.innerText = 'Submitted';                        submitButton.classList.remove('submitting');                        submitButton.classList.add('submitted');            // Reset the button state after 2 seconds                        setTimeout(() => {                submitButton.innerText = 'Submit';                            submitButton.classList.remove('submitted');                submitButton.disabled = false;                        }, 4000);            document.getElementById('linkForm').reset(); // Reset the form fields                    }, delay); // Wait for the random delay before showing the message                }</script>

此 javascript 代码处理表单提交过程，通过使用动画点和更改消息模拟动态等待期来提供增强的用户体验。

下面是结果

作为后端开发人员，我遇到的唯一问题是让点动画化。这花了一段时间，但我能够克服它。我期待着明天的编码??

点击此处预览最终结果 https://app.marvelly.com.ng/100daysofmiva/day-3/