原生js

ledudu · Aug 18, 2017 · d3a2f09 · d3a2f09
1 parent df068ea
commit d3a2f09
Show file tree

Hide file tree

Showing 13 changed files with 152 additions and 0 deletions.
diff --git a/音乐播放器/css/style.css b/音乐播放器/css/style.css
@@ -0,0 +1,46 @@
+.music {
+    width: 200px;
+    height: 300px;
+    background: #333;
+    border-radius: 5px;
+    box-shadow: 3px -3px 3px #666;
+    position: relative;
+}
+.music .screen {
+    height:70%;
+    width:96%;
+    background: #ccc;
+    margin-left:2%;
+    margin-top: 2%;
+}
+
+.music .buttons {
+    height:25%;
+    width:96%;
+    background: wheat;
+    margin-left:2%;
+    margin-top: 2%;
+}
+.music .screen img{
+    width: 100px;
+    height: 100px;
+    margin-top: 50px;
+    margin-left: 40px;
+    cursor: pointer;
+    transform:rotate(30deg);
+    -webkit-transform:rotate(30deg);
+    -o-transform:rotate(30deg);
+    -ms-transform:rotate(30deg);
+    -moz-transform:rotate(30deg);
+}
+.music .buttons img {
+    width: 45px;
+    height: 45px;
+    margin-left: 10px;
+    margin-top: 15px;
+    cursor: pointer;
+    border-radius: 8px;
+}
+.music .buttons img:hover{
+    background-color: rgba(0, 0, 0, 0.13);
+}
diff --git a/音乐播放器/img/1.svg b/音乐播放器/img/1.svg
diff --git a/音乐播放器/img/netx1.svg b/音乐播放器/img/netx1.svg
diff --git a/音乐播放器/img/next.svg b/音乐播放器/img/next.svg
diff --git a/音乐播放器/img/pause.svg b/音乐播放器/img/pause.svg
diff --git a/音乐播放器/img/start.svg b/音乐播放器/img/start.svg
diff --git a/音乐播放器/index.html b/音乐播放器/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>音乐小站</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+<div id="music" class="music">
+    <div class="screen">
+        <img src="img/1.svg" alt="">
+    </div>
+    <div class="buttons">
+        <img id="prev" src="img/netx1.svg" alt="">
+        <img id="start" src="img/start.svg" alt="">
+        <img id="next" src="img/next.svg" alt="">
+    </div>
+</div>
+</body>
+<script src="js/main.js"></script>
+</html>
diff --git a/音乐播放器/js/main.js b/音乐播放器/js/main.js
@@ -0,0 +1,80 @@
+//元素剧中的方法
+function _center(dom){
+    dom.style.position="absolute";
+    dom.style.top="50%";
+    dom.style.left="50%";
+    dom.style.marginTop=-dom.offsetHeight/2+"px";
+    dom.style.marginLeft=-dom.offsetWidth/2+"px";
+}
+function dom(id){
+    if(id.toString().indexOf("#")!=1){
+        id=id.replace("#","");
+    }
+    return document.getElementById(id);
+}
+var musicDom=dom("#music");
+_center(musicDom);
+//元素居中方法结束
+var i=0;
+//封装操作音乐
+var musicBox={
+    musicDom:null,
+    songs:[],
+    init:function(){
+        this.musicDom=document.createElement('audio');
+    },
+    add:function(src){
+        this.songs.push(src);
+    },
+    play:function(index){
+        this.musicDom.src=this.songs[index];
+        this.musicDom.play();
+    },
+    stop:function(){
+        this.musicDom.pause();
+    },
+    next:function(){
+        this.play(i+1);
+    },
+    prev:function(){
+        this.play(i-1);
+    }
+}
+//添加两首歌曲
+musicBox.add("mp3/1.mp3");
+musicBox.add("mp3/2.mp3");
+musicBox.add("mp3/3.mp3");
+musicBox.add("mp3/4.mp3");
+musicBox.add("mp3/5.mp3");
+
+//点击播放或者暂停
+var oStart=document.getElementById("start");
+musicBox.init();
+var onOff = true;
+oStart.onclick=function() {
+    if(onOff){
+        oStart.src="img/pause.svg";
+        musicBox.play(i);
+        onOff=false;
+    }
+    else {
+        oStart.src="img/start.svg";
+        onOff=true;
+        musicBox.stop();
+    }
+}
+//点击播放或暂停结束
+
+//点击播放下一首
+var oNext=document.getElementById("next");
+oNext.onclick=function() {
+    musicBox.next();
+    i++;
+}
+//点击播放上一首
+var oPrev=document.getElementById("prev");
+oPrev.onclick=function() {
+    musicBox.prev();
+}
+
+
diff --git a/音乐播放器/mp3/1.mp3 b/音乐播放器/mp3/1.mp3
diff --git a/音乐播放器/mp3/2.mp3 b/音乐播放器/mp3/2.mp3
diff --git a/音乐播放器/mp3/3.mp3 b/音乐播放器/mp3/3.mp3
diff --git a/音乐播放器/mp3/4.mp3 b/音乐播放器/mp3/4.mp3
diff --git a/音乐播放器/mp3/5.mp3 b/音乐播放器/mp3/5.mp3