【问题标题】:How to I do add a function as a variable into a link url as a tweet for twitter?如何将函数作为变量添加到链接 url 作为 twitter 的推文?
【发布时间】:2023-04-04 12:40:01
【问题描述】:

好的,所以我制作了一个运行良好的随机报价生成器。我现在想获取随机生成的报价并将其设为推文。我知道如何使文本成为推文。我的问题是使用生成随机报价的函数并将其添加到推文的 url 中,这是我的代码:

       <h1>Random Quote Generator</h1>
              <p>Star Wars Quotes</p>
               <button class="btn btn-default" type="submit">New Quote</button>            <div class="row">
       <div class="quote-box col-md-6 col-md-offset-3">
         <p class="quote">"Placeholder Quote"</p>
         <p class="author">Placheolder Author</p>
         <a onclick="getTweet();" href="#" target="_blank"><img src="http://www.iconsplace.com/icons/preview/yellow/twitter-2-256.png" alt="twitter logo"> Use the Force to Tweet</a>
       </div><!--quote-box-->
    </div><!--row-->


    $(document).ready(function() { //random quote works fine
       function pickQuote() {
          var quotes = ["It's a trap!", "Mmm. Lost a planet, Master Obi-Wan has. How embarrassing.", "I find your lack of faith disturbing"];
          var author = ["-Admiral Akbar", "-Yoda", "-Darth Vader"];

          var randomNum = Math.floor((Math.random() * quotes.length));

          var randomQuote = quotes[randomNum];

          var randomAuthor = author[randomNum];

        $(".quote").text(randomQuote);
        $(".author").text(randomAuthor);
      }

      $(".btn").on("click", function() {
         pickQuote();
      });

  //this is where the tweet magic is supposed to happen
  var a = pickQuote();
  function getTweet(){
      return "http://twitter.com/home/?status=" + a;
  }


});

任何帮助将不胜感激。

【问题讨论】:

    标签: javascript jquery html twitter hyperlink


    【解决方案1】:

            var pickQuote = function () {
           	   var quotes = ["It's a trap!", "Mmm. Lost a planet, Master Obi-Wan has. How embarrassing.", "I find your lack of faith disturbing"];
               var author = ["-Admiral Akbar", "-Yoda", "-Darth Vader"];
    
               var randomNum = Math.floor((Math.random() * quotes.length));
    
               var randomQuote = quotes[randomNum];
    
               var randomAuthor = author[randomNum];
    
               $(".quote").text(randomQuote);
               $(".author").text(randomAuthor);
               return randomQuote + " " + randomAuthor;
           }
    
           
           var getTweet = function () {
           	   var a = pickQuote();
               var url = "http://twitter.com/home/?status=" + a;
               console.log(url);
               return url;
           }
           
           $(document).ready(function() { 
           	  $(".btn").on("click", function () {
           		 pickQuote();
              });
           });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="row">
           <div class="quote-box col-md-6 col-md-offset-3">
             <p class="quote">Placeholder Quote </p>
             <p class="author">Placheolder Author </p>
             <a onclick="getTweet();" href="#" ><img src="http://www.iconsplace.com/icons/preview/yellow/twitter-2-256.png" alt="twitter logo"> Use the Force to Tweet</a>
           </div><!--quote-box-->
        </div><!--row-->

    【讨论】:

    • 谢谢,但也许我应该添加更多的 html。按钮(.btn)随机化引号,并在带有引号框的 html 之前的 html 中再次检查顶部的 html 我在该 div 之前的行中添加,以便您可以获得清晰的图片
    【解决方案2】:

    .button {
        background-color: white;
        color: black;
        border: 2px solid #555555;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        -webkit-transition-duration: 0.4s;
        /* Safari */
    
        transition-duration: 0.4s;
        cursor: pointer;
        height: 30%;
        vertical-align: top;text-align: left;
    }
    .button:hover {
        background-color: #555555;
        color: white;
    }
    #grid {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #ffffff;
        display: flex;
        flex: 1;
    }
    #gridli {
        width: 24%;
        margin-left: 0.5%;
        margin-right: 0.5%;
    }
       <head>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
            </head>
          
            <body>
     
    
    <ul id="grid">
       <li id="gridli">
          <form action="http://google.com">
             <button class="button" type="submit"  />
             Computers, printers, mobile phones and the widgets that accompany them account for the emission of about two per cent of the estimated total of emissions from human activity. And that is the same as the aviation industry&#8217;s contribution. 25 per cent of the emissions in question are generated by the manufacture of computers. The rest come from their use.
             </button>
          </form>
       </li>
       <li  id="gridli">
          <form action="http://google.com" style="float: left">
             <button class="button" type="submit"  />
             Computers can be used to reduce emissions produced by other industries, up to 7.8 billion tonnes by 2020, or five times ICT&#8217;s own footprint. Computers can make industries more efficient and less wasteful of power and fuel.
             </button>
          </form>
       </li>
       <li   id="gridli">
          <form action="http://google.com" style="float: left">
             <button class="button" type="submit"  />
             The use of computers has led to both positive and negative impacts on the climate change of our planet. Computers can help make some processes more efficient and save energy while the use and manufacture of computers contributes to the increased use of energy which leads to global warming. This website helps you to look at the positives and negatives of computing and climate change.</p>
             </button>
          </form>
       </li>
       <li   id="gridli">
          <form action="http://google.com" style="float: left">
             <button class="button" type="submit"  />
                <h3> Saving Energy</h3>
                There are many ways in which computers can help cut down on our use of energy. Computers are steadily improving the amount of energy that they use with the smaller computers producing less CO2 than larger desktop computers.
             </button>
          </form>
       </li>
    </ul>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-05-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-10-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多