利用html,js等制作的鸡哥模拟器
首先进行枯燥的剪辑,把声音提取出来,具体方法就不细嗦了,把音频文件存入项目内的文件夹中。
<style>
section{
text-align: center;
}
input[type = 'button']{
font-size: 20px;
padding: 5px 10px;
}
</style>
设置样式,自由发挥,注意放在’head’标签里面
<section>
<input type="button" id="jntm" value="鸡你太美" />
<br>
<input type="button" id="chang" value="唱" />
<input type="button" id="tiao" value="跳" />
<input type="button" id="rap" value="rap" />
<input type="button" id="lanqiu" value="篮球" />
<br>
<input type="button" id="music" value="music" />
<input type="button" id="niganma" value="你干嘛哈哈哟" />
<br>
<input type="button" id="a" value="哎呦~" />
<input type="button" id="haha" value="自我介绍" />
<audio id="jntm1" src="music/鸡你太美.mp3" preload></audio>
<audio id="chang1" src="music/唱.mp3" preload></audio>
<audio id="tiao1" src="music/跳.mp3" preload></audio>
<audio id="rap1" src="music/rap.mp3" preload></audio>
<audio id="lanqiu1" src="music/篮球.mp3" preload></audio>
<audio id="music1" src="music/music.mp3" preload></audio>
<audio id="niganma1" src="music/你干嘛.mp3" preload></audio>
<audio id="a1" src="music/哎呦.mp3" preload></audio>
<audio id="haha1" src="music/自.mp3" preload></audio>
</section>
"input"标签做按钮,基本外形就做好了,"audio"标签可以理解为添加音乐,方便下文调用,这是就用到刚才提取的音频文件了,注意路径要写对哦!
<script>
var jntm = document.getElementById('jntm')
var _jntm = document.getElementById("jntm1")
var chang = document.getElementById('chang')
var _chang = document.getElementById("chang1")
var tiao = document.getElementById('tiao')
var _tiao = document.getElementById("tiao1")
var rap = document.getElementById('rap')
var _rap = document.getElementById("rap1")
var lanqiu = document.getElementById('lanqiu')
var _lanqiu = document.getElementById("lanqiu1")
var music = document.getElementById('music')
var _music = document.getElementById("music1")
var gan = document.getElementById('niganma')
var _gan = document.getElementById("niganma1")
var a = document.getElementById('a')
var _a = document.getElementById("a1")
var haha = document.getElementById('haha')
var _haha = document.getElementById("haha1")
// 鸡你太美
jntm.onclick = function(){
if (_jntm.paused) {
_jntm.play();
} else {
_jntm.pause();
}
}
// 唱
chang.onclick = function(){
if (_chang.paused) {
_chang.play();
} else {
_chang.pause();
}
}
// 跳
tiao.onclick = function(){
if (_tiao.paused) {
_tiao.play();
} else {
_tiao.pause();
}
}
// rap
rap.onclick = function(){
if (_rap.paused) {
_rap.play();
} else {
_rap.pause();
}
}
// 篮球
lanqiu.onclick = function(){
if (_lanqiu.paused) {
_lanqiu.play();
} else {
_lanqiu.pause();
}
}
// music
music.onclick = function(){
if (_music.paused) {
_music.play();
} else {
_music.pause();
}
}
// 你干嘛
gan.onclick = function(){
if (_gan.paused) {
_gan.play();
} else {
_gan.pause();
}
}
// 哎呦
a.onclick = function(){
if (_a.paused) {
_a.play();
} else {
_a.pause();
}
}
//啊哈哈
haha.onclick = function(){
if (_haha.paused) {
_haha.play();
} else {
_haha.pause();
}
}
</script>
js代码放在最后,基本上都是复制粘贴,添加鼠标点击事件
附上完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鸡你太美</title>
<style>
section{
text-align: center;
}
input[type = 'button']{
font-size: 20px;
padding: 5px 10px;
}
</style>
</head>
<body>
<section>
<input type="button" id="jntm" value="鸡你太美" />
<br>
<input type="button" id="chang" value="唱" />
<input type="button" id="tiao" value="跳" />
<input type="button" id="rap" value="rap" />
<input type="button" id="lanqiu" value="篮球" />
<br>
<input type="button" id="music" value="music" />
<input type="button" id="niganma" value="你干嘛哈哈哟" />
<br>
<input type="button" id="a" value="哎呦~" />
<input type="button" id="haha" value="自我介绍" />
<audio id="jntm1" src="music/鸡你太美.mp3" preload></audio>
<audio id="chang1" src="music/唱.mp3" preload></audio>
<audio id="tiao1" src="music/跳.mp3" preload></audio>
<audio id="rap1" src="music/rap.mp3" preload></audio>
<audio id="lanqiu1" src="music/篮球.mp3" preload></audio>
<audio id="music1" src="music/music.mp3" preload></audio>
<audio id="niganma1" src="music/你干嘛.mp3" preload></audio>
<audio id="a1" src="music/哎呦.mp3" preload></audio>
<audio id="haha1" src="music/自.mp3" preload></audio>
</section>
<script>
var jntm = document.getElementById('jntm')
var _jntm = document.getElementById("jntm1")
var chang = document.getElementById('chang')
var _chang = document.getElementById("chang1")
var tiao = document.getElementById('tiao')
var _tiao = document.getElementById("tiao1")
var rap = document.getElementById('rap')
var _rap = document.getElementById("rap1")
var lanqiu = document.getElementById('lanqiu')
var _lanqiu = document.getElementById("lanqiu1")
var music = document.getElementById('music')
var _music = document.getElementById("music1")
var gan = document.getElementById('niganma')
var _gan = document.getElementById("niganma1")
var a = document.getElementById('a')
var _a = document.getElementById("a1")
var haha = document.getElementById('haha')
var _haha = document.getElementById("haha1")
// 鸡你太美
jntm.onclick = function(){
if (_jntm.paused) {
_jntm.play();
} else {
_jntm.pause();
}
}
// 唱
chang.onclick = function(){
if (_chang.paused) {
_chang.play();
} else {
_chang.pause();
}
}
// 跳
tiao.onclick = function(){
if (_tiao.paused) {
_tiao.play();
} else {
_tiao.pause();
}
}
// rap
rap.onclick = function(){
if (_rap.paused) {
_rap.play();
} else {
_rap.pause();
}
}
// 篮球
lanqiu.onclick = function(){
if (_lanqiu.paused) {
_lanqiu.play();
} else {
_lanqiu.pause();
}
}
// music
music.onclick = function(){
if (_music.paused) {
_music.play();
} else {
_music.pause();
}
}
// 你干嘛
gan.onclick = function(){
if (_gan.paused) {
_gan.play();
} else {
_gan.pause();
}
}
// 哎呦
a.onclick = function(){
if (_a.paused) {
_a.play();
} else {
_a.pause();
}
}
//啊哈哈
haha.onclick = function(){
if (_haha.paused) {
_haha.play();
} else {
_haha.pause();
}
}
</script>
</body>
</html>
刚学前端不久拿这个练练手,还望大佬指教