Question

我想制作一个html按钮，当您向下滚动并单击该按钮时，该按钮会显示一个随机的博客帖子。

我有代码可以使您在向下滚动时显示它，并为显示随机帖子的按钮编写代码。但是我不知道如何使它们一起工作。

这是我的滚动按钮代码，下面是随机邮政编码。我不知道如何将其集成到TopFunction中。

非常感谢您的帮助和见解！

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>

<button onclick="topFunction()" id="myBtn"></button>

<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, show random post
function topFunction() {


}
</script>

随机发布

<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'RANDOM POST'; document.getElementById('myBtn').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=feelingLucky">
</script>

Answer 1

我不知道下面是否正确。为了正确地帮助您，我们需要知道代码的来源。您需要详细解释您尝试过的内容。

以下可能有用：我添加了一个<div>，当单击按钮时，其中应该包含随机帖子。内容可以根据需要设置样式。

请注意路径/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky。这是硬编码的，并且JS脚本在其中更改了一些单词。这需要与您自己的文件夹结构相同（和代码中的相同）。

我还清理了一下您的代码...始终对脚本使用id，对于CSS样式始终使用class。

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, show random post
function topFunction() {
//Why is this empty?
};

function showLucky(root) {
  var feed = root.feed;
  var entries = feed.entry || [];
  var entry = feed.entry[0];
  for (var j = 0; j < entry.link.length; ++j) {
    if (entry.link[j].rel == 'alternate') {
      window.location = entry.link[j].href;
    }
  }
};

function fetchLuck(luck) {
  script = document.createElement('script');
  script.src = '/feeds/posts/summary?start-index=' + luck + '&max-results=1&alt=json-in-script&callback=showLucky';
  script.type = 'text/javascript';
  document.getElementsByTagName('randompost')[0].appendChild(script);
}

function feelingLucky(root) {
  var feed = root.feed;
  var total = parseInt(feed.openSearch$totalResults.$t, 10);
  var luckyNumber = Math.floor(Math.random() * total);
  luckyNumber++;
  a = document.createElement('a');
  a.href = '#random';
  a.rel = luckyNumber;
  a.onclick = function() {
    fetchLuck(this.rel);
  };
  a.innerHTML = 'RANDOM POST';
  document.getElementById('myBtn').appendChild(a);
};

.myBtn {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

.myBtn:hover {
  background-color: #555;
}

.myDiv {
  width: 50%;
  height: auto;
  background: rgba(255,0,0,0.5);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="showLucky()" id="myBtn" class="myBtn">Try me</button>

<div class="myDiv" id="randompost" >
  <script src="/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=feelingLucky">
  </script>
  Something here...
</div>

如何将脚本集成到HTML函数中？

1 个答案: