首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 按下按钮时闪烁效果

每当我按下"获取故事"或"随机故事"时，就会有一个闪烁的效果，我不确定是什么导致了这一现象.

HTML:个

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Story Fetcher</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Stories</h1>
    </header>
    <main>
        <div id="content-wrapper">
            <div id="get-container">
                <input type="text" id="story-number" placeholder="Enter story number">
                <button id="get" type="button">Get Story</button>
                <button id="getRandom" type="button">Random Story</button>
            </div>
            <div id="story-container">
                <!-- Story content will be displayed here -->
                <div id="generated-text"></div>
                <button id="clear">Clear</button>
            </div>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

CSS:个

        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #ff6600;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        h1 {
            font-size: 28px;
            margin: 0;
        }

        main {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 80vh;
        }

        #content-wrapper {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            max-width: 100%;
            text-align: center;
            margin: 20px;
            overflow-x: hidden;
        }

        #story-number {
            padding: 10px 16px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 200px;
            height: 30px;
            margin-bottom: 10px;
        }

        #get-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #get, #getRandom, #clear {
            background-color: #ff6600;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s ease;
            margin-bottom: 10px;
            outline: none; /* Remove focus outline */
        }

        #story-container {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            max-width: 100%;
            text-align: center;
            display: none;
        }

        #generated-text {
            font-size: 18px;
            line-height: 1.5;
            margin-bottom: 10px;
            color: #333;
            text-align: center;
        }

        #generated-text span {
            font-weight: bold;
            color: #000;
            font-size: 20px;
        }

        #clear {
            display: block;
            margin: 10px auto;
        }

        @media (min-width: 601px) {
            #content-wrapper {
                max-width: 600px;
                max-height: 40vh;
            }
        }

        @media (max-width: 600px) {
            #get, #clear {
                font-size: 10px !important;
                padding: 20px 20px !important;
            }
        }

Javascript个

document.addEventListener('DOMContentLoaded', function () {
    var totalStories = 3;
    var currentStory = null;
    var storyContainer = document.getElementById('story-container');

    function clearStoryContainer() {
        if (storyContainer) {
            storyContainer.style.display = 'none';
            var generatedTextElement = document.getElementById('generated-text');
            if (generatedTextElement) {
                generatedTextElement.innerHTML = '';
            }
            var contentWrapper = document.getElementById('content-wrapper');
            if (contentWrapper) {
                contentWrapper.style.marginTop = '0';
            }
            currentStory = null;
        }
    }

    function fetchStory(storyNumber) {
        clearStoryContainer();
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'fetch.php?story=' + storyNumber, true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                if (storyContainer) {
                    storyContainer.style.display = 'block';
                    var generatedText = xhr.responseText;
                    var generatedTextElement = document.getElementById('generated-text');
                    if (generatedTextElement) {
                        generatedTextElement.innerHTML = parseAndStyleTitles(generatedText);
                    } else {
                        console.log('Generated text element not found.');
                    }
                    var contentWrapper = document.getElementById('content-wrapper');
                    if (contentWrapper) {
                        contentWrapper.style.marginTop = '60px';
                    } else {
                        console.log('Content wrapper element not found.');
                    }
                    currentStory = storyNumber;
                } else {
                    console.log('Story container element not found.');
                }
            } else {
                console.log('Error fetching story. Status code: ' + xhr.status);
                clearStoryContainer();
                displayErrorMessage('Error fetching story.');
            }
        };
        xhr.onerror = function () {
            console.log('Network error while fetching story.');
            clearStoryContainer();
            displayErrorMessage('Network error while fetching story.');
        };
        xhr.send();
    }

    function displayErrorMessage(errorMessage) {
        if (storyContainer) {
            storyContainer.style.display = 'block';
        }
        var generatedTextElement = document.getElementById('generated-text');
        if (generatedTextElement) {
            generatedTextElement.innerHTML = errorMessage;
        }
        var contentWrapper = document.getElementById('content-wrapper');
        if (contentWrapper) {
            contentWrapper.style.marginTop = '60px';
        }
        currentStory = null;
    }

    function parseAndStyleTitles(text) {
        return text.replace(/\[\[(.*?)\]\]/g, function (match, title) {
            return '<span>' + title + '</span>';
        });
    }

    document.getElementById('get').addEventListener('click', function () {
        var storyNumber = parseInt(document.getElementById('story-number').value);

        if (!isNaN(storyNumber) && storyNumber >= 1 && storyNumber <= totalStories) {
            fetchStory(storyNumber);
        } else {
            displayErrorMessage('Please enter a valid number between 1 and ' + totalStories + '.');
        }
    });

    document.getElementById('getRandom').addEventListener('click', function () {
        var randomStoryNumber = Math.floor(Math.random() * totalStories) + 1;
        fetchStory(randomStoryNumber);
    });

    document.getElementById('clear').addEventListener('click', function () {
        clearStoryContainer();
    });
});

PHP个

<?php
// Read the requested story number from the URL parameter
$storyNumber = $_GET['story'];

// Check if the story number is valid (e.g., within the range of available stories)
$totalStories = 3; // Update this to match the actual total number of stories

if ($storyNumber >= 1 && $storyNumber <= $totalStories) {
    // Read the content of stories.txt
    $storiesFile = file_get_contents('stories.txt');

    // Split the content into stories based on the unique delimiter (<!-- Unique delimiter separating stories -->)
    $stories = preg_split('/<!-- Unique delimiter separating stories -->/', $storiesFile);

    // Get the requested story
    $requestedStory = trim($stories[$storyNumber - 1]); // Adjust the array index

    // Replace newline characters with <br> tags for line breaks
    $formattedStory = nl2br($requestedStory);

    // Return the formatted story as a response
    echo $formattedStory;
} else {
    // Return an error message if the story number is invalid
    echo 'Error: Invalid story number.';
}
?>

如果在按下按钮时故事之间能有一个平滑的过渡，而不是得到闪烁的效果，那就真的很好了.所以如果有人能帮我，我会非常感激的！

最初当我按下一个按钮时，它不会闪烁，但当我再次按下它时，它一被点击就会闪烁.它看起来像是整个div容器在闪烁，而不是整个页面.

从#story-container中go 掉display:none就能解决这个问题吗？

我错过了ADyson提供的链接，并try 了这段代码，结果一点也没有不同.我正在经历的闪烁效果似乎在div容器中，因为这是闪烁/闪烁一秒钟的部分.代码提供的第二个链接仍然会导致相同的问题.

问题仍然存在于Adyson提供的最后一个链接的代码中.

我不擅长描述事物，但如果我试着这样描述它.看起来，当我按下任何一个按钮时，这些按钮都会" skip "，这可能是一个更好的解释.

因此，即使我完全删除了CSS样式，按钮仍然看起来像是在四处移动.所以我认为问题出在HTML语言、JAVASSCRIPT或PHP语言中，但我不知道在哪里.这两个按钮和文本框似乎都会发生这种情况.

当你在ADYSON网站上测试代码时，你实际上不能显示一个故事，对吗？在生成第一个故事之后，按钮和文本框开始变得奇怪，直到我刷新页面并再次按下"随机故事"，然后它又重新开始了.我自己把我的代码添加到网站上，这就是我得到的https://jsfiddle.net/u6ymhowd/它对我来说是" skip "的，在我的手机上也try 了两个屏幕，它在任何地方都是一样的.

是的，确实是在任何一个按钮被按下之后，那么在我再次按下任何按钮之前，它都是可以的.发生的情况是，按钮向下跳到每个故事的标题所在的位置，然后向上跳到它们应该在的位置，直到我再次按下按钮以显示下一个故事.关于调整大小的问题，我如何解决这个问题？我不介意在故事所在的容器中有一个水平滚动条.

这确实奏效了，但有没有可能将容器的宽度变小，使其位于屏幕的中心，但添加一个水平滚动条，而不再以相同的方式运行？

是的，我现在意识到我说错了，我看到了一个垂直的滚动条.这样做的 idea 是，当我流媒体时，使带有按钮和文本框的故事容器适合StreamLabs OBS窗口，因为我计划为此进行频道点兑换.

这似乎解决了问题，现在看起来效果真的很好.谢谢你的帮助！:)

推荐答案

问题源于这样一个事实，即具有白色背景的页面的主要区域根据其内容调整大小-因此，当您显示一篇文章时，它会扩展，当您再次清除它时，它会收缩，当您从一篇文章切换到另一篇文章时，它可能会调整得更大或更小.

这是因为它没有固定的高度或宽度，并且在页面中垂直和水平居中，所以当它改变大小时，它必须调整自己的位置和其中东西的位置，以保持中心位置.还有显示和隐藏内容区域以及更改页边距等的JS代码，这也无济于事.

从讨论中可以看出，您似乎希望通过移除垂直居中位置来克服这一问题，但在垂直轴上设置最大高度和滚动条，以保持内容区域的固定大小.

此演示(仅使用一些随机端点数据)展示了如何使用CSS实现这一点:

