-
Notifications
You must be signed in to change notification settings - Fork 3
/
ces.html
128 lines (127 loc) · 3.64 KB
/
ces.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta charset="utf-8">
<title>countdowntimer</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<style>
#app {
background:#000000
}
#tools {
background:#000000
}
h1 {
color:#ffffff;
line-height:22.375vw;
font-size: 18.375vw;
}
h3 {
color:#999999;
}
h4 {
color:#ffffff;
}
.btcolor {
color:#FE92BC;
}
</style>
</head>
<body>
<!-- HTML -->
<div id="app" >
<v-app>
<v-main>
<v-container>
<img src="ces_logo.png" alt="CES" width="600px">
<v-row justify="center" align-content="center">
<h1>{{ message }}</h1>
</v-row>
<v-row>
<h3>How to use</h4>
</v-row>
<v-row>
<h4>世紀の瞬間(2022.2.22 22:22:22 JST.)をカウントダウンします。世紀の瞬間がきたらみんなでお祝いしましょう</h4>
</v-row>
<v-row>
<h3>Sound Effect</h4>
</v-row>
<v-row>
<v-col cols="2">
<v-btn @click="sound('hand-clap')" x-large color="#FE92BC" block>
<v-icon color="white" x-large>mdi-hand-wave</v-icon>
</v-btn>
</v-col>
<v-col cols="2">
<v-btn @click="sound('cat')" x-large color="#FE92BC" block>
<v-icon color="white" x-large>mdi-cat</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
<!-- Vue.js を読み込む -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<!-- main関数 -->
<script>
let targetTime = new Date(2022,1,22,22,22,22);//月は-1で指定する
let MESSAGE_TEXT = "a happy new cats century";
let interval = 300; //表示の更新時間（ミリ秒）
let app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
message: '',
soundEffects: {},
},
methods: {
init:function(){
this.countDownTimer();
},
countDownTimer: function() {
//ターゲット時間まで計算
let now = new Date();
let d = targetTime - now;
if (d >= 0) {
this.message = this.format(d);
setTimeout(() => {
this.countDownTimer();
}, interval)//一定間隔で経過時間を表示
return;
} else {
this.message = MESSAGE_TEXT;
}
},
format: function(time) {
//ミリ秒を時刻に変換
const sec=Math.floor(time/1000)%60;
const min=Math.floor(time/1000/60)%60;
const hours=Math.floor(time/1000/60/60)%24;
const days=Math.floor(time/1000/60/60/24);
return days+((days<2)?"day ":"days ")
+((hours<10)?"0"+hours:hours)+":"
+((min<10)?"0"+min:min)+":"
+((sec<10)?"0"+sec:sec);
},
sound: function(key) {
console.log(key);
key = (key == null) ? "cat" : key;
this.soundEffects[key].play();
}
},
mounted : function(){//初期化処理
this.init();
//効果音の設定
this.soundEffects["hand-clap"] = new Audio('se/hand-clap.mp3');
this.soundEffects["cat"] = new Audio('se/cat.mp3');
}
});
</script>
</body>
</html>