当我正在玩我的这个快速创作时。我有两个疑问。
首先是，如何用 IIFE 包装所有 JS 代码而不破坏它。
第二个是如何完成 Twitter 按钮以将事件引用发送到推文中。
"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];
}*,
*: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;
}<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>最佳答案
您应该在 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>关于javascript - Twitter 按钮和 IIFE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42350107/