-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (87 loc) · 2.53 KB
/
index.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
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"></script>
<script type="text/javascript">
$(function () {
var colors = ["red", "green", "lime", "orange", "blue", "cyan", "violet", "brown", "aqua", "pink", "purple", "yellow",
"#4AFF00", "#4D084B", "#FF3800", "#CD071E", "#FF0800", "#004225"];
var funs = [];
function act(e){
var color = Math.floor(Math.random() * colors.length);
var target = $(e.target);
var audio = target.find("audio")[0];
var i = target.data("index");
target.css("background-color", colors[color]);
audio.currentTime = 0;
if(audio.paused){
audio.play()
}
if(funs[i]){
clearTimeout(funs[i]);
}
funs[i] = setTimeout(function(){ funs[i] = null; target.css("background-color", "transparent"); audio.pause(); }, 3000);
}
$(".square").each(function(i, e) {
$(e).data("index", i).height($(e).width()).css("line-height", ($(e).width() - 2) + "px").tapstart(act);
});
});
</script>
<style type="text/css">
.btn{
width: 20%;
border: 5px solid gray;
float: left;
margin: 10px;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
}
.cow{
background-image: url('img/cow.png');
background-size: 120% 90%
}
.cat{
background-image: url('img/cat.png');
background-size: 120% 95%
}
.dog{
background-image: url('img/dog.png');
background-size: 120% 120%
}
.goat{
background-image: url('img/goat.png');
background-size: 100% 100%
}
.hen{
background-image: url('img/hen.png');
background-size: 90% 100%
}
.sheep{
background-image: url('img/sheep.png');
background-size: 95% 95%
}
.duck{
background-image: url('img/duck.png');
background-size: 95% 95%
}
.cock{
background-image: url('img/cock.png');
background-size: 110% 110%
}
</style>
</head>
<body>
<div class="btn square cow"><audio src="sound/cow.mp3" /></div>
<div class="btn square cat"><audio src="sound/cat.mp3" /></div>
<div class="btn square dog"><audio src="sound/dog.mp3" /></div>
<div class="btn square cock"><audio src="sound/cock.mp3" /></div>
<div class="btn square sheep"><audio src="sound/sheep.mp3"/></div>
<div class="btn square hen"><audio src="sound/hen.mp3"/></div>
<div class="btn square duck"><audio src="sound/duck.mp3"/></div>
<div class="btn square goat"><audio src="sound/goat.mp3"/></div>
</body>
</html>