Question

虽然我正在玩这个我的快速创作。我有两个疑惑第一个是，如何在不破坏它的情况下用IIFE包装所有JS代码第二个是如何完成twitter的按钮，将活动报价发送到推文中。

＆＃13;

  "use strict";

  var quotes = [
    'Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.',
    'There are things known and things unknown and in between are the doors.',
    'I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.',
    'A friend is someone who gives you total freedom to be yourself.',
    'Where\'s your will to be weird?',
    'Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.',
    'I like people who shake other people up and make them feel uncomfortable.',
    'This is the strangest life I\'ve ever known.',
    'I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.',
    'Whoever controls the media, controls the mind.'
  ];

  function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));

    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
  }

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: 'Barrio', cursive;
  font-size: 62.5%;
  background: url('http://cdn.wallpapersafari.com/11/52/eQLxD8.jpg');
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  text-align: center;
  width: 90%;
}

.title {
  font-size: 4.5em;
}

.image {
   max-width: 100%;
  height: auto;
  border-radius: 20px;
}
.quo {
  background: #fff;
  font-family: 'Comfortaa', cursive;
  font-size: 2.5em;
}

.button {
  background: black;
  color: white;
  padding: 20px;
  border: 5px solid black;
  font-size: 1.2em;
  border-radius: 100px;
}
.button:active {
  background: red;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Barrio" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<body class="container">
  <div class="wrapper">
    
    <h3 class="title">
      Jim Morrison's<br> Quote Machine
    </h3>
    <div>
      <img class="image" src="http://www.thefashionisto.com/wp-content/uploads/2016/04/Jim-Morrison-Style-Picture-Leather-Pants-Suede-Jackets-800x1093.jpg">
    </div>
    <button class="button" onclick="newQuote()">
      Touch me 
    </button>
          <a href="https://twitter.com/intent/tweet?text=yoyo"><button><i class ="fa fa-twitter"></i></button></a>
    <div class="quo" id="quoteDisplay">

    </div>
  </div>
</body>

＆＃13;

Answer 1

您应该在JavaScript中使用事件监听器，而不是内联事件处理程序，如下所示：

(function(d,M){
  var quotes=["Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.","There are things known and things unknown and in between are the doors.","I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.","A friend is someone who gives you total freedom to be yourself.","Where's your will to be weird?","Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.","I like people who shake other people up and make them feel uncomfortable.","This is the strangest life I've ever known.","I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.","Whoever controls the media, controls the mind."],
      len=quotes.length,
      p=d.querySelector("p");
  p.appendChild(d.createTextNode(""));
  d.querySelector("button").addEventListener("click",function(){
    p.firstChild.nodeValue=quotes[M.floor(M.random()*(len))];
  },0);
 })(document,Math);

*{font-family:sans-serif;}

<p></p>
<button>New Quote</button>

ES6版本：

{
  let quotes=["Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.","There are things known and things unknown and in between are the doors.","I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.","A friend is someone who gives you total freedom to be yourself.","Where's your will to be weird?","Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.","I like people who shake other people up and make them feel uncomfortable.","This is the strangest life I've ever known.","I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.","Whoever controls the media, controls the mind."],
      len=quotes.length,
      d=document,
      M=Math,
      p=d.querySelector("p");
  p.append(d.createTextNode(""));
  d.querySelector("button").addEventListener("click",()=>p.firstChild.nodeValue=quotes[M.floor(M.random()*(len))],0);
 }

*{font-family:sans-serif;}

<p></p>
<button>New Quote</button>

Twitter按钮和IIFE

1 个答案: