2021-11-11

最新推荐文章于 2024-08-22 14:32:34 发布

隔壁老王爱串门

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量386

点赞数 1

本文链接：https://blog.csdn.net/m0_55921379/article/details/121266425

版权

javascript

利用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>

刚学前端不久拿这个练练手，还望大佬指教

隔壁老王爱串门

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
2021-11-11

利用html，js等制作的鸡哥模拟器首先进行枯燥的剪辑，把声音提取出来，具体方法就不细嗦了，把音频文件存入项目内的文件夹中。<style> section{ text-align: center; } input[type = 'button']{ font-size: 20px; padding: 5px 10px; }</style>设置样式，自由发挥，注意放在’head’标签里面<section> <input type="b
复制链接

扫一扫