html第三天之音乐盒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>音乐盒</title>
		<style type="text/css">
		p{color: #39c5bb;font-size: 26px;font-weight: bold;}
		h1{color: red;font-size: 50px;}
		#c{color: deepskyblue;font-size: 26px;font-weight: bold;}
		p,h1{line-height: 300%;}
		body{ background-image:url(img/1.png); background-size: 100%; background-attachment: fixed;}
		</style>
		<script language="JavaScript">
			var a = 0;
			function demo()
			{
				//判断a是否<20000
				if(a<20000)
					{
						//如果是则a=a+1
						a++;
						//滚动条的坐标(x,y)
						scrollTo(0,a);
						//多久执行一次("执行的函数",时间/毫秒)
						setTimeout("demo()",50);
					}	
			}
			demo();	
		</script>
		//这里的音乐源文件写自己的
		<bgsound src="music/明天,你好.MP3"></bgsound>
	</head>
	<body style="text-align: center;">
		<h1>明天,你好</h1>
<p style="color: green;">作词:王海涛</p>
<p style="color: green;">作曲:牛奶咖啡</p>
<p style="color: green;">编曲:格非口琴:彭坦</p>
<p style="color: green;">箱琴:格非</p>
<p style="color: green;">合声:富妍kiki</p>
<p id="c">看昨天的我们走远了</p>
<p>在命运广场中央等待</p>
<p id="c">那模糊的肩膀</p>
<p>越奔跑越渺小</p>
<p id="c">曾经并肩往前的伙伴</p>
<p>在举杯祝福后都走散</p>
<p id="c">只是那个夜晚</p>
<p>我深深的都留藏在心坎</p>
<p id="c">长大以后我只能奔跑</p>
<p>我多害怕黑暗中跌倒</p>
<p id="c">明天你好含着泪微笑</p>
<p>越美好越害怕得到</p>
<p id="c">每一次哭又笑着奔跑</p>
<p>一边失去一边在寻找</p>
<p id="c">明天你好声音多渺小</p>
<p>却提醒我勇敢是什么</p>
<p id="c">当我朝着反方向走去</p>
<p>在楼梯的角落找勇气</p>
<p id="c">抖着肩膀哭泣</p>
<p>问自己在哪里</p>
<p id="c">曾经并肩往前的伙伴</p>
<p>沉默着懂得我的委屈</p>
<p id="c">时间它总说谎</p>
<p>我从不曾失去那些肩膀</p>
<p id="c">长大以后我只能奔跑</p>
<p>我多害怕黑暗中跌倒</p>
<p id="c">明天你好含着泪微笑</p>
<p>越美好越害怕得到</p>
<p id="c">每一次哭又笑着奔跑</p>
<p>一边失去一边在寻找</p>
<p id="c">明天你好声音多渺小</p>
<p>却提醒我</p>
<p id="c">长大以后我只能奔跑</p>
<p>我多害怕黑暗中跌倒</p>
<p id="c">明天你好含着泪微笑</p>
<p>越美好越害怕得到</p>
<p id="c">每一次哭又笑着奔跑</p>
<p>一边失去一边在寻找</p>
<p id="c">明天你好声音多渺小</p>
<p>却提醒我勇敢是什么</p>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 HTML/CSS 音乐盒子模型代码示例: HTML 代码: ```html <div class="music-box"> <div class="controls"> <button class="play-btn">Play</button> <button class="pause-btn">Pause</button> </div> <audio src="music.mp3"></audio> </div> ``` CSS 代码: ```css .music-box { width: 300px; height: 100px; background-color: #f2f2f2; border: 1px solid #ccc; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .controls { margin-right: 10px; } button { background-color: #4CAF50; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; } button:hover { background-color: #3e8e41; } audio { display: none; } ``` 解释: - `.music-box` 定义音乐盒子的样式,包括背景颜色、边框、圆角、居中等。 - `.controls` 定义控制按钮的样式,包括向右对齐等。 - `button` 定义按钮的样式,包括背景颜色、边框、圆角等。 - `audio` 定义音乐文件的样式,设置为不可见。 JavaScript 代码: ```javascript const playBtn = document.querySelector('.play-btn'); const pauseBtn = document.querySelector('.pause-btn'); const audio = document.querySelector('audio'); playBtn.addEventListener('click', () => { audio.play(); }); pauseBtn.addEventListener('click', () => { audio.pause(); }); ``` 解释: - `const playBtn = document.querySelector('.play-btn');` 获取 Play 按钮的元素。 - `const pauseBtn = document.querySelector('.pause-btn');` 获取 Pause 按钮的元素。 - `const audio = document.querySelector('audio');` 获取音乐文件的元素。 - `playBtn.addEventListener('click', () => { audio.play(); });` 给 Play 按钮添加点击事件,点击后播放音乐。 - `pauseBtn.addEventListener('click', () => { audio.pause(); });` 给 Pause 按钮添加点击事件,点击后暂停音乐。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值