console 命令行工具 X clear

console

var music_note_width = 20;
var play_status = false;
var inc;
window.onload=function(){
	function musicAnimation(){
        for (var i = 0; i < notes.length; i++) {
            var h = Math.floor(Math.random() * 200)
            notes[i].style.height= h +"px";
        }
	}
	generaMusicNote();	
    var es = document.getElementsByClassName("back")
    for (var i = 0; i < es.length; i++) {
        es[i].style.height= window.innerHeight +"px";
     } 
    var notes = document.getElementsByTagName("span");
	var avastar = document.getElementsByClassName("avastar")[0];
    avastar.onmouseover = function(){
        if(play_status){
            document.getElementById("pause-btn").style.display = "inline-block";
        }else{
            document.getElementById("play-btn").style.display="inline-block";
        }
    }
	avastar.onmouseout = function(){
		document.getElementById("play-btn").style.cssText= "display:none;";
		document.getElementById("pause-btn").style.display = "none";
	}

	document.getElementById("play-btn").onclick=function(){
        var e = document.getElementById("player")
        if(e.paused){
            e.play();
            play_status = true;
            inc = setInterval(musicAnimation,200);
            changeButtonStatue();
            addAnimation(avastar);
        }else{
            e.pause();
            play_status = false;
            clearInterval(inc);
            changeButtonStatue();
            addAnimation(avastar);
        }
	}
	document.getElementById("pause-btn").onclick=function(){
        var e = document.getElementById("player")
        if(e.paused){
            e.play();
            play_status = true;
            inc = setInterval(musicAnimation,200);
            changeButtonStatue();
            addAnimation(avastar);
        }else{
            e.pause();
            play_status = false;
            clearInterval(inc);
            changeButtonStatue();
            addAnimation(avastar);
        }
	}
			// var inc = setInterval(musicAnimation,200);
}

function addAnimation(e){
	if(play_status){
		e.style.animation  = "rotateAvastar linear 10s infinite";
	}else{
		e.style.animation = ""; 
	}
}

function changeButtonStatue(){
    if(play_status){
        document.getElementById("pause-btn").style.display = "inline-block";
        document.getElementById("play-btn").style.display="none";
    }else{
        document.getElementById("pause-btn").style.display = "none";
        document.getElementById("play-btn").style.display="inline-block";
    }
}

function generaMusicNote(){
    var line = document.getElementById("line").offsetWidth;
    var note_num = Math.floor(line / (music_note_width + 13));
    var playing = document.getElementById("playing");
    var step = Math.floor(note_num % 2 === 0 ? 100 / (note_num / 2) : 100 / ((note_num-1) / 2));
    var h = 0;
    for (var i = 0; i < note_num / 2; i++) {
        (function(){
            var temp = document.createElement("span");
            temp.style.height = h+"px";
            // temp.style.marginTop = Math.ceil((h / 2)) + "px";
            h+= step;
            playing.appendChild(temp);
        }());
    }
    for (var i = note_num; i > note_num / 2; i--) {
        (function(){
            var temp = document.createElement("span");
            temp.style.height = h+"px";
            // temp.style.marginTop = Math.ceil((h / 2)) + "px";
            h-= step;
            playing.appendChild(temp);
        }());
    }
}
window.onsize = function(){
    var es = document.getElementsByClassName("back")
    for (var i = 0; i < es.length; i++) {
        es[i].style.height= window.innerHeight +"px";
    } 
}

<div class="wrapper">
    <div class="bg2 back">
    </div>
    <div class="bg back">
    </div>
    <div class="content">
        <div id="line">
        </div>
        <div class="avastar">
            <i class="fa fa-play" id="play-btn" style="display: none" aria-hidden="true">
            </i>
            <i class="fa fa-pause" id="pause-btn" style="display: none" aria-hidden="true">
            </i>
        </div>
        <div id="playing">
        </div>
    </div>
    <audio src="http://m10.music.126.net/20170928112153/f81ce2a380e874f8895d777e14261acf/ymusic/7b68/3b9b/71c3/8b9935933539edeb1762a8fb5d5800a8.mp3"
    id="player">
        haha
    </audio>
</div>

.bg {
    filter: blur(12px) brightness(0.8);
    position: absolute;
    background: url("https://www.hdwallpapers.net/previews/kurumi-tokisaki-nightmare-date-a-live-496.jpg") no-repeat 0 0 /100% 100%;
    /*height: 700px;*/
    width: 100%;
    z-index: 0;
}

.bg2 {
    position: absolute;
    background: url("http://img4.duitang.com/uploads/item/201208/06/20120806104521_wNv8M.jpeg") no-repeat 0 0 /100% 100%;
    /*height: 700px;*/
    width: 100%;
}

.avastar {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    text-align: center;
    height: 200px;
    width: 200px;
    background: url("data:image/jpg;base64,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") no-repeat;
    border-radius: 50%;
    line-height: 200px;
    font-size: 84px;
    color: white;
    z-index: 1;
    transition: filter 2s;
    /*top: 50%;*/
    /*margin-top: -100px;*/
}

.avastar:hover {
    filter: brightness(0.4);
    transition: filter 2s;
}

.avastar #play-btn {
    transition: display 2s;
}

.content {
    position: absolute;
    height: 200px;
    width: 100%;
    top: 50%;
    margin-top: -100px;
}

#line {
    opacity: 0;
    /*attention*/
    position: absolute;
    width: 80%;
    height: 6px;
    top: 50%;
    margin-top: -3px;
    left: 10%;
    background: rgba(211, 45, 67, 0.3);
}

#playing {
    position: absolute;
    top: 50%;
    margin-top: -100px;
    width: 80%;
    left: 10%;
    display: flex;
    align-items: center;
    height: 200px;
    justify-content: space-between;
}

#playing span {
    display: inline-block;
    margin: 0 6px;
    width: 20px;
    /*height: 100px;*/
    background: orange;
    opacity: 0.6;
    z-index: 0;
    transition: height 200ms;
    /*margin:0 5px;*/
}

@keyframes rotateAvastar {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}

本项目引用的自定义外部资源

font-awesome.css