javascript - 我的报价生成器适用于移动设备，但不适用于桌面设备-6ren

javascript - 我的报价生成器适用于移动设备，但不适用于桌面设备

转载作者：行者123 更新时间：2023-11-28 04:39:34

24

4

正如标题所说。我已经完成了 FCC 挑战报价生成器。直到今天早上在所有平台上都运行良好，现在它只在移动设备上运行。不知道是什么原因造成的。任何指针将不胜感激。

Codepen 链接:https://codepen.io/Skitto/pen/dOrXNyHTML

<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <script src="https://use.fontawesome.com/225c9ed469.js"></script>
</head>
<body>
<div class="background outerswag">

 <div class="box">

  <div class="text-center">

      <h2 id="quote"> Welcome to the quote generator, enjoy your stay.</h2>
      <h4 id="author"></h4>


  </div>

  <div class = "text-center">
    <button id = "quoteGETJSON" class = "btn btn-primary btn-lg outline glyphicon glyphicon-repeat" onclick="this.blur();"></button>
    <button id = "tweet" class = "btn btn-primary btn-lg outline fa fa-twitter" onclick="this.blur();"></button>
    <h5>created by Skitto</h5>
    </div>


  </div>
  </div>
</div>
</body>

CSS

    html{
  background:url("https://source.unsplash.com/category/nature/1920x1080")no-repeat center center fixed;

-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.box{
    padding:10%;
    color:white;
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: -100px;
    position: absolute;
    top: 30%;
    width: 100%;

}
.text{
  max-width:50%;
} 
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 10px 16px;
}

.btn-lg {
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

.btn-primary {
  color: white;
  background-color: white;
  border-color: white;
}

.btn-primary:hover,
.open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: grey;
  border-color: grey;
}

/***********************
  OUTLINE BUTTONS
************************/

.btn.outline {
    background: none;
    padding: 12px 22px;
}
.btn-primary.outline {
    border: 2px solid white;
    color: white;
}
.btn-primary.outline:hover, .btn-primary.outline:focus, .open > .dropdown-toggle.btn-primary {
    color: black;
    border-color: black;
}

/***********************
  CUSTON BTN VALUES
************************/

.btn {
    padding: 14px 24px;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn:focus{
    outline: 0 none;
}

Javascript

var authorglobal="";
var quoteglobal="";
$('#quoteGETJSON').click(function() {
  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?")
    .done(update)
    .fail(handleErr);
});


function update(quote) {
  $('#quote').html(JSON.stringify(quote.quoteText));
  quoteglobal=JSON.stringify(quote.quoteText);
  if(quote.quoteAuthor==""){
    $('#author').html('-Unknown');
    authorglobal="-Uknown";
  }else{
    var string="-";
       string+= JSON.stringify(quote.quoteAuthor);
      var returnable=string.replace(/"/g,"");
      authorglobal=returnable;
  $('#author').html(returnable);
  }
 //$('html').css('background', 'url(hre)');
}

function handleErr(jqxhr, textStatus, err) {
  console.log("Request Failed: " + textStatus + ", " + err);
}

$('#tweet').click(function(){
  var url="https://twitter.com/intent/tweet?hashtags=quotes&text="+quoteglobal+authorglobal;

  window.open(url) ;
});

最佳答案

它不起作用的原因是您的代码笔 url 是 https，但您请求的是 http 资源。有 mixed content error

如果您通过 http 打开 codepen，它将工作:http://codepen.io/Skitto/pen/dOrXNy

您应该对所有资源使用相同的协议(protocol)。您还可以指定 url，如:“//google.com”，它将设置与当前页面使用的协议(protocol)相同的协议(protocol)。对于您的情况，它将是:

$.getJSON("//api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?")

但是在你的 codepen 中设置并通过 https 运行它是行不通的，因为 api.forismatic.com 存在证书错误

祝你黑客愉快!

关于javascript - 我的报价生成器适用于移动设备，但不适用于桌面设备，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41283422/

24

4

0

文章推荐： c++ - 将带有数组的结构加载到 SSBO 时会发生什么？

文章推荐： css - 仅更改博客文章的标题大小

文章推荐： javascript - 如何使用URL从xml中获取数据

文章推荐： html - 有什么理由不自己写 HTML 吗？

python - 单例 python 生成器？或者，pickle 一个 python 生成器？
我使用以下代码和嵌套生成器迭代文本文档并使用 get_train_minibatch() 返回训练示例。我想保留( pickle )生成器，这样我就可以回到文本文档中的相同位置。但是，您不能 pick
JavaScript 生成器
在本教程中，您将借助示例了解 JavaScript 生成器。在 JavaScript 中，生成器提供了一种使用函数和迭代器的新方法。使用生成器，您可以从函数内部的任何位置停止执行函数并从
HTML 生成器？
LESS is very cool .我一直想知道是否有任何好的 html 生成器可以让我更轻松地编写表单或做其他事情。除了 html，是否有一些类似的东西？最佳答案已尝试 Haml ？从它的网
PHP中你可能忽略的性能优化利器：生成器
前言如果是做python或者其他语言的小伙伴，对于生成器应该不陌生。但很多php开发者或许都不知道生成器这个功能，可能是因为生成器是php 5.5.0才引入的功能，也可以是生成器作用不是很明显。
日期范围的 F# 生成器？
我正在尝试编写一个使用生成器语法生成日期时间列表的函数: let dateRange = let endDate = System.DateTime.Parse("6/1/2010")
python - 一个类轮通过一个可迭代的(生成器)
我遇到了一些看起来像的代码: [func(val) for val in iterable] 有一个可迭代对象(在我的例子中是一个生成器)，用户想要为其副作用调用每个值的函数(例如 func 可以只是
德尔福 UUID 生成器
Delphi 有内置的东西来生成 UUID 吗？最佳答案 program Guid; {$APPTYPE CONSOLE} uses SysUtils; var Uid: TGuid; Result
JavaScript ES6 生成器
我正在深入研究 javascript 生成器，但我真的很困惑。我使用 node@0.11.x 运行此示例: function find() { process.nextTick(functi
hibernate ID 生成器
有人知道一些关于如何为 hibernate 创建自定义 ID 生成器的好教程吗？最佳答案在 Google 上粗略搜索“hibernate 自定义 id 生成器教程”发现了以下可能性。我排除了那些看
用于并发的 python 生成器
我正在关注 Python 大师 David Beazley 的幻灯片。它指出“生成器也用于并发。这是一个示例: from collections import deque def countdown(
python - 生成器:以固定偏移量预处理事件
我有一个生成事件的生成器，我想用可以从 API 获取的附加元数据来丰富它。某些事件具有与其链接的对象 ID，而其他事件则具有对象的哈希值，但不能同时具有两者。我无法根据哈希获取对象 id，我只能执行
java - 自定义类项列表的循环迭代器/生成器
假设我有一个自定义类: public class CustomClass { private String name; private String data; public
php - MySql "WHERE"生成器
我正在考虑实现一个函数来在 SQL 请求中“构建”WHERE 子句，如下所示: "SELECT * FROM table $where" 使用如下所示的循环构建 $where: $arr=array(
永远返回相同内容的 Python 生成器
我正在寻找执行此操作的标准函数: def Forever(v): while True: yield v 这看起来太琐碎了，我不敢相信没有标准版本。就此而言，有人知道指向所有标准生成器函
支持多浏览器的 CSS 生成器
我知道这个网站上有几个非常相似的相关问题，但是在看了这部剧之后，我相信这个问题本身就是独一无二的。如果有人能找到并提供证据证明我的问题完全被骗了，我会自己撤回它(所以请不要否决这个!)。我是 Jav
C++ 生成器 TtcpClient
void __fastcall TForm1::Button1Click(TObject *Sender) { int size = MemoEnter->GetTextLen() + 1;
Python ctypes 生成器
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Python 生成器 - 改变最后的结果？
我试图在我的生成器的以下两个定义之间做出决定。哪个更好？哪个“更像 python ”？无论如何，有没有办法减轻每一个的缺点？ def myGenerator1(howMany): result
要列出的 Python 生成器
我有一个 Python 生成器 lexg，它在每次迭代时生成一个列表。该代码似乎在传统的 for 循环意义上工作，即 for i in lexg(2,2): print(i) 产生: [2, 0] [
返回一系列时间的 Python 生成器
我希望这不会超出 Python 生成器的能力，但我想构建一个这样，每次调用该函数时，它都会返回下一分钟直到结束时间。因此该函数读取开始时间和结束时间，并以分钟为单位返回时间，直到涵盖其间的所有时间。

首页

博学

6Ren·AI

商城

javascript - 我的报价生成器适用于移动设备，但不适用于桌面设备