document.addEventListener('DOMContentLoaded', function() {
  var totalStories = 3;
  var currentStory = null;
  var storyContainer = document.getElementById('story-container');

  function clearStoryContainer() {
    if (storyContainer) {
      storyContainer.style.display = 'none';
      var generatedTextElement = document.getElementById('generated-text');
      if (generatedTextElement) {
        generatedTextElement.innerHTML = '';
      }
      var contentWrapper = document.getElementById('content-wrapper');
      if (contentWrapper) {
        //contentWrapper.style.marginTop = '0';
      }
      currentStory = null;
    }
  }

  function fetchStory(storyNumber) {
   var stories = [
     "6525421912a5d3765989cff3",
     "6525469d54105e766fc05f92",
     "652546bd12a5d3765989d1a7"
   ];
    //clearStoryContainer();
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.jsonbin.io/v3/b/' + stories[storyNumber-1], true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        if (storyContainer) {
          storyContainer.style.display = 'block';
          var generatedText = xhr.responseText;
          var generatedTextElement = document.getElementById('generated-text');
          if (generatedTextElement) {
            generatedTextElement.innerHTML = parseAndStyleTitles(generatedText);
          } else {
            console.log('Generated text element not found.');
          }
          var contentWrapper = document.getElementById('content-wrapper');
          if (contentWrapper) {
            //contentWrapper.style.marginTop = '60px';
          } else {
            console.log('Content wrapper element not found.');
          }
          currentStory = storyNumber;
        } else {
          console.log('Story container element not found.');
        }
      } else {
        console.log('Error fetching story. Status code: ' + xhr.status);
        clearStoryContainer();
        displayErrorMessage('Error fetching story.');
      }
    };
    xhr.onerror = function() {
      console.log('Network error while fetching story.');
      clearStoryContainer();
      displayErrorMessage('Network error while fetching story.');
    };
    xhr.send();
  }

  function displayErrorMessage(errorMessage) {
    if (storyContainer) {
      storyContainer.style.display = 'block';
    }
    var generatedTextElement = document.getElementById('generated-text');
    if (generatedTextElement) {
      generatedTextElement.innerHTML = errorMessage;
    }
    var contentWrapper = document.getElementById('content-wrapper');
    if (contentWrapper) {
      //contentWrapper.style.marginTop = '60px';
    }
    currentStory = null;
  }

  function parseAndStyleTitles(text) {
    return text.replace(/\[\[(.*?)\]\]/g, function(match, title) {
      return '<span>' + title + '</span>';
    });
  }

  document.getElementById('get').addEventListener('click', function() {
    var storyNumber = parseInt(document.getElementById('story-number').value);

    if (!isNaN(storyNumber) && storyNumber >= 1 && storyNumber <= totalStories) {
      fetchStory(storyNumber);
    } else {
      displayErrorMessage('Please enter a valid number between 1 and ' + totalStories + '.');
    }
  });

  document.getElementById('getRandom').addEventListener('click', function() {
    var randomStoryNumber = Math.floor(Math.random() * totalStories) + 1;
    fetchStory(randomStoryNumber);
  });

  document.getElementById('clear').addEventListener('click', function() {
    clearStoryContainer();
  });
});
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

header {
  background-color: #ff6600;
  color: #fff;
  padding: 20px;
  text-align: center;
}

h1 {
  font-size: 28px;
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;*/
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  max-height: 300px;
  overflow-y: auto;
}

#content-wrapper {
  padding: 20px;
  max-width: 100%;
  text-align: center;
  margin: 20px;
  overflow-x: hidden;
}

#story-number {
  padding: 10px 16px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
  height: 30px;
  margin-bottom: 10px;
}

#get-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#get,
#getRandom,
#clear {
  background-color: #ff6600;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  margin-bottom: 10px;
  outline: none;
  /* Remove focus outline */
}

#story-container {
  background-color: #fff;
  text-align: center;
  display: none;
}

#generated-text {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #333;
  text-align: center;
}

#generated-text span {
  font-weight: bold;
  color: #000;
  font-size: 20px;
}

#clear {
  display: block;
  margin: 10px auto;
}

@media (min-width: 601px) {
  #content-wrapper {
/*    max-width: 600px;
    max-height: 40vh;*/
  }
}

@media (max-width: 600px) {

  #get,
  #clear {
    font-size: 10px !important;
    padding: 20px 20px !important;
  }
}
    <header>
      <h1>Stories</h1>
    </header>
    <main>
      <div id="content-wrapper">
        <div id="get-container">
          <input type="text" id="story-number" placeholder="Enter story number">
          <button id="get" type="button">Get Story</button>
          <button id="getRandom" type="button">Random Story</button>
        </div>
        <div id="story-container">
          <!-- Story content will be displayed here -->
          <div id="generated-text"></div>
          <button id="clear">Clear</button>
        </div>
      </div>
    </main>

Javascript相关问答推荐

在NextJS中使用计时器循环逐个打开手风琴项目？

脚本.js：3：20未捕获的类型错误：无法读取空的属性(读取addEventHandler)

创建1：1比例元素，以另一个元素为中心

可以的.是否可以在不预编译的情况下使用嵌套 Select 器？

通过使用100%间隔时间来代表我们还剩多少时间来倒计时

Chart.js V4切换图表中的每个条，同时每个条下有不同的标签.怎么做？

在Angular中将样式应用于innerHTML

使搜索栏更改语言

为什么我的列表直到下一次提交才更新值/onChange

使用useEffect，axios和useParams进行react测试

更改JSON中使用AJAX返回的图像的路径

如何在 cypress 中使用静态嵌套循环

JS—删除对象数组中对象的子对象

为什么我的导航条打开状态没有在窗口addeventlistener(Reaction Js)中更新？

环境值在.js文件/Next.js中不起作用

Cherrio JS返回父div的所有图像SRC

使用CEPRESS截取时，cy.Wait()在等待5000ms的第一个路由请求时超时

在Java脚本中构建接口的对象

使用Perl Selify：：Remote：：Driver执行Java脚本时出错

计算对象数组中属性的滚动增量

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630