每当我按下“获取故事”或“随机故事”有一个 Flink 的效果，我不知道是什么原因造成的。

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.';
}
?>

这将是真的很好，有一个平稳的过渡之间的故事时，按下按钮，而不是得到 Flink 的效果。
最初，当我按下一个按钮时，它不会 Flink ，但当我再次按下它时，它会在按钮被点击时 Flink 。看起来像是整个div容器在 Flink ，而不是整个页面。
从#story-container中删除display:none可以解决这个问题吗？

更新

我错过了Adyson提供的链接，并尝试了这段代码，它没有任何区别。我正在体验的 Flink 效果似乎是在div容器中，因为这是 Flink / Flink 一秒钟的部分。第二个链接提供的代码仍然导致同样的问题。
这个问题仍然存在于ADYSON提供的最后一个链接的代码中。
我不擅长描述事物，但如果我试着这样描述它。当我按下其中任何一个按钮时，看起来按钮都会“跳跃”，这可能是一个更好的解释。
因此，即使我完全删除了CSS样式，按钮仍然看起来像是在移动。所以我认为问题出在HTML、JavaScript或PHP中，但我只是不知道在哪里。这似乎发生在2个按钮以及文本框。
当你在Adyson网站上测试代码时，你实际上不能显示一个故事，对吗？在第一个故事生成之后，按钮和文本框开始表现得很奇怪，直到我第一次刷新页面并再次按下“随机故事”，然后又重新开始。我自己添加了我的代码到网站上，这就是我得到的https://jsfiddle.net/u6ymhowd/它对我来说是“跳跃”，在我的手机上也在2个屏幕上尝试过，它在任何地方都是一样的。
是的，确实是按下任何一个按钮后立即，然后直到我再次按下任何一个按钮都没事。发生的事情是，按钮向下跳到每个故事的标题所在的位置，然后跳回到它们应该在的位置，直到我再次按下按钮显示下一个故事。关于这个问题，我该如何解决呢？我不介意在故事所在的容器中有一个水平滚动条。

更新

这实际上是可行的，但是否有可能使容器的宽度更小，并有它在屏幕的中心，但添加一个水平滚动条，没有它的行为同样的方式了？

更新

是的，我现在意识到我说错了，我的意思是一个垂直滚动条。这样做的想法是使故事容器与按钮和文本框适合在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>

php 按下按钮时的 Flink 效果

更新

更新

更新

1条答案

相关问题

热门标签

最新问答