Skip to content

Instantly share code, notes, and snippets.

@twtjudy1128

twtjudy1128/gist:86f9adb21072c6ffc5f79bb28049872f

Last active August 5, 2020 00:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save twtjudy1128/86f9adb21072c6ffc5f79bb28049872f to your computer and use it in GitHub Desktop.
Save twtjudy1128/86f9adb21072c6ffc5f79bb28049872f to your computer and use it in GitHub Desktop.
Download ZIP
jasonstatham.html
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>Jason Statham非公式ファンクラブ</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
body {
background-color: black;
margin: 50px auto;
}
.card {
display: inline-block;
height: 400px;
}
.card-body btn{
padding:0 100px;
}
h1 {
font-family: Impact;
}
.card img {
height: 100%;
}
iframe {
display: block;
margin: auto;
}
h4 {
color: white;
}
.btn {
font-size:xx-large;
font-weight: bold;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
<div align="center" id="disp" class="alert alert-danger" role="alert">
<h1 >Which<strong> "Jason Statham" </strong>do you like ?</h1>
</div>
<div class="card-group">
<!-- A card -->
<div class="card bg-dark" style="width: 30rem;" v-show="show">
<img v-bind:src="a.imgsrc" class="card-img-top" alt="img-thumbnail" />
<div class="card-body">
<button class="btn btn-lg btn-block btn-danger" v-on:click="clickA()" >Ａ</button>
</div>
</div>
<!-- B card -->
<div class="card bg-dark" style="width: 30rem;" v-show="show">
<img v-bind:src="b.imgsrc" class="card-img-top" alt="img-thumbnail" />
<div class="card-body">
<button class="btn btn-lg btn-block btn-danger" v-on:click="clickB()" >Ｂ</button>
</div>
</div>
</div>
<div class="result" v-show="show2">
<!-- Youtube -->
<iframe width="640" height="360" v-bind:src="movie"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h4><br>{{message}}</h4>
</div>
</div>
<script>
let clickCount = 0;
const app = new Vue({
el: '#app',
data: {
show: true,
show2: false,
message : '',
a: {
imgsrc: '',
movie:'',
resultText:''
},
b: {
imgsrc: '',
movie:'',
resultText:''
},
imgs: [
{//メカニック
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804083430.jpg',
movie: "https://www.youtube.com/embed/CMklQNn0OH0",
resultText: "あなたにオススメな映画は「メカニック」何事も完璧なスマートなステイサムたんが見れるよ！"
},
{//アドレナリン
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804083453.jpg',
movie: "https://www.youtube.com/embed/t2koYVqwzT4",
resultText:"クレイジーなステイサムが気になるあなたには「アドレナリン」がオススメ！!!!ややグロだけど、めちゃ笑えます！"
},
{//ワイスピ
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804083435.jpg',
movie: "https://www.youtube.com/embed/RLIonVLzXuc",
resultText:"あなたには「ワイルドスピードice break」をぜひ見ていただきたい。赤ちゃんをあやすステイサムたんは見物です。"
},
{//リボルバー
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804083501.jpg',
movie: "https://www.youtube.com/embed/kRdIg5rrnxA",
resultText: "髪の毛ふさふさなステイサムたんが気になりますか？「リボルバー」を見てみよう！ステイサムはアクションだけじゃありません。"
},
{//トランスポーター
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200721/20200721184550.jpg',
movie: "https://www.youtube.com/embed/0poXFSvX0_4" ,
resultText:"王道ですね！「トランスポーター」シリーズのステイサムたんはイケメンすぎます。実際も運転は上手いそうです！"
},
{//meg
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804083510.jpg',
movie: "https://www.youtube.com/embed/udm5jUA-2bs",
resultText: "あなたにオススメなのは「meg」です！サメにも臆さないステイサムは必見！"
},
{//spy
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804083457.jpg',
movie: "https://www.youtube.com/embed/YrY3v1eDmQY",
resultText: "強くもかっこよくもないステイサム見たくありませんか？そんなあなたには「SPY」がオススメです！まぁでも、どんなステイサムも結局はかっこいいんですけどね。"
},
{//エクスペンダブルズ
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804202742.jpg',
movie: "https://www.youtube.com/embed/8KtYRALe-xo",
resultText: "傭兵姿にキュンと来たあなたには「エクスペンダブルズ」がオススメ！とにかくずっとかっこいいです！共演者もみんなかっこいいのでお得感あり！"
},
{//パーカー
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804202739.jpg',
movie: "https://www.youtube.com/embed/QGu6InUcdUY",
resultText: "ハット姿が気になるあなたは「PARKER」をご覧ください！強く色っぽいステイサムたん…ハァハァ"
},
{//バトルフロント
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804083444.jpg',
movie:"https://www.youtube.com/embed/JCPew975Qfc",
resultText: "優しい笑顔が気になるあなたにオススメなのが「バトルフロント」ステイサムたんがチェックシャツ！チェックシャツになりたい！子供を守るかっこいいパパです！"
},
{//デスレース
imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804083449.jpg',
movie:"https://www.youtube.com/embed/C8bxcJZrus0",
resultText: "筋肉がお好きなようですね？「デスレース」を見てみましょう。ところどころに筋肉見て見てシーンがあります。私はご褒美タイムと呼んでます。"
},
{//ロックストック
imgsrc: 'https://image.space.rakuten.co.jp/d/strg/ctrl/9/79c9ecddab52ee6d5d6495b7f44c2e727193837b.21.2.9.2.jpeg',
movie:"https://www.youtube.com/embed/FvRKInAK9SA",
resultText: "若かりしステイサムがお好きなようですね？そんなあなたには彼のデビュー作「ロック、ストック＆トゥー・スモーキング・バレルズ」がオススメ！"
},
],
},
async created() {
// 配列をシャッフル
this.imgs.sort(() => Math.random() - 0.5);
// 最初の画像もシャッフルした0と1番目
this.a.imgsrc = this.imgs[0].imgsrc;
this.a.movie = this.imgs[0].movie;
this.a.resultText =this.imgs[0].resultText;
this.b.imgsrc = this.imgs[1].imgsrc;
this.b.movie = this.imgs[1].movie;
this.b.resultText =this.imgs[1].resultText;
// 次に出てくる画像の配列番号
clickCount = 2;
},
methods: {
//Aボタンを押したら、Bの画像を次の画像に切り替え
clickA: function () {
console.log('入れ替える配列番号：' + clickCount);
//ランダムで画像変更
this.b.imgsrc = this.imgs[clickCount].imgsrc;
this.b.movie = this.imgs[clickCount].movie;
this.b.resultText =this.imgs[clickCount].resultText;
clickCount++;
if(clickCount > 11){
this.show = !this.show;
this.show2 = true;
this.movie = this.a.movie;
this.message = this.a.resultText;
}
},
//Bボタンを押したら、Aの画像を次の画像に切り替え
clickB: function () {
console.log('入れ替える配列番号：' + clickCount);
//ランダムで画像変更
this.a.imgsrc = this.imgs[clickCount].imgsrc;
this.a.movie = this.imgs[clickCount].movie;
this.a.resultText =this.imgs[clickCount].resultText;
clickCount++;
if(clickCount > 11){
this.show = !this.show;
this.show2 = true;
this.movie = this.b.movie;
this.message = this.b.resultText;
}
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment