app开发定制618快到了送上自制前端小项目（html css js）

目录

🚩

🏠

✨

🎃

 前言：这些app开发定制小项目全都是自创的。

app开发定制如果需要应用，app开发定制或则转发的话请与

博主联系，感谢你们的理解，

 

1.自定义播放器

在页面中放置26个div，每个div中写一个字

母。html结构中引入8个音频结构。给每个

div绑定点击。根据键盘的每个

的不同来动态绑定对应的音频文件。

当按下对应的键盘字母，增添css样式，

音频播放。放开时，存储点击的事件，

将对应的音频存储在一个数组中。

点击按钮，循环播放存储的音频数组

html:

  1.  <div id="container">   
  2.         <div data-key="81" class="key">
  3.             <kbd>Q</kbd>
  4.             <span class="sound">clap</span>
  5.         </div>
  6.         <div data-key="87" class="key">
  7.             <kbd>W</kbd>
  8.             <span class="sound">clap</span>
  9.         </div>
  10.         <div data-key="69" class="key">
  11.             <kbd>E</kbd>
  12.             <span class="sound">clap</span>
  13.         </div>
  14.         <div data-key="82" class="key">
  15.             <kbd>R</kbd>
  16.             <span class="sound">clap</span>
  17.         </div>
  18.         <div data-key="84" class="key">
  19.             <kbd>T</kbd>
  20.             <span class="sound">clap</span>
  21.         </div>
  22.         <div data-key="89" class="key">
  23.             <kbd>Y</kbd>
  24.             <span class="sound">clap</span>
  25.         </div>
  26.         <div data-key="85" class="key">
  27.             <kbd>U</kbd>
  28.             <span class="sound">clap</span>
  29.         </div>
  30.         <div data-key="73" class="key">
  31.             <kbd>I</kbd>
  32.             <span class="sound">clap</span>
  33.         </div>
  34.         <div data-key="79" class="key">
  35.             <kbd>O</kbd>
  36.             <span class="sound">clap</span>
  37.         </div>
  38.         <div data-key="80" class="key">
  39.             <kbd>P</kbd>
  40.             <span class="sound">clap</span>
  41.         </div>
  42.         <div data-key="65" class="key">
  43.             <kbd>A</kbd>
  44.             <span class="sound">clap</span>
  45.         </div>
  46.         <div data-key="83" class="key">
  47.             <kbd>S</kbd>
  48.             <span class="sound">clap</span>
  49.         </div>
  50.         <div data-key="68" class="key">
  51.             <kbd>D</kbd>
  52.             <span class="sound">clap</span>
  53.         </div>
  54.         <div data-key="70" class="key">
  55.             <kbd>F</kbd>
  56.             <span class="sound">clap</span>
  57.         </div>
  58.         <div data-key="71" class="key">
  59.             <kbd>G</kbd>
  60.             <span class="sound">clap</span>
  61.         </div>
  62.         <div data-key="72" class="key">
  63.             <kbd>H</kbd>
  64.             <span class="sound">clap</span>
  65.         </div>
  66.         <div data-key="74" class="key">
  67.             <kbd>J</kbd>
  68.             <span class="sound">clap</span>
  69.         </div>
  70.         <div data-key="75" class="key">
  71.             <kbd>K</kbd>
  72.             <span class="sound">clap</span>
  73.         </div>
  74.         <div data-key="76" class="key">
  75.             <kbd>L</kbd>
  76.             <span class="sound">clap</span>
  77.         </div>
  78.         <div data-key="90" class="key">
  79.             <kbd>Z</kbd>
  80.             <span class="sound">clap</span>
  81.         </div>
  82.         <div data-key="88" class="key">
  83.             <kbd>X</kbd>
  84.             <span class="sound">clap</span>
  85.         </div>
  86.         <div data-key="67" class="key">
  87.             <kbd>C</kbd>
  88.             <span class="sound">clap</span>
  89.         </div>
  90.         <div data-key="86" class="key">
  91.             <kbd>V</kbd>
  92.             <span class="sound">clap</span>
  93.         </div>
  94.         <div data-key="66" class="key">
  95.             <kbd>B</kbd>
  96.             <span class="sound">clap</span>
  97.         </div>
  98.         <div data-key="78" class="key">
  99.             <kbd>N</kbd>
  100.             <span class="sound">clap</span>
  101.         </div>
  102.         <div data-key="77" class="key">
  103.             <kbd>M</kbd>
  104.             <span class="sound">clap</span>
  105.         </div>
  106.     </div>
  107.     <div id='btn'>提交数据</div>
  108.     <audio data-key="81" src="sounds/clap.wav"></audio>
  109.   <audio data-key="87" src="sounds/hihat.wav"></audio>
  110.   <audio data-key="69" src="sounds/kick.wav"></audio>
  111.   <audio data-key="82" src="sounds/openhat.wav"></audio>
  112.   <audio data-key="84" src="sounds/boom.wav"></audio>
  113.   <audio data-key="89" src="sounds/ride.wav"></audio>
  114.   <audio data-key="85" src="sounds/snare.wav"></audio>
  115.   <audio data-key="73" src="sounds/tom.wav"></audio>
  116.   <audio data-key="79" src="sounds/tink.wav"></audio>
  117.   <audio data-key="80" src="sounds/clap.wav"></audio>
  118.   <audio data-key="83" src="sounds/hihat.wav"></audio>
  119.   <audio data-key="68" src="sounds/kick.wav"></audio>
  120.   <audio data-key="65" src="sounds/openhat.wav"></audio>
  121.   <audio data-key="71" src="sounds/boom.wav"></audio>
  122.   <audio data-key="72" src="sounds/ride.wav"></audio>
  123.   <audio data-key="74" src="sounds/snare.wav"></audio>
  124.   <audio data-key="75" src="sounds/tom.wav"></audio>
  125.   <audio data-key="76" src="sounds/tink.wav"></audio>
  126.   <audio data-key="70" src="sounds/clap.wav"></audio>
  127.   <audio data-key="90" src="sounds/hihat.wav"></audio>
  128.   <audio data-key="88" src="sounds/kick.wav"></audio>
  129.   <audio data-key="67" src="sounds/openhat.wav"></audio>
  130.   <audio data-key="86" src="sounds/openhat.wav"></audio>
  131.   <audio data-key="66" src="sounds/boom.wav"></audio>
  132.   <audio data-key="78" src="sounds/ride.wav"></audio>
  133.   <audio data-key="77" src="sounds/snare.wav"></audio>

css:

  1. *{
  2.     margin:0;
  3.     padding:0;
  4. }
  5. .top{
  6.     width:100%;
  7.     height:100px;
  8. }
  9. .top i{
  10.     font-size: 24px;
  11. }
  12. .top-left{
  13.     width:20%;
  14.     height:100%;
  15.     float:left;
  16.     text-align: center;
  17.     line-height: 100px;
  18.     position: relative;
  19. }
  20. .top-left .cls5{
  21.     position: absolute;
  22.     left:40px;
  23. }
  24. .top-middle{
  25.     width:50%;
  26.     height:100%;
  27.     float:left;
  28.     text-align: center;
  29.     line-height: 100px;
  30.     position:relative;
  31. }
  32. .top-middle .cls1{
  33.     position: absolute;
  34.     left:30px;
  35. }
  36. .top-middle .cls2{
  37.     position: absolute;
  38.     left:60px;
  39. }
  40. .top-middle .cls3{
  41.     position: absolute;
  42.     right:500px;
  43. }
  44. .top-middle .container{
  45.     width:300px;
  46.     height:40px;
  47.     border:1px solid whitesmoke;
  48.     border-radius: 10px;
  49.    position:absolute;
  50.    left:100px;
  51.    top:30px;
  52.    text-align: center;
  53.    line-height: 40px;
  54. }
  55. .top-middle .container .cls4{
  56.     position: absolute;
  57.     left:20px;
  58. }
  59. .top-right{
  60.     width:30%;
  61.     height:100%;
  62.     float:right;
  63. }
  64. .top-right ul{
  65.     list-style: none;
  66.     text-align: center;
  67.     height:100px;
  68.     line-height:100px ;
  69. }
  70. .top-right ul li{
  71.     float:right;
  72.     margin:0 20px 0 20px;
  73. }
  74.  
  75.  
  76.  
  77. .bottom{
  78.     width:100%;
  79.     height:100px;
  80.     margin-top:710px;
  81. }
  82. .bottom i{
  83.     font-size: 24px;
  84. }
  85. .bottom-left{
  86.     width:20%;
  87.     height:100px;
  88.     line-height: 100px;
  89.     float:left;
  90.     text-align: center;
  91. }
  92. .bottom-left ul{
  93.     list-style: none;
  94. }
  95. .bottom-left ul li{
  96.     float:left;
  97.     margin:0 30px 0 30px;
  98. }
  99.  
  100. .bottom-mid{
  101.     width:50%;
  102.     height:100px;
  103.     line-height: 100px;
  104.     float:left;
  105. }
  106. .bottom-mid ul{
  107.     list-style: none;
  108. }
  109. .bottom-mid ul li{
  110.     float:left;
  111.     margin: auto 50px;
  112. }
  113. .bot-mid-top{
  114.     width:100%;
  115.     height:60px;
  116.     text-align: center;
  117.     line-height: 50px;
  118. }
  119. .bot-mid-top .clf1{
  120.     margin-left:250px;
  121. }
  122. .bot-mid-bot{
  123.     width:100%;
  124.     height:40px;
  125.     line-height: 40px;
  126. }
  127. .bot-mid-bot .item{
  128.     width:80%;
  129.     border:1px solid #333;
  130.     border-radius: 3px;
  131.     height:9px;
  132.     
  133.     margin-top:12px;
  134.     margin-left:100px;
  135. }
  136. .bottom-right{
  137.     width:30%;
  138.     height:100px;
  139.     line-height: 100px;
  140.     float:left;
  141. }
  142. .bottom-right ul{
  143.     list-style: none;
  144. }
  145. .bottom-right ul li{
  146.     float:left;
  147.     margin:0 30px 0 30px;
  148. }
  149. .bottom-right ul .clf2{
  150.     margin-left:200px;
  151. }

js:

  1. let audioArr = []
  2.  
  3.  
  4. function removeClass(e) {
  5.     let  key = document.querySelector(`div[data-key="${e.keyCode}`)
  6.     let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  7.     key.classList.remove('playing')
  8.     audioArr.push(audio)
  9. }
  10.  
  11. function playAudio(e) {
  12.     let  key = document.querySelector(`div[data-key="${e.keyCode}`)
  13.    let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  14.     key.classList.add('playing')
  15.     //audio.currentTime = 0; // 每次播放之后都使音频播放进度归零
  16.     if (!audio) return;
  17.     audio.play()
  18. }
  19.  
  20. window.addEventListener('keydown', e => playAudio(e))
  21. window.addEventListener('keyup', e => removeClass(e))
  22.  
  23. const btn = document.getElementById('btn')
  24.  
  25.  function Play() {
  26.   const self=this
  27.   const item1=setInterval(function(){
  28.     self.i++
  29.     console.log(self.i)
  30.     audioArr[self.i-2].play()
  31.     if(self.i>audioArr.length){
  32.       clearInterval(item1)
  33.     }
  34.   }, 200);
  35. }
  36.  
  37. let obj={
  38.    i:1
  39. }
  40.  
  41. function bind(){
  42.   Play.call(obj)
  43. }
  44. btn.addEventListener("click",bind)

2.图片自动消失

一张图片，在其右上角放置一个div

，分别得到那个元素，在div中插入数字

开启一个定时器，每隔一段时间减一。

直到为0.图片消失

  1. <style>
  2. .ad{
  3. 	width:400px;
  4. 	height:400px;
  5. 	background-image: url(img/1.jpg);
  6. 	position:relative;
  7. 	margin:200px auto;
  8. }
  9. #sj{
  10. 	display:block;
  11. 	width:40px;
  12. 	height:40px;
  13. 	line-height:30px;
  14. 	border-radius:50%;
  15. 	border:1px solid red;
  16. 	position:absolute;
  17. 	top:20px;
  18. 	right:20px;
  19. 	text-decoration: none;
  20. 	text-align: center;
  21. 	line-height: 40px;
  22. 	font-size: 20px;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. 	<div id="gg" class="ad">
  28. 		<a href="" > <span id="sj">5</span></a>
  29. 	</div>
  30. <script>
  31. var gg=document.getElementById("gg");
  32. var sj=document.getElementById("sj")
  33. var time=setInterval(function(){
  34. 	sj.innerHTML-=1;
  35. 	if(sj.innerHTML==0){
  36. 		gg.style.display="none";
  37. 		clearInterval(time);
  38. 	}
  39. },1000);
  40. </script>
  41. </body>

yy3.小

放置三张图片，移动到那个图片，

改变他的偏移量。

  1. *{
  2. 	padding:0;
  3. 	margin:0;
  4. 	}
  5. body,html{
  6. 	width:100%;
  7. 	 overflow:hidden;
  8. 	}
  9. #wrap1{
  10. 	width:100%;
  11. 	position:absolute;
  12. 	bottom:0;
  13. 	left:0;
  14. 	text-align: center;
  15. 	}
  16. #wrap1>img{
  17. 	width:64px;
  18. 	}
  19. </style>
  20. </head>
  21. <body>
  22. 	<div id="wrap1">
  23. 		<img src="img/1.png" />
  24. 		<img src="img/2.png" />
  25. 		<img src="img/3.png" />
  26. 		<img src="img/4.png" />
  27. 		<img src="img/5.png" />
  28. 	</div>
  29. <script type="text/javascript">
  30. 	window.onload=function(){
  31. 		var r=320
  32. 		var imgNodes=document.querySelectorAll("#wrap1>img")
  33. 		document.onmousemove=function(ev){
  34. 		ev=ev||event
  35. 		for(var i=0;i<imgNodes.length;i++){
  36. var a= imgNodes[i].getBoundingClientRect().top+imgNodes[i].offsetHeight/2-ev.clientY
  37. var b= imgNodes[i].getBoundingClientRect().right+ imgNodes[i].offsetWidth/2-ev.clientX
  38. 	var c=Math.sqrt(a*a+b*b)
  39. 			if(c>=r){
  40. 					c=r
  41. 					}
  42. 				 imgNodes[i].style.width=128-c*0.2+'px'
  43. 					}
  44. 				}
  45. 			}
  46. </script>

4.旋转音乐盒

放置六张图片，将他们绝对定位。

根据所学css来对每一张图片进行定位

然后就是当点击哪一个图片时，播放

对应的音频音乐。

css：

  1. *{
  2. 	padding:0;
  3. 	margin:0;
  4. }
  5. .cube{
  6. 	width:200px;
  7. 	height:200px;
  8. 	position: relative;	
  9. 	margin:200px auto;
  10.    //使效果呈现3d效果		
  11. 	transform-style: preserve-3d;
  12. 	animation: rotate 30s infinite linear;
  13. 	}
  14. @keyframes rotate{
  15. 	from{
  16.        transform:rotateX(0deg) rotateY(0deg);
  17.         }
  18.     to{
  19.        transform: rotateX(360deg) rotateY(360deg);
  20.         }
  21. }
  22. html{
  23.    //屏幕与我们的视距
  24. 	perspective: 10000px;
  25. 	}
  26. .cube>div{
  27. 	width:200px;
  28. 	height:200px;
  29. 	position:absolute;
  30. 	opacity: 0.7;
  31. 	}
  32. img{
  33. 	width:200px;
  34. 	height:200px;
  35. 	}
  36. .box1{
  37. 	transform: rotateX(90deg) translateZ(100px);
  38. 	}
  39. .box2{
  40. 	transform: rotateX(-90deg) translateZ(100px);
  41. 	}
  42. .box3{
  43. 	transform:  rotateY(0deg) translateZ(100px);
  44. 	}
  45. .box4{
  46. 	transform:  rotateY(180deg) translateZ(100px);
  47. 	}
  48. .box5 {
  49. 	transform: rotateY(90deg) translateZ(100px);
  50. 	}
  51. .box6  {
  52. 	transform: rotateY(-90deg) translateZ(100px);
  53. 	}
  54. .change{
  55. 	transform:  translateZ(50px);
  56. }
  57. </style>

html：

  1. <div class="cube">
  2. 	<div class="box1" data-key="1"><img src="./img/imgs/1.jpg"></div>
  3. 	<div class="box2" data-key="2"><img src="./img/imgs/2.jpg"></div>
  4. 	<div class="box3" data-key="3"><img src="./img/imgs/3.jpg"></div>
  5. 	<div class="box4" data-key="4"><img src="./img/imgs/4.jpg"></div>
  6. 	<div class="box5" data-key="5"><img src="./img/imgs/5.jpg"></div>
  7. 	<div class="box6" data-key="6"><img src="./img/imgs/6.jpg"></div>
  8. </div>
  9. <audio src="./img/audio/1.mp3" data-key="1"></audio>
  10. <audio src="./img/audio/2.mp3" data-key="2"></audio>
  11. <audio src="./img/audio/3.mp3" data-key="3"></audio>
  12. <audio src="./img/audio/4.mp3" data-key="4"></audio>
  13. <audio src="./img/audio/5.mp3" data-key="5"></audio>

js：

  1. let divs=document.querySelectorAll('.cube>div')
  2. let audios=document.querySelectorAll('audio')
  3.     for(let i=0;i<divs.length;i++){
  4. 		for(let j=0;j<audios.length;j++){
  5. 			if(divs[i].dataset.key===audios[j].dataset.key){
  6. 				divs[i].onclick=function(){
  7. 					audios[j].play()
  8. 				}
  9. 			}
  10. 		}
  11. 	}

✍在最后，如果觉得博主写的还行

，期待🍟点赞  🍬评论 🍪收藏

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